模块化CMD,AMD,CommonJS,ESM

一ESM，

• 1,es6模块化import方式，使得编译时就能确定模块的依赖关系，所以不允许运行时改变。
• 2,静态导入方式import，
• 3,需要在type="module" 的 script 的标签中使用。script标签的nomodule是其hacker（）方式。

• 4,不是依赖type="module"的script标签。使用import()类似于函数的方式引入。动态引入、返回的是一个Promise

  import('./module.js').then(function (module) {
   console.log(module)
  })

• 5,书写方式

  • 1)通过指定需要导入模块的路径名，可以是绝对路径，也可以是相对路径， .js后缀可以省略。
    import j from './profile.js'
import j from './profile.js'
import j from './profile'

  • 2)只有模块名，不带有路径，需要有配置文件；告诉 JavaScript 引擎该模块的位置。（一般需要通过第三方库环境，才能使用。常用npm下载后，通过该方式引用，配置信息在package.json中main属性中）
    import $ from 'jquery'

    export,export default导出

    export default类似与node中的module.exports。

二，AMD规范,requireJs典型的库

• 基本思想就是先加载需要的模块，然后返回一个新的函数，所有的操作都在这个函数内部操作，之前加载的模块在这个函数里是可以调用的。

  /**
  * requirejs实现的方式
  * 因为 jQuery 中定义的是一个名为 jquery 的 AMD 模块
  * 所以使用时必须通过 'jquery' 这个名称获取这个模块
  * 但是 jQuery.js 并不在同级目录下，所以需要指定路径
  * 参数解析：
  * 第一个参数,表示了模块标识，为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在，那么模块标识必须为顶层的或者一个绝对的标识。
  * 第二个参数,是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。
  * 第三个参数,是一个需要进行实例化的函数或者一个对象。
  */
  define('module1', ['jquery', './module2'], function ($, module2) {
    return {
      start: function () {
        $('body').animate({ margin: '200px' })
        module2()
      }
    }
  })
  
  /**
  * requirejs方式载入一个模块
  */
  require(['./modules/module1'], function (module1) {
    module1.start()
  })

三，CMD规范，

• AMD推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行(两者都是模块的加载不影响它后面语句的运行。)

  /**
  * 兼容 CMD 规范,sea.js实现的方式
  */
  define(function (require, exports, module) {
      // 通过 require 引入依赖
      var $ = require('jquery')
      // 通过 exports 或者 module.exports 对外暴露成员
      module.exports = function () {
        console.log('module 2~')
        $('body').append('<p>module2</p>')
      }
  })
  
  /**
  * sea.js方式载入一个模块
  */
  require.config({
      paths: {
        // 因为 jQuery 中定义的是一个名为 jquery 的 AMD 模块
        // 所以使用时必须通过 'jquery' 这个名称获取这个模块
        // 但是 jQuery.js 并不一定在同级目录下，所以需要指定路径
        jquery: './lib/jquery'
      }
  })

四，服务端模块化commonJs规范

• commonjs规范,以同步的方式加载模块

  1. 一个文件就是一个模块
  2. 每个模块都有单独的作用域
  3. 通过module.exports导出成员
  4. 通require函数载入模块
  5. commonjs模块输入的是被输出值的拷贝，也就是说一旦输出一个值，模块内部的变化就影响不到这个值。

五，umd用于服务端和浏览器

• 原理：UMD的实现很简单，先判断是否支持NodeJS模块格式（exports是否存在），存在则使用NodeJS模块格式。再判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。前两个都不存在，则将模块公开的全局（window或global）；echarts地图数据文件就是这样的。

详解参考：https://segmentfault.com/a/11...