模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露它的接口。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。

• <script>标签

  • 全局作用域下容易造成变量冲突
  • 文件只能按照<script>的书写顺序进行加载
  • 开发人员必须主观解决模块和代码库的依赖关系
  • 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

• CommonJS

  • 定义的模块分为: 模块引用(require) / 模块输出(exports) / 模块标识(module)
  • 是更偏向于服务器端的规范。NodeJS采用了这个规范。CommonJS的一个模块就是一个脚本文件。require命令第一次加载该脚本时就会执行整个脚本，然后在内存中生成一个对象。
  • CommonJS是同步加载模块，这对于服务器端不是一个问题，因为所有的模块都放在本地硬盘。等待模块时间就是硬盘读取文件时间，很小。但是，对于浏览器而言，它需要从服务器加载模块，涉及到网速，代理等原因，一旦等待时间过长，浏览器处于”假死”状态。所以在浏览器端，不适合于CommonJS规范。

    {
        id:'...',
        exports: { ... },
        loaded: true,
        ...
    }
    /* id是模块名，exports是该模块导出的接口，loaded表示模块是否加载完毕。
    此外还有很多属性，这里省略了。
    以后需要用到这个模块时，就会到exports属性上取值。
    即使再次执行require命令，也不会再次执行该模块，而是到缓存中取值。*/
    
    // 例：
    math.jsexports.add = function(a, b) {
        return a + b;
    }
    var math = require('math');
    math.add(2, 3);
    

• AMD (Asynchronous Module Definition) 异步模块定义

  • AMD是RequireJs在推广过程中对模块定义的规范化产出
  • 这里异步指的是不堵塞浏览器其他任务（dom构建，css渲染等），而加载内部是同步的（加载完模块后立即执行回调）。
  • 依赖前置

    /* AMD也采用require命令加载模块，但是不同于CommonJS，它要求两个参数：*/
    require([module], callback);
     /* 第一个参数[module]，是一个数组，里面的成员是要加载的模块，callback是加载完成后的回调函数。
    如果将上述的代码改成AMD方式：*/
        require(['math'], function(math) {
            math.add(2, 3);
        })
    //其中，回调函数中参数对应数组中的成员（模块）。
    //修改为define的写法：
    // math.js
    define(['dependenceModule'], function(dependenceModule)
      var add = function(x, y) {
        return x + y;
      }
      return  {
        add: add
      }
    })
    /* 当require()函数加载math模块的时候，就会先加载dependenceModule模块。
    当有多个依赖时，就将所有的依赖都写在define()函数第一个参数数组中。
    所以说AMD是依赖前置的。这不同于CMD规范，它是依赖就近的。*/
    

• CMD (Common Module Definition)

  • Seajs推崇的规范
  • 依赖就近，用的时候再require, 推崇 as lazy as possible（尽可能的懒加载，也称为延迟加载，即在需要的时候才加载）。

    // CMD
    define(function(require, exports, module) {
        var a = require('./a');
        a.doSomething();
        var b = require('./b');
        b.doSomething();
    })
    //AMD
    define(['a', 'b'], function(a, b) {
        a.doSomething();
        b.doSomething();
    })
    

  • CMD和AMD的区别
    • AMD和CMD都是用difine和require的异步加载
    • 但是CMD标准倾向于在使用过程中提出依赖，就是不管代码写到哪突然发现需要依赖另一个模块，那就在当前代码用require引入就可以了，规范会帮你搞定预加载
    • AMD标准让你必须提前在头部依赖参数部分写好（没有写好？ 倒回去写好咯）。

• ES6 模块

  • ES6 模块不是对象，无法引用模块本身。而是通过export命令显式指定输出的代码，再通过import命令输入。
  • ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高
  • 顶层的this指向undefined
  • 浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器。<script type="module" src="./foo.js"></script>

• import和require的区别

  • vue模块引入使用import，node模块引入使用require
  • require 是 AMD规范引入方式，import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法
  • 通过require引入基础数据类型时，属于复制该变量。通过require引入复杂数据类型时，数据浅拷贝该对象