module.exports、exports、export、export default之间的关系和区别
对于module.exports、exports和export、export default之间的关系以及他们的区别一直处于懵逼状态的小伙伴，本篇文章带你走进新大陆。 首先我们要明白一个前提，CommonJS模块规范和ES6模块规范完全是两种不同的概念。此处会产生一个疑问，为什么会出现模块化这种东西，模块化规范又是指的什么？ ：很久以前，开发网页要通过命名空间的方式来组织代码，例如 jQuery 库将它的 API 都放在了 window.$ 下，在加载完 jQuery 后，其他模块再通过 window.$ 去使用 jQuery。这样做有很多问题，其中包括： 1、命名空间冲突，两个库可能会使用同一个名称，例如 Zepto(http://zepto.com) 也是放在 window.$ 下 2、无法合理地管理项目的依赖和版本 3、无法方便地控制依赖的加载顺序 当项目变大，这种方式将变得难以维护，需要用模块化的思想来组织代码。 模块化的特点： 1、提升开发效率：代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发法类似的功能。 2、方便后期维护：代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发法类似的功能。 模块化的规范： 服务器端规范主要是CommonJS，node.js用的就是CommonJS规范。 客户端规范主要有：AMD（异步模块定义，推崇依赖前置）、CMD（通用模块定义，推崇依赖就近）。AMD规范的实现主要有RequireJS，CMD规范的主要实现有SeaJS。但是SeaJS已经停止维护了，因为在ES6中已经有了模块化的实现，随着ES6的普及，第三方的模块化实现将会慢慢的淘汰。 本文主要介绍的也是CommonJS和ES6，所以其他的规范请允许我无耻的忽略了，下面进入正题： 一、CommonJS模块规范 CommonJS的核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports到处需要暴露的接口。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。 module.exports: // utils.js let appid = '123456' let bar = function (id) { return `编号：${id}` } // 通过module.exports将appid与bar暴露出去 module.exports = { appid , bar } ---------------------------------------------------- let utils = require('./utils') // 通过require引入utils console.log(utils.appid) // 12345 console.log(utils.bar(2)) // 编号：2 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 exports: 为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。 let exports = module.exports; ！！！ 这里要注意： 不能直接将exports变量指向一个值，因为这样等于切断了exports与module.exports的联系。 let exports = module.exports let appid = '123456' // 错误写法 exports = { appid } // 正确写法 exports.appid = appid 1 2 3 4 5 6 7 8 二、ES6模块规范 不同于CommonJS，ES6使用 export 和 import 来导出、导入模块。 export： // utils.js export const appid = '123234' export function getAppid() { return '123456' } ------------------------------------------------- // 导出的几种方式： import { appid , getAppid } from './utils' // 导入多个导出 import * as utils from 'utils' // 作为命名空间导入整个模块 console.log(appid) // 123234 console.log(getAppid ()) // 123456 1 2 3 4 5 6 7 8 9 10 11 12 export default： 使用export default命令，为模块指定默认输出，这里要注意错误的一种写法： // 错误写法 export default const appid = '123456' // 正确写法 const appid = '123456' export default appid ---------------------------------------------------- import utils from './utils' // 导入默认值 console.log(utils) // 123456 1 2 3 4 5 6 7 8 9 10 顺便介绍一下import常用的几种写法： import { foo, bar } from ‘./utils’ // 导入多个导出 import * as utils from ‘utils’ // 作为命名空间导入整个模块 import utils from ‘utils’ // 导入默认值 import utils , { foo , bar } from ‘./utils’ // 导入多个导出与默认导出 import { foo , bar } , * as utils from ‘utils’ // 导入命名空间整个模块与多个导出 import(’./utils’).then (res) => { // do something} // import动态导入函数，当使用它的时候，会返回一个promise。 let module = await import(’./utils’) // 支持await关键字 三、相关文档 CommonJS规范，http://javascript.ruanyifeng.com/nodejs/module.html ES6 Module 的语法，http://es6.ruanyifeng.com/#docs/module Import用法介绍，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import 本月开始学习小程序，会总结小程序专栏文章
