zoukankan      html  css  js  c++  java
  • AMD、CMD、CommonJS、UMD、ESM( JS模块化规范)

    随着前端发展的不断进步,JavaScript的模块化不仅在NodeJS中应用,也被拿到了浏览器上得到应用,所以出现了一些模块化的规范

    AMD(Asynchromous Module Definition - 异步模块定义)

    AMD是RequireJS在推广过程中对模块定义的规范化产出,AMD是异步加载模块,推崇依赖前置。

    define('module1', ['jquery'], ($) => {
      //do something...
    });
    

      

    代码中依赖被前置,当定义模块(module1)时,就会加载依赖(jquery)

    CMD(Common Module Definition - 公共模块定义)

    CMD是SeaJS在推广过程中对模块定义的规范化产出,对于模块的依赖,CMD是延迟执行,推崇依赖就近。

    define((require, exports, module) => {
      module.exports = {
        fun1: () => {
           var $ = require('jquery');
           return $('#test');
        } 
      };
    });
    

      

    如上代码,只有当真正执行到fun1方法时,才回去执行jquery。

    同时CMD也是延自CommonJS Modules/2.0规范

    CommonJS(cjs)

    提到CMD,就不得不提起CommonJS,CommonJS是服务端模块的规范,由于Node.js被广泛认知。

    根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的module.exports对象。

    //file1.js
    moudle.exports = {
      a: 1
    };
    
    //file2.js
    var f1 = require('./file1');
    var v = f1.a + 2;
    module.exports ={
      v: v
    };
    

      

    CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。但如果是浏览器环境,要从服务器加载模块,这是就必须采用异步模式。所以就有了 AMD CMD 解决方案。

    UMD(Universal Module Definition - 通用模块定义)

    UMD又是个什么玩意呢?UMD是AMD和CommonJS的一个糅合。AMD是浏览器优先,异步加载;CommonJS是服务器优先,同步加载。

    既然要通用,怎么办呢?那就先判断是否支持node.js的模块,存在就使用node.js;再判断是否支持AMD(define是否存在),存在则使用AMD的方式加载。这就是所谓的UMD。

    ((root, factory) => {
      if (typeof define === 'function' && define.amd) {
        //AMD
        define(['jquery'], factory);
      } else if (typeof exports === 'object') {
        //CommonJS
        var $ = requie('jquery');
        module.exports = factory($);
      } else {
        //都不是,浏览器全局定义
        root.testModule = factory(root.jQuery);
      }
    })(this, ($) => {
      //do something...  这里是真正的函数体
    });
    

      

     ESM(ECMA Script Modules)

    ESM是ES6中的模块化规范,在nodeJS新版本中可以直接使用,现在大部分浏览器也开始支持(在script标签上设置type="module"),

    ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

    // 写法一 
    export var m = 1;
    // 写法二 
    var m = 1; export { m };
    // 写法三 
    var n = 1; export { n as m };
    // 写法四 
    var n = 1; export default n;
    // 写法五 
    if (true) { import('./myModule.js').then(({ export1, export2 }) => { /* ... */ }); }
    // 写法六 
    Promise.all([import('./module1.js'),
    import('./module2.js'),
    import('./module3.js')]).then(([module1, module2, module3]) => { /* ... */ });
    

    Reference

  • 相关阅读:
    pg 基础操作
    mybatis+pg常见错误
    mybatis 需要注意事项
    java编程中的Dao,service,controller,View
    java 中的spring基础
    werkzeug(flask)中的local,localstack,localproxy探究
    gevent
    cookie和session
    关于redis数据库的简单思考
    对阻塞,非阻塞,同步,异步的深入理解
  • 原文地址:https://www.cnblogs.com/mingweiyard/p/13891510.html
Copyright © 2011-2022 走看看