技术干货 | js模块化规范总结

 文 / Mob 手艺专家 团子

早期，我们在使用js开发的时间，并没有类的观点，更不用说模块（Module）了，固然现在es2015|2016在语言尺度的层面上，已经实现了模块的功效，而且实现的很简朴，用意也是为了尽可能成为浏览器和服务器通用的模块解决方案。

那么，作为一个模块化的系统，需要具备的是以下能力：

1.界说封装的模块。

2.界说新模块对其他模块的依赖。

3.可对其他模块的引入支持。

让我们回忆一下广为人知的几个差别的模块化规范。

commonJS

在es2015之前，js没有模块化的规范，Nodejs的CommonJS率先制订了js的模块化尺度，固然也是仅仅限制在Nodejs的服务器情况下使用。

模块化界说：

// hello.js
// exports是作为模块文件唯一出口的工具
function hello(){
console.log('hello');
}
exports.hello = hello;

// module为全局的工具，其exports属性等同于全局的exports工具

module.exports = {
sayName(){
console.log('my name is Luo Xia');
}
...
}

注：这里需要注重的是一旦使用了module.exports，最终出口将会忽略在全局的exports工具上添加的属性和要领。

//Module.js

function a(){
console.log('a');
}
exports.a = a;
module.exports = {
b(){
console.log('b');
}
};

//testM.js
let m = require("./Module");
console.log(typeof m.a); //undefined
console.log(typeof m.b); //function

导入： require(‘路径’)

有关require导入的路径规范，可以相识一下NodeJS里npm指令，这里要提到的是模块会优先从缓存加载，会优先加载焦点模块（好比npm安装好的依赖包下的模块），之后才会加载文件模块。

AMD沈阳微信小程序

AMD中译是“异步模块界说”的意思。它是一个浏览器情况下的模块化规范，可以接纳同步和异步地加载方式加载模块文件。

模块化界说： 全局的 define(id?, dependencies?, factory);
id为模块标识符，dependencies为模块依赖的其他模块，factory为依赖加载完毕后执行的回调函数。

// 自力加载模块，不依赖其他模块，省略dependencies
define(function(){
return {
sayHello(){
console.log('hello');
}
}
});

// 依赖其他模块
define(['jquery'],function(){
return {
...
}
});

导入： require([‘模块名称’], function (‘模块变量引用’)

{// 代码});

// a.js
define(function (){
　　return {
　　　a:'hello world'
　　}
});
// b.js
require(['./a.js'], function (moduleA){
console.log(moduleA.a); // 打印出：hello world
});

应用： https://requirejs.org/

CMD

CMD是在AMD基础上革新的一种规范，和AMD差别在于对依赖模块的执行时机处置惩罚差别，CMD是就近依赖，而AMD是前置依赖。也就是说AMD要在一最先就加载所有的依赖，而CMD是一级一级的加载。

界说模块： define(function(require, exports, module) {});
像AMD和CommonJS的整合版，和NodeJS兼容性会比力好，后期requireJS

define(function(require,exports,module){
require('...');
...
});

导入：

// a.js
define(function (require, exports, module){
　　exports.a = 'hello world';
});
// b.js
define(function (require, exports, module){
var moduleA = require('./a.js'); // 同步加载
// requie.async(id,callback?); 异步加载
console.log(moduleA.a); // 打印出：hello world
});

比起AMD默认一个当多个用，CMD则是根据API严酷区分，AMD中require分全局和局部加载，可是CMD是没有全局require的，每个API都简朴纯粹。

应用： https://seajs.github.io/seajs/docs/

UMD

兼容AMD和CommonJS的规范，还兼容全局引用的方式。因此在浏览器和服务器的情况都可以应用此规范。
现实上就是一个兼容性的写法

;(function (name, definition) {

// 检测上下文情况是否为AMD或CMD
if (typeof define === "function" && ( define.amd || define.cmd ) ) {

define(definition);

// 检测上下文情况是否为Node
} else if ( typeof module !== 'undefined' && module.exports ) {

 1/2    1 2 下一页 尾页