JS模块化开发-使js更加规范

为什么会有模块化

• 命名冲突：当项目由团队进行协作开发的时候，不同开发人员的变量和函数命名可能相同；即使是一个开发，当开发周期比较长的时候，也有可能会忘记之前使用了什么变量，从而导致重复命名，导致命名冲突。

• 文件依赖：代码重用时，引入 js 文件的数目可能少了，或者引入的顺序不对，比如使用 boostrap 的时候，需要引入 jQuery，并且 jQuery 的文件必须要比 boostrap 的 js 文件先引入。

• 代码耦合度过高：如今讲究的是效率与速度，特别是在进行混合式APP开发时，如果代码重复率过高，则会导致本地资源包过大，从而无限降低了资源包的大小，也会影响代码 的执行效率等。

模块化开发又有哪些好处呢？

• 提升开发效率：代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发法类似的功能。

• 方便后期维护：代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发法类似的功能。

那么如何进行模块化开发呢？

有这么几种方式

1、require方式（AMD模式）

test.js

// 首先使用define进行定义
define(function(){
    function fun1(){
      alert("it works");
    }
    fun1();
})

// 在页面中使用require进行引用
require(["js/a"]);

requireJs 的问题在于，加在一个模块时，会预先加载该模块的所有依赖模块，但是这些依赖很可能一开始并不用到。同时依赖写起来一长串，也很麻烦。比较好的是 AMD 保留了 commonJs 中的 require、exprots、module3 个功能，可以不把以来都写在 dependencies 中，而是在需要时使用 require 引入。

2、后起之秀SeaJs（CMD模式）

1. 引入 sea.js 库
2. 定义模块
3. define(function(require, exports, module){模块代码});
4. require(‘模块 id’)
5. seajs.use(‘模块 id’,function( 模块对象){业务代码});

3、ES2015 模块标准

ES6 考虑了模块化，使用 import 和 export，代码更加简洁，还有许多新特性让开发更加方便。