前端模块化

Posted on | In |

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

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新语法，我们不需要做引入。
  • CommonJS 和 AMD 为运行时加载，而 ES6 为编译时加载。