为什么会有模块化
-
命名冲突:当项目由团队进行协作开发的时候,不同开发人员的变量和函数命名可能相同;即使是一个开发,当开发周期比较长的时候,也有可能会忘记之前使用了什么变量,从而导致重复命名,导致命名冲突。
-
文件依赖:代码重用时,引入 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模式)
- 引入 sea.js 库
- 定义模块
- define(function(require, exports, module){模块代码});
- require(‘模块 id’)
- seajs.use(‘模块 id’,function( 模块对象){业务代码});
3、ES2015 模块标准
ES6 考虑了模块化,使用 import 和 export,代码更加简洁,还有许多新特性让开发更加方便。