ZEROMAKE | keep codeing and thinking!
2016-08-12 | modular

javascript 的模块化

一、为何而生

这个些模块加载都是为了更好的管理 js 文件,以及引用其他文件更加方便,并且使每一个模块的全局域不再互相污染。模块化后可以使用npm进行管理以便分享。

二、模块加载规范

1.CommonJS

官网: http://www.commonjs.org
现常用于nodejs,每一个文件都是一个模块,使用require方法引入文件它会把引入的文件执行并最后将文件中的 exports 对象返回.这样好处就是不再污染全局域.但是有一点它是同步的就是你引入了就会加载文件.
官方说明可以使用在浏览器环境上,当然并没有人用.
你可以把每个 require 的 js 文件都是被包在一个方法里的。
然后外部通过执行这个方法后。

1
var exports = {
2
}
3
var module = {
4
exports: exports
5
}
6
var require = function(name) {
7
...
8
}
9
(function(exports, module, ) {
10
11
})(exports, module, require)

2.AMD(Asynchronous Module Definition)规范

规范文档: https://github.com/amdjs/amdjs-api/wiki/AMD
因为上面的 CommonJS 不合适使用在浏览器环境中所以有了 amd。它采用异步方式加载模块
amd 定义也使用require加载模块

require([module], callback([module]));

定义模块 module-name 可选 module 依赖的模块,加载后的 callback 执行并将 module 依赖作为参数传入

define(module-name, [module], callback([module]));

一个示例只有 require 加载完成模块后才会调用回调.

1
require(['math'], function (math) {
2
math.add(2, 3);
3
});

实现了 AMD 规范的 js 库: 最火的是 require.js

3.CMD(Common Module Definition)规范

规范文档: https://github.com/cmdjs/specification/blob/master/draft/module.md
基本和 AMD 差不多唯一不一样的是模块依赖设置不再直接使用 require 设置参数

1
define(function(require, exports, module) {
2
//使用require
3
var $ = require("jquery");
4
//给exports设置属性
5
exports.test = function() {};
6
//或者使用module.export返回模块对象
7
module.export = {
8
//```
9
};
10
});

这样的好处不用在参数中声明.
实现库:

4.ES6 模块

和 CommonJS 类似使用 import 导入兼容 CommonJS.查找模块方式和 CommonJS 一样

import jquery from "jquery";

export 在 es6 模块导入时使用是一个关键字可以多次使用

1
export function test() {}
2
export class Demo {}

5.UMD 规范

规范文档: https://github.com/umdjs/umd
UMD 支持通用三种模块 CommonJS,AMD,window(全局变量挂载)

1
(function (root, factory) {
2
//模块名
3
var module_name = "xxx";
4
//判断是否为CommonJS
5
if (typeof exports === 'object' && typeof require === "function") {
6
module.exports = factory(require('xxx'),...);
7
//判断是否为amd
8
} else if (typeof define === 'function' && define.amd) {
9
define([module],factory);
10
//判断是否为全局变量挂载
11
} else {
12
root[module_name] = factory(root.xxx,...);
13
}
14
})(this, function ([module]) {
15
//module ...
16
return {};
17
});