在没有CommonJS,AMD,CMD等规范的时候,人们为了让代码模块化,采用了下面这个链接里的方法:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
NodeJS 是 CommonJS 规范的实现,webpack 也是以 CommonJS 的形式来书写。CommonJS 是一种只适用于 JavaScript 的静态模块化规范。只适用于 Node.js 开发,但是不适合浏览器环境。
原因:
特点:
实现:
NodeJS
使用:
加载模块/引入模块:
如果是第三方模块,xxx
为模块名;如果是自定义模块, xxx
为模块文件路径。
require(xxx)
暴露模块:
module.exports = value
// 或
exports.xxx = value
加载机制:
输入的是被输出的值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。
AMD,异步模块定义。浏览器的模块,不能采用“同步加载”,只能采用“异步加载”,因此 AMD 产生了。与 CommonJS 最大的不同在于它采用异步的方式去加载依赖的模块。
特点:
优点:
缺点:
使用:
加载模块/引入模块:
require([module], callback);
// 例子
require(['moduleA', 'moduleB', 'moduleC'], function(moduleA, moduleB, moduleC) {
// ...
});
定义模块:
模块必须采用特定的 define()
函数来定义。
// math.js
define(function() {
var add = function(x, y) {
return x + y;
};
return {
add: add
};
});
define()
函数的第一个参数,必须是一个数组,指明该模块的依赖性。define(['myLib'], function(myLib) {
function foo() {
myLib.doSomething();
}
return {
foo: foo
};
});
实现:
RequrieJS 是一个工具库,只要用于客户端的模块。它的模块管理遵守 AMD 规范。RequireJS 的基本思想是,通过 define
方法,将代码定义为模块;通过 require
方法,实现代码的模块加载。出自 dojo 加载器的作者 James Burke
特点:
使用:
定义模块:
define(function(require, exports, module) {
exports.xxx = value
module.exports = value
})
define(function(require, exports, module) {
// 引入依赖模块(同步)
var module2 = require('./module2')
// 引入依赖模块(异步)
require.async('./module3', function (m3) {
})
// 暴露模块
exports.xxx = value
})
加载/使用模块:
define(function (require) {
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})
实现:
使用:
导出模块:export
命令用于规定模块的对外接口。
引入模块:import
命令用于输入其他模块提供的功能。
例子:
// 定义模块math.js
var basicNum = 0;
var add = function(a, b) {
return a + b;
};
export { basicNum, add };
// 引用模块
import { basicNum, add } from './math';
function test(ele) {
ele.textContent = add(99 + basicNum);
}
模块输出 | 加载方式 | |
---|---|---|
CommonJS | 值拷贝 | 对象 |
ES6 | 引用(符号链接) | 静态解析 |
注意:由于 ES6模块化 目前无法在浏览器中执行,所以,我们只能通过 babel 将不被支持的 import
编译为当前受到广泛支持的 require
。
特点:
原文链接:js模块化