模块化
一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数
演变历史
CommonJS
其实就是NodeJS的实现
- 环境变量
- module
- exports ：
module对象的一个属性，module.exports的引用 - require ：
不加相对路径的话只会去node_modules文件找 - global
- 同步加载（适合服务端）
AMD
依赖require.js
用require.config()指定引用路径，用definde()定义模块，用require()加载模块
- 异步加载：
所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行 - 缺点：
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) {
// 等于在最前面声明并初始化了要用到的所有模块
if (false) {
// 即便没用到某个模块 b，但 b 还是提前执行了。**这就是CMD要优化的地方**
b.foo()
}
});
示例
/** 网页中引入require.js及main.js **/
<\script src="js/require.js" data-main="js/main"></>
/** main.js 入口文件/主模块 **/
// 首先用config()指定各模块路径和引用名
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min", //实际路径为js/lib/jquermin.js
"underscore": "underscore.min",
}
});
// 执行基本操作
require(["jquery","underscore"],function($,_){
// some code here
})
// 定义math.js模块
define(function () {
var basicNum = 0;
var add = function (x, y) {
return x + y;
};
return {
add: add,
basicNum :basicNum
};
})
// 定义一个依赖underscore.js的模块
define(['underscore'],function(_){
var classify = function(list){
_.countBy(list,function(num){
return num > 30 ? 'old' : 'young';
})
};
return {
classify :classify
};
}
// 引用模块，将模块放在[]内
require(['jquery', 'math'],function($, math){
var sum = math.add(10,20);
$("#sum").html(sum);
});
CMD
依赖 sea.js
AMD推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行（sea.js推广过程中产生的）
示例
/** CMD写法 **/
define(function(require, exports, module) {
var a = require('./a'); //在需要时申明
a.doSomething();
if (false) {
var b = require('./b');
b.doSomething();
}
});
/** sea.js **/
// 定义模块 math.js
define(function(require, exports, module) {
var $ = require('jquery.js');
var add = function(a,b){
return a+b;
}
exports.add = add;
});
// 加载模块
seajs.use(['math.js'], function(math){
var sum = math.add(1+2);
});
ES6 Module
ES6 在语言标准的层面上，实现了模块功能，旨在成为浏览器和服务器通用的模块解决方案。
- 环境变量
- export
- import：相当于require
- 严格模式：ES6 的模块自动采用严格模式
- import read-only特性： import的属性是只读的，不能赋值，类似于const的特性
- export/import提升： import/export必须位于模块顶级，不能位于作用域内；
- 其次对于模块内的import/export会提升到模块顶部，这是在编译阶段完成的
- 缺点：ES6的模块不是对象，import命令会被 JavaScript 引擎静态分析，在编译时就引入模块代码，而不是在代码运行时加载，所以无法实现条件加载
ES6 模块与 CommonJS 模块的差异
- CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用，模块内部引用的变化，会反应在外部
- CommonJS 模块是运行时加载，ES6 模块是编译时输出接口
其他
UMD（Universal Module Definition）是一种用于将 JavaScript 模块打包成可以在浏览器、Node.js 和其他环境中通用的格式的模块定义。
示例
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD环境
define(['react'], factory);
} else if (typeof exports === 'object' && typeof module === 'object') {
// CommonJS环境（如Node.js）
var React = require('react');
module.exports = factory(React);
} else {
// 全局变量环境
root.YourModule = factory(root.React);
}
}(typeof self !== 'undefined' ? self : this, function (React) {
// 这里写你的模块代码
// 返回你的模块或组件
return YourModule;
}));上面的代码是一个自执行函数，它会根据模块加载器（比如 AMD 或 CommonJS）的可用性来决定如何导出模块。 在 AMD 环境中，使用define来导出模块，设置依赖项为react，并调用工厂函数来创建模块。 在 CommonJS 环境中，使用module.exports导出模块，并将依赖项react作为参数传递给工厂函数来创建模块。 在全局变量环境中，将模块绑定到全局对象上，这里假设 React 已经被全局变量window或global引入。 你可以将上述代码保存为一个单独的文件（例如your-module.js），然后可以在浏览器环境中通过script标签引入该文件，或在 Node.js 环境中使用require函数引入该模块。 UMD 模块定义允许你以一种通用的方式将模块作为依赖引入到不同的环境中，使你的代码更具灵活性和可重用性。