zoukankan      html  css  js  c++  java
  • JS篇 命名规范: AMD、CMD、CommonJS

    现在流行的命名规范有以下几种:

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

    2. AMD规范

    3. SeaJS

    4. UMD

  • 相关阅读:
    简单的逻辑学 笔记
    中国古代文化常识 笔记
    Docker 使用官方镜像
    Docker 入门 之基本命令
    Windows.form增删改查
    自定义控件
    LISTVIEW
    窗体布局
    计算器
    登录
  • 原文地址:https://www.cnblogs.com/diydyq/p/4409206.html
Copyright © 2011-2022 走看看