JavaScript模块化编程那些事

概述

模块化是将系统分离成独立功能的方法，这样我们可以按需加载功能。

往往当一个项目开发得越来越复杂时，可能会遇到这些些问题，例如：命名冲突、文件依赖等。

总结：在生产的角度，模块化开发是一种生产方式，这种方式生产效率高，维护成本低。

模块化开发演变

全局函数

在早期的开发过程中会将重复的代码封装搭到函数中，再将一系列的函数放到一个文件中。这种方式存在一些问题：存在污染全局变量、看不出相互的直接关系。这种方式并不能解决根本的问题：命名冲突和文件依赖。

对象命名空间

通过对象命名空间的形式，从某种程度上解决了变量命名冲突的问题，但是并不能从根本上解决命名冲突。存在问题：内部状态可被外部改写、命名空间越来越长。

私有公有成员分离

利用此种方式将函数包装成一个独立的作用域，私有空间的变量和函数不会影响到全局作用域。这种方式相当于现在写插件的形式，解决了变量命名冲突的问题，但是没有解决降低开发复杂度的问题。

CommonJS

CommonJS规范加载模块是同步的，也就是说，加载完成才执行后面的操作。

CommonJS规范分为三部分：module(模块标识)、require(模块引用)、exports(模块定义)。 module变量在每个模块内部，就代表当前模块； exports属性是对外的接口，用于导出当前模块的方法或变量；require()用来加载外部模块，读取并执行js文件，返回该模块的exports对象。

AMD(reuire.js)

AMD也就是异步模块定义，它采用异步方式加载模块，主要针对的是浏览器端的模块规范。它通过define方法去定义模块，require方法去加载模块。

AMD定义：如果这个模块还需要依赖其他模块，那么define函数的第一个参数，必须是一个数组，指明该模块的依赖。

require(['modules'], callback);

第一个参数['modules']，是一个数组，里面的成员就是需要加载的模块；第二个参数callback，则是加载成功之后的回调函数。

CMD(sea.js)

CMD即通用模块定义，CMD规范是国内发展出来的；正如AMD有require.js，CMD有个浏览器的实现sea.js。sea.js要解决的问题和require.js一样，只不过在模块定义方式和模块加载方式上有所不同。

define(function (require, exports, module) {  
  // 模块代码
})

require是可以把其他模块导入进来的一个参数；exports可以把模块内的一些属性和方法导出；module是一个对象，上面存储了与当前模块相关联的一些属性和方法。CMD是按需加载，推崇依赖就近，延迟执行。文件是提前加载好的，只有在require的时候才去执行文件；

ES6 Module

ES6模块化汲取CommonJS和AMD的优点，语法简洁，支持异步加载，未来可以成为浏览器和服务器通用的模块化解决方案。
ES6中模块的定义：ES6新增了两个关键字：export和import。export用于把模块里的内容暴露出来，import用于引入模块提供的功能。
ES6中模块的加载，import加载模块：

import{bar,foo,test,obj} from './lib'foo();

注意：可以使用export default命令，为模块指定默认输出，一个模块只能有一个默认输出，所以export default只能使用一次。

ES6模块运行机制：ES6模块是动态引用，如果使用import从一个模块加载变量(即import foo from 'foo')，变量不会被缓存，而是成为一个指向被加载模块的引用。等脚本执行时，根据只读引用，到被加载的那个模块中去取值。

一郭鲜