现在流行的命名规范有以下几种:
1. AMD规范 实现者:requirejs、dojo
2. CMD规范 实现者:seajs
3. CommonJS规范 实现者:NodeJS
4. ES6中的规范
5. UMD(Universal)
AMD规范源于CommonJS中的Transport/C规范,格式如下:
define(id?, dependencies?, factory);
模块名规范:
1. 模块名由:多个string name 或者 '/'组成;
2. string name遵从驼峰规则,或者:'.', '..';
3. 模块名禁止带扩展名,如:'.js';
4. 顶级路径模块名以根空间开始,相对路径模块名:以'.', '..'开始;
依赖规范:
1. 如果是["require", "exports", "module"],按照CommonJS规范,否则将参数作为参数列表注入factory中。
工厂规范:
1. 无依赖参数时,通过toString来require依赖;有依赖参数则按依赖参数来访问;
2. 依赖先执行,工厂后执行;
define.amd属性
1. amd属性标识该define函数遵守AMD规范,以区别于不遵守AMD的define函数;
2. amd规范如果更新,则会以amd2属性为名称;
3. amd属性的值是一个对象,但对象具体内容有实现者自定义;
与CommonJS的关系:
1. 只要CommonJS(实现者:NodeJS)的factory中无同步的require就可以通用,因为浏览器端不支持,同时性能上也有影响。
CMD规范:
define(function(require, exports, module) { // The module code goes here});
1. require(id)用于同步加载
2. require.async(idList, callback)用于异步加载
3. CMD区分CommonJS:module存在,define不存在属于Node环境;module,define都存在属于CMD环境;
UMD:通用模块定义方式,意在提供通用的代码将实现包裹起来,在多种平台下(AMD、CMD、Node、Browser Global)使用;
// 兼容AMD与浏览器全局变量:AMD环境中典型Case: 依赖模块需要加载完成后,才执行本模块;否则Global下则直接从Global取;(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['depModA', 'depModB'], function (depModA, depModB) { return (root.amdWebGlobal = factory(depModA, depModB)); }); } else if (typeof exports === 'object') { // Node or CMD. module.exports = factory(require('depModA'), require('depModB')); } else { // Browser globals root.amdWebGlobal = factory(root.depModA, root.depModB); }}(this, function (depModA, depModB) { // ..... (implementation) 实现部分 return {};}));
个人认为定义各环境通用的代码可以如下(尚未使用,目前仅作参考):
// 1. Module factory.function factory(optionalDepList){ // CODE ... implementation. console.log("Factory implementation"); // return object or else. return;}// 2. Module name.factory.modName = '...';// 3. Dependant List.factory.depList = [ 'dependModuleName1', 'dependModuleName2']; // Universal CODE.(function(root, factory){ if(typeof define === 'function' && !!define.amd){ // AMD define(factory.modName, factory.depList, factory); }else if(typeof define === 'function'){ // CMD define(function(require, exports, module){ module.exports = factory.apply(root, arguments) || module.exports; }); }else if(typeof module === 'object' && typeof define === 'undefined'){ // CommonJS|NodeJS module.exports = factory.apply(root, arguments) || module.exports; }else{ // Browser global root[factory.modName] = factory.apply(root); }})(this, factory);
参考:
1.
2.
3.
4.