前端模块化

简单说一下前端模块化标准的基础用法~~

CommonJS

CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。

示例:

1
2
3
4
5
6
// a.js
var obj = {
name: 'John',
age: 18
}
module.exports = obj;
1
2
3
4
// b.js
var obj = require('./a');
obj.name; // John

AMD

AMD(异步模块定义)是为浏览器环境设计的,因为 CommonJS 模块系统是同步加载的,当前浏览器环境还没有准备好同步加载模块的条件。

语法: define(id?, dependencies?, factory);,前两个参数可选

示例:

1
2
3
4
5
6
7
define('objModule', ['jquery'], function($) {
// $ 是 jquery 模块的输出
$('body').text('hello world');
});
// 使用,相比起CommonJS多了回调函数
require(['objModule'], function(myModule) {});

ES6

新一代JavaScript标准

示例一:

1
2
3
4
5
6
// a.js
var obj = {
name: 'John',
age: 18
}
export default obj;
1
2
3
4
// b.js
import obj from './a';
obj.name; // John

示例二:

1
2
3
4
5
6
// a.js
var obj = {
name: 'John',
age: 18
}
exports.obj = obj;
1
2
3
// b.js
import { obj } from './a';
obj.name; // John

其他

  • CommonJS为同步,AMD为异步。
  • CommonJS是一中规范,NodeJS中所采用的规范。
  • ES6 标准为JavaScript新语法,我们不需要做引入。
  • CommonJSAMD 为运行时加载,而 ES6 为编译时加载。