题目1: 为什么要使用模块化?
使用模块化可以:
- 解决命名冲突;
- 可进行依赖管理;
- 增强代码的可读性;
- 代码解耦,提高代码的复用率;
题目2: CMD、AMD、CommonJS 规范分别指什么?有哪些应用
-
CMD:
CMD 即Common Module Definition通用模块定义,CMD规范是国内发展出来的,就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,SeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同
语法
Sea.js 推崇一个模块一个文件,遵循统一的写法
define
define(id?, deps?, factory)
因为CMD推崇
- 一个文件一个模块,所以经常就用文件名作为模块id
- CMD推崇依赖就近,所以一般不在define的参数中写依赖,在factory中写
factory有三个参数
function(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,中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范
由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数,也就是大名鼎鼎RequireJS,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出
requireJS主要解决两个问题
- 多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
- js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长
看一个使用requireJS的例子
// 定义模块 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
// 加载模块
require(['myModule'], function (my){
my.printName(); });
语法
requireJS定义了一个函数 define,它是全局变量,用来定义模块
define(id?, dependencies?, factory);
id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)
dependencies:是一个当前模块依赖的模块名称数组
factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值
在页面上使用require函数加载模块
require([dependencies], function(){});
require()函数接受两个参数
- 第一个参数是一个数组,表示所依赖的模块
- 第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块
require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
-
CommonJS服务器端规范(node.js使用)
node.js 天然支持CommonJS规范
定义模块: 根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性
模块输出: 模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入该对象
加载模块: 加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象
//在文件a.js中定义模块
var people = {
name:'ruoyu',
sayName: function(){
console.log(this.name)
}
}
module.exports = people;
//在文件b.js中定义加载模块,终端输入node b.js运行
var p = require('./a');
p.sayName();
console.log('hello')
require是同步的。即模块系统需要同步读取模块文件内容,并编译执行以得到模块接口。这在服务器端实现很简单,在浏览器端,加载JavaScript最佳、最容易的方式是在document中插入script 标签。但脚本标签天生异步,传统CommonJS模块在浏览器环境中无法正常加载。
解决思路之一是,开发一个服务器端组件,对模块代码作静态分析,将模块与它的依赖列表一起返回给浏览器端。但需要服务器安装额外的组件,并因此要调整一系列底层架构。