为什么要使用模块化?
随着互联网技术的发展,网页的JavaScript代码越来越庞大,越来越复杂,复杂的网页通常需要团队分工合作、进度管理等,开发者迫切需要能隔离、组织庞大的JavaScript代码的功能,也就是这里所说的模块化。
一个模块就是一个实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。同时还解决了命名冲突,变量污染等问题。
模块化开发规范在前端先驱们的探索中一步步形成。从最开始的函数封装 --->对象-->立即执行函数,到后来的CommonJS、AMD、CMD。
CommonJS、AMD、CMD
- CommonJS规范
CommonJS是服务器端模块的规范,Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。它的主要内容:
定义模块 根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性
模块输出: 模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入该对象
加载模块: 加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象。
//模块定义 myModel.js
var name = 'Byron';
function printName(){
console.log(name);
}
module.exports = {
printName: printName,
}
//加载模块
var nameModule = require('./myModel.js');
nameModule.printName();
CommonJS的局限:由于require是同步的,模块系统需要同步读取模块文件内容,并编译执行以得到模块接口。这在服务器端可以很好的执行,因为模块都放在本地硬盘,直接读取就行了。但CommonJS却不适合浏览器环境,比如:
var math = require('math');
math.add(2, 3);
后面的代码执行依赖于前面加载的模块math,浏览器加载是异步的,如果加载时间很长,后面的代码也无法执行,会一直卡在那里。为了解决这个问题,诞生了AMD和CMD规范。
- AMD
AMD 即Asynchronous Module Definition,中文名是异步模块定义的意思。语法:
1.用define来定义模块。
define(id?, dependencies?, factory);
id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)
dependencies:是一个当前模块依赖的模块名称数组
factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值
2.用require来加载模块。
require([dependencies], function(){});
require()函数接受两个参数:
第一个参数是一个数组,表示所依赖的模块
第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块
require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
- CMD
CMD([Common Module Definition] 模块定义规范。在 CMD 规范中,一个模块就是一个文件。代码的书写格式如下:
define(function(require, exports, module) {
// 模块代码
});
require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口;exports 是一个对象,用来向外提供模块接口;module 是一个对象,上面存储了与当前模块相关联的一些属性和方法。
- AMD和CMD的区别:
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD:提前执行(异步加载:依赖先执行)+延迟执行。
CMD:延迟执行(运行到需加载,根据顺序执行)。
CMD 推崇依赖就近,AMD 推崇依赖前置。
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})