0%

AMD,CommonJS

AMD,CommonJS

多年来,可供选择的JavaScript组件的生态系统不断地稳步增加。有很多的选择固然是很好的一件事,但是各个组件混合搭配使用的时候会带来不少的问题,开发者不会花很多时间就会发现所有组件使用起来总有这样那样的问题。为了解决这些问题,互为竞争对手的模块规范 AMD 和 CommonJS 出现了,它们可以让开发者在约定的沙箱以模块化的方式编写自己的代码,以免“污染生态系统”。

AMD

异步模块定义(英文简称AMD)已经引领了前端潮流,RequireJS已经是最流行的实现方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 定义模块 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}

return {
printName: printName
};
});

// 加载模块
require(['myModule'], function (my){
  my.printName();
});

语法
requireJS定义了一个函数 define,它是全局变量,用来定义模块

1
define(id?, dependencies?, factory);

1、id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)
2、dependencies:是一个当前模块依赖的模块名称数组
3、factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值
在页面上使用require函数加载模块

require()函数接受两个参数

1、第一个参数是一个数组,表示所依赖的模块
2、第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块
require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

CommonJS

我们先从CommonJS谈起,因为在网页端没有模块化编程只是页面JavaScript逻辑复杂,但也可以工作下去,在服务器端却一定要有模块,所以虽然JavaScript在web端发展这么多年,第一个流行的模块化规范却由服务器端的JavaScript应用带来,CommonJS规范是由NodeJS发扬光大,这标志着JavaScript模块化编程正式登上舞台。

1、定义模块
根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性

2、模块输出:
模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入该对象

3、加载模块:
加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//模块定义 myModel.js

var name = 'Byron';

function printName(){
console.log(name);
}

function printFullName(firstName){
console.log(firstName + name);
}

module.exports = {
printName: printName,
printFullName: printFullName
}

//加载模块

var nameModule = require('./myModel.js');

nameModule.printName();