神的尾巴

全栈工程师、独立开发者

0%

聊聊前端模块化规范

1. CommonJS

具体看,阮一峰写的javascript标准教程的commentjs章节

CommonJS规范由NodeJS采用,CommonJS定义每个文件就是一个模块,有自己的作用于,在一个文件里面定义的变量、函数、类、都是私有的,对其他文件不可见。
CommonJS加载模块是同步的,所以在加载完成后才执行后面操作,所以主要用于服务端编程,不适合在网页端使用。

1
2
3
4
5
6
7
8
9
10
11
Demo:
// 导出模块
var msg = require('./msg.js');
module.exports.log = function(msg){
msg.handle(msg);
};
module.exports.version = '1.2';
// 依赖模块
var example = require('./example.js');
example.log('demo');
console.log(example.version);

2. AMD

AMD(异步模块定义)为浏览器环境设计,异步加载。由RequireJS采用,通过使用define来定义模块
define(id?: String, dependencies?: String[], factory: Function|Object);
第一个参数是模块id,第二个参数为依赖,factory的参数将由依赖的输出注入。前两个参数可选,默认依赖为[“require”, “exports”, “module”]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Demo:
// 定义模块
define('myModule', ['jquery'], function($) {
$('body').text('hello world');
});
// 使用
require(['myModule'], function(myModule) {});

// 没有设置依赖的情况
require('muModule', function(require, exports, module) {
var $ = require('jquery');
// 兼容CommonJS的写法
exports.add = function(x, y) {
return x + y;
};
return {
add: function(x, y) {
return x + y;
}
};

});

3. CMD

和AMD用法类似,由玉伯开发的SeaJS采用。
与AMD所不同的是,CMD推崇依赖就近,AMD推崇依赖前置

4. ES6模块

1
2
3
4
5
6
7
8
9
10
11
12
13
DEMO:
// 普通模块 & 使用模块
import msg from './msg';
function log(msg) {
msg.handle(msg);
}
export class Test {
...
}
export function other() {
...
}
export default log

5. UMD

UMD (Universal Module Definition), 提供一个前后端跨平台的解决方案(支持AMD与CommonJS模块方式),。
实现原理:
先判断是否支持Node.js模块格式(exports是否存在),存在则使用Node.js模块格式。
再判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。
前两个都不存在,则将模块公开到全局(window或global)。

觉得对你有帮助的话,请我喝杯咖啡吧~.