模块化开发

前言

随着项目业务的复杂，项目会变越难以维护，模块化开发是解决这个问题的一种思路。合理拆分业务，按照一定规则将业务分模块开发，会提高开发效率，降低维护成本。

模块化是一种思想，根据业务的不同和每个开发人员开发思维的不同，对于模块化的开发流程也会不同。

模块化演变过程

第一阶段：文件方式划分

起初各个页面公用一个js文件，但是随着代码量的越来越多，在一个JS中代码很混乱，也不方便协同工作。所以拆分这个公用的JS, 随着JS文件的拆分，必然会引入很多的JS模块文件：

 <script src="./b.js"></script>
 <script src="./a.js"></script>
 ......

b.js文件

var name = "module-b"

function method1() {
    console.log("I am module-b method1")
}

这样将JS划分模块化，会有以下几个问题：

• 污染全局变量： 每个JS文件中定义的变量全部都是全局变量
• 变量重名 ：不同文件中定义的相同变量（包括函数），会覆盖或报错
• 文件依赖顺序：若文件存在依赖关系，要保证引入顺序

第二阶段：命名空间方式

每个模块暴露出一个对象，所有的变量和方法都挂载到这个对象上
a.js文件

var aModule = {
    name: "a-module",

    printModule: function(){
        console.log("this is a-module")
    }
}

这样虽然可以解决污染全局变量和变量重名的问题，但是我们可以在模块外随意改变里面的变量，而且每个模块的名字在命名时也要注意重名。

第三个阶段：闭包与命名空间（IIFE）

这样每个js文件都是使用IIFE包裹的，各个js文件分别在不同的词法作用域中，相互隔离，最后通过闭包的方式暴露变量。
a.js文件

(function(){
    let name = 'Amodule'
    function printModule() {
        console.log("printModule", name)
    }

    window.aModule = {
        printModule: printModule
    }
})()

通过IIFE的方式，外部变量模块不能轻易的修改闭包内部的变量，程序的稳定性增加。

这些方式，是在早期没有工具和规范的情况下对模块化的落地方式，下面是模块化标准以后实现的模块化

第四个阶段：模块化规范阶段

上边几种方式，并没有统一的规范，而且当项目比较庞大时，也会有各种问题，因此就有各种方案：CommonJS规范，AMD，CMD，ES Module。
关于这几种规范的用法和特点，参考：模块化规范