为什么要使用模块化
所谓的模块化,就是将网页的功能打包成单独的模块来使用,一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。
使用模块化的主要目的
- 解决命名冲突
- 依赖管理
使用模块化的次要目的 - 提高可读性
- 代码解耦,提高复用性
CMD,AMD,commonJS
CMD
所谓的CMD是common module definition的缩写,CMD规范是国内发展出来的,就类似AMD有个requireJS,CMD有SeaJS一样,requireJS和SeaJS所要解决的问题一样,只是在解决问题的手段上存在着一些差异
语法
SeaJS遵从一个模块一个文件的写法,因此就常用文件名作为模块ID。
CMD推崇依赖就近,所以一般不在define的参数中写依赖,在factory中写。
factory有三个参数
factory(require, exports, module)
require
require是factory中的第一个参数
require(id)
require是一个方法,接受 模块标识 为唯一参数,用来获取其他模块的提供的接口。
exports
exports是一个对象,用来对外界提供模块接口
module
module 是一个对象,上面存储了与当前模块相关联的一些属性和方法
demo
// 定义模块 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加载模块
seajs.use(['myModule.js'], function(my){
});
AMD
AMD指的是Asynchronous Module Definition,由于不是原生JS支持,使用AMD所对应的函数库也就是requireJS,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。
AMD主要解决两个问题
- 多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
- js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长
语法
require定义了一个函数define,它是全局变量,用来定义模块
define(id?, dependencies?, factory);
- id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)
- dependencies:是一个当前模块依赖的模块名称数组
- factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值
在页面上使用require函数加载模块
require([dependencies], function(){})
require()函数接受两个参数,分别为
- 第一个参数是一个数组,表示所依赖的模块
- 第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块
require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
commonJS
CommonJS是服务器端模块的规范,Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。
在一个模块中,存在自由变量require,它是一个函数
1.这个”require”函数接收一个模块标识符。
2.“require”返回外部模块所输出的API。
3.如果出现依赖闭环(dependency cycle),那么外部模块在被它的传递依赖(transitive dependencies)所require的时候可能并没有执行完成;在这种情况下,”require”返回的对象必须至少包含此外部模块在调用require函数(会进入当前模块执行环境)之前就已经准备完毕的输出。
4.如果请求的模块不能返回,那么”require”必须抛出一个错误。在一个模块中,会存在一个名为”exports”的自由变量,它是一个对象,模块可以在执行的时候把自身的API加入到其中。
模块必须使用”exports”对象来做为输出的唯一表示。