JS篇 命名规范: AMD、CMD、CommonJS

如今流行的命名规范有如下几种:git

1. AMD规范        实现者:requirejs、dojo github

2. CMD规范        实现者:seajsapi

3. CommonJS规范      实现者:NodeJS浏览器

4. ES6中的规范app

5. UMD(Universal)异步

 

AMD规范源于CommonJS中的Transport/C规范,格式以下:async

define(id?, dependencies?, factory);

模块名规范:函数

1. 模块名由:多个string name 或者 '/'组成;requirejs

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. CMD规范

2. AMD规范

3. SeaJS

4. UMD

相关文章
相关标签/搜索