我要评论amd
amd一开始是commonjs规范中的一个草案，全称是asynchronous module definition，即异步模块加载机制。后来由该草案的作者以requirejs实现了amd规范，所以一般说amd也是指requirejs。
requirejs的基本用法
通过define来定义一个模块，使用require可以导入定义的模块。
//a.js
//define可以传入三个参数，分别是字符串-模块名、数组-依赖模块、函数-回调函数
define(function(){
return 1;
})
// b.js
//数组中声明需要加载的模块，可以是模块名、js文件路径
require(['a'], function(a){
console.log(a);// 1
});
requirejs的特点
对于依赖的模块，amd推崇依赖前置，提前执行。也就是说，在define方法里传入的依赖模块(数组)，会在一开始就下载并执行。
cmd
cmd是seajs在推广过程中生产的对模块定义的规范，在web浏览器端的模块加载器中，seajs与requirejs并称，seajs作者为阿里的玉伯。
seajs的基本用法
//a.js
/*
* define 接受 factory 参数，factory 可以是一个函数，也可以是一个对象或字符串，
* factory 为对象、字符串时，表示模块的接口就是该对象、字符串。
* define 也可以接受两个以上参数。字符串 id 表示模块标识，数组 deps 是模块依赖.
*/
define(function(require, exports, module) {
var $ = require('jquery');
exports.setcolor = function() {
$('body').css('color','#333');
};
});
//b.js
//数组中声明需要加载的模块，可以是模块名、js文件路径
seajs.use(['a'], function(a) {
$('#el').click(a.setcolor);
});
seajs的特点
对于依赖的模块，cmd推崇依赖就近，延迟执行。也就是说，只有到require时依赖模块才执行。
commonjs
commonjs规范为commonjs小组所提出，目的是弥补javascript在服务器端缺少模块化机制，nodejs、webpack都是基于该规范来实现的。
commonjs的基本用法
//a.js
module.exports = function () {
console.log("hello world")
}
//b.js
var a = require('./a');
a();//"hello world"
//或者
//a2.js
exports.num = 1;
exports.obj = {xx: 2};
//b2.js
var a2 = require('./a2');
console.log(a2);//{ num: 1, obj: { xx: 2 } }
commonjs的特点
- 所有代码都运行在模块作用域，不会污染全局作用域；
- 模块是同步加载的，即只有加载完成，才能执行后面的操作；
- 模块在首次执行后就会缓存，再次加载只返回缓存结果，如果想要再次执行，可清除缓存；
require返回的值是被输出的值的拷贝，模块内部的变化也不会影响这个值。
es6 module
es6 module是es6中规定的模块体系，相比上面提到的规范， es6 module有更多的优势，有望成为浏览器和服务器通用的模块解决方案。
es6 module的基本用法
//a.js
var name = 'lin';
var age = 13;
var job = 'ninja';
export { name, age, job};
//b.js
import { name, age, job} from './a.js';
console.log(name, age, job);// lin 13 ninja
//或者
//a2.js
export default function () {
console.log('default ');
}
//b2.js
import customname from './a2.js';
customname(); // 'default'
es6 module的特点(对比commonjs)
- commonjs模块是运行时加载，es6 module是编译时输出接口；
- commonjs加载的是整个模块，将所有的接口全部加载进来，es6 module可以单独加载其中的某个接口；
- commonjs输出是值的拷贝，es6 module输出的是值的引用，被输出模块的内部的改变会影响引用的改变；
- commonjs
this指向当前模块，es6 modulethis指向undefined;
目前浏览器对es6 module兼容还不太好，我们平时在webpack中使用的export/import，会经过babel转换为commonjs规范。
写在后面
这里比较全面的把javascript中的几大模块化规范罗列出来，希望借此对javascript模块化有一个大致的认识，而未对细节进行具体分析，感兴趣的可以自行探索。
原文链接：
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论