模块化、CommonJS 规范和 ES6 模块规范以及简单手写 CommonJS 的 require

无模块化

简单的将所有的 js 文件统统放在一起，然后通过 <script> 标签引入。

优点：
- 相比于使用一个js文件，这种多个js文件实现最简单的模块化的思想是进步的。　
缺点：
- 污染全局作用域。因为每一个模块都是暴露在全局的，简单的使用，会导致全局变量命名冲突，当然，我们也可以使用命名空间的方式来解决。
- 对于大型项目，各种js很多，开发人员必须手动解决模块和代码库的依赖关系，后期维护成本较高。
- 依赖关系不明显，不利于维护。比如 main.js 需要使用 jquery，但是，从上面的文件中，我们是看不出来的，如果 jquery 忘记了，那么就会报错。

  <!-- 页面内嵌的脚本 -->
  <script type="application/javascript">
  // module code
  </script>

  <!-- 外部脚本 -->
  <script type="application/javascript" src="path/to/myModule.js">
  </script>

上面代码中，由于浏览器脚本的默认语言是 JavaScript，因此 type="application/javascript" 可以省略。

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到 <script> 标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。
浏览器允许脚本异步加载，下面就是两种异步加载的语法。

    <script src="path/to/myModule.js" defer></script>
    <script src="path/to/myModule.js" async></script>

上面代码中，<script> 标签打开 defer 或 async 属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。

defer 与 async 的区别是：
- defer 要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行
- async 一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染
- 一句话，defer 是 “渲染完再执行”，async 是 “下载完就执行”
- 如果有多个 defer 脚本，会按照它们在页面出现的顺序加载，而多个 async 脚本是不能保证加载顺序的

CommonJS 规范

1. 概述

是一个 JavaScript 模块化的规范， Nodejs 环境所使用的模块系统就是基于 CommonJS 规范实现的，我们现在所说的 CommonJS 规范也大多是指 Node 的模块系统，前端的 webpack 也是对 CommonJS 原生支持。
CommonJS 规范，每一个文件就是一个模块，其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量。
有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用 module.exports 定义当前模块对外输出的接口（不推荐直接用 exports ），用 require 加载模块。

    // example.js
    var x = 5;
    var addX = function (value) {
        return value + x;
    };

上面代码中，变量 x 和函数 addX，是当前文件 example.js 私有的，其他文件不可见。

如果想在多个文件分享变量，必须定义为 global 对象的属性。

    global.warning = true

上面代码的 warning 变量，可以被所有文件读取。当然，这样写法是不推荐的。

CommonJS 规范规定，每个模块内部，module 变量代表当前模块。这个变量是一个对象，它的 exports 属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的 module.exports 属性。

    // example.js
    var x = 5;
    var addX = function (value) {
        return value + x;
    };
    module.exports = {
        x: x,
        addX: addX
    };

上面代码通过 module.exports 输出变量 x 和函数 addX。

require 方法用于加载模块

    var example = require('./example.js');

    console.log(example.x); // 5
    console.log(example.addX(1)); // 6

CommonJS 规范特点
- 所有代码都运行在模块作用域，不会污染全局作用域
- CommonJS 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存
- CommonJS 模块加载的顺序，按照其在代码中出现的顺序
- 由于 Node.js 主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以 CommonJS 规范比较适用
优点：
- CommonJS 规范在服务器端率先完成了 JavaScript 的模块化，解决了依赖、全局变量污染的问题，这也是 js 运行在服务器端的必要条件。
缺点：
- 由于 CommonJS 是同步加载模块的，在服务器端，文件都是保存在硬盘上，所以同步加载没有问题，但是对于浏览器端，需要将文件从服务器端请求过来，那么同步加载就不适用了，所以，CommonJS 是不适用于浏览器端的。

2. module 对象

Node 内部提供一个 Module 构建函数。所有模块都是 Module 的实例。

  function Module(id, parent) {
    this.id = id;
    this.exports = {};
    this.parent = parent;
    // ...

每个模块内部，都有一个 module 对象，代表当前模块。它有以下属性。

  module.id 模块的识别符，通常是带有绝对路径的模块文件名。
  module.filename 模块的文件名，带有绝对路径。
  module.loaded 返回一个布尔值，表示模块是否已经完成加载。
  module.parent 返回一个对象，表示调用该模块的模块。
  module.children 返回一个数组，表示该模块要用到的其他模块。
  module.exports 表示模块对外输出的值。

如果在命令行下调用某个模块，比如 node something.js ，那么 module.parent 就是 null 。如果是在脚本之中调用，比如 require('./something.js') ，那么 module.parent 就是调用它的模块。利用这一点，可以判断当前模块是否为入口脚本。

  if (!module.parent) {
    // ran with `node something.js`
    app.listen(8088, function() {
      console.log('app listening on port 8088');
    });
  } else {
    // used with `require('/.something.js')`
    module.exports = app;
  }

module.exports 属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取 module.exports 变量。

  var EventEmitter = require('events').EventEmitter;
  module.exports = new EventEmitter();

  setTimeout(function() {
      module.exports.emit('ready');
  }, 1000);

上面模块会在加载后1秒后，发出 ready 事件。其他文件监听该事件，可以写成下面这样。

  var a = require('./a');
  a.on('ready', function() {
    console.log('module a is ready');
  });

3. exports 变量

为了方便，Node 为每个模块提供一个 exports 变量，指向 module.exports。这等同在每个模块头部，有一行这样的命令。

  var exports = module.exports;

造成的结果是，在对外输出模块接口时，可以向exports对象添加方法。

  exports.area = function (r) {
    return Math.PI * r * r;
  };

  exports.circumference = function (r) {
    return 2 * Math.PI * r;
  };

注意，不能直接将 exports 变量指向一个值，因为这样等于切断了 exports 与 module.exports 的联系。

  exports.hello = function() {
    return 'hello';
  };

  module.exports = 'Hello world';

上面代码中，hello 函数是无法对外输出的，因为 module.exports 被重新赋值了

这意味着，如果一个模块的对外接口，就是一个单一的值，不能使用 exports 输出，只能使用 module.exports 输出,如下。

  module.exports = function (x) { console.log(x); };

4. require 命令

4.1 基本用法

Node 使用 CommonJS 模块规范，内置的 require 命令用于加载模块文件

require 命令的基本功能是，读入并执行一个 JavaScript 文件，然后返回该模块的 exports 对象。如果没有发现指定模块，会报错。

  // example.js
  var invisible = function () {
    console.log("invisible");
  }

  exports.message = "hi";

  exports.say = function () {
    console.log(message);
  }

运行以下命令输出 exports 对象

  var example = require('./example.js');
  example
  // {
  //   message: "hi",
  //   say: [Function]
  // }

如果模块输出的是一个函数，那就不能定义在 exports 对象上面，而要定义在 module.exports 变量上面。

  module.exports = function () {
    console.log("hello world");
  };

  require('./example2.js')();

4.2 加载规则

require 命令用于加载文件，后缀名默认为 .js。

  var foo = require('foo');
  //  等同于
  var foo = require('foo.js');

根据参数的不同格式，require命令去不同路径寻找模块文件。
- （1）如果参数字符串以 / 开头，则表示加载的是一个位于绝对路径的模块文件。比如，require('/home/marco/foo.js') 将加载 /home/marco/foo.js。
- （2）如果参数字符串以 ./ 开头，则表示加载的是一个位于相对路径（跟当前执行脚本的位置相比）的模块文件。比如，require('./circle') 将加载当前脚本同一目录的 circle.js。
- （3）如果参数字符串不以 ./ 或 / 开头，则表示加载的是一个默认提供的核心模块（位于 Node 的系统安装目录中），或者一个位于各级 node_modules 目录的已安装模块（全局安装或局部安装）。
举例来说，脚本 /home/user/projects/foo.js 执行了 require('bar.js') 命令，Node 会依次搜索以下文件。
- （4）如果参数字符串不以 ./ 或 / 开头，而且是一个路径，比如 require('example-module/path/to/file')，则将先找到 example-module 的位置，然后再以它为参数，找到后续路径。
- （5）如果指定的模块文件没有发现，Node 会尝试为文件名添加 .js 、 .json 、 .node 后，再去搜索。 .js 件会以文本格式的 JavaScript 脚本文件解析， .json 文件会以 JSON 格式的文本文件解析， .node 文件会以编译后的二进制文件解析。
- （6）如果想得到 require 命令加载的确切文件名，使用 require.resolve() 方法。

  /usr/local/lib/node/bar.js
  /home/user/projects/node_modules/bar.js
  /home/user/node_modules/bar.js
  /home/node_modules/bar.js
  /node_modules/bar.js

这样设计的目的是，使得不同的模块可以将所依赖的模块本地化

4.3 目录的加载规则

通常，我们会把相关的文件会放在一个目录里面，便于组织。这时，最好为该目录设置一个入口文件，让 require 方法可以通过这个入口文件，加载整个目录。

在目录中放置一个 package.json 文件，并且将入口文件写入 main 字段。下面是一个例子。

  // package.json
  { 
    "name" : "some-library",
    "main" : "./lib/some-library.js"
  }

require 发现参数字符串指向一个目录以后，会自动查看该目录的 package.json 文件，然后加载 main 字段指定的入口文件。如果 package.json 文件没有 main 字段，或者根本就没有 package.json 文件，则会加载该目录下的 index.js 文件或 index.node 文件。

4.4 模块的缓存

第一次加载某个模块时，Node 会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的 module.exports 属性。
```
 require('./example.js');
 require('./example.js').message = "hello";
 require('./example.js').message
 // "hello"
```

上面代码中，连续三次使用 require 命令，加载同一个模块。第二次加载的时候，为输出的对象添加了一个 message 属性。但是第三次加载的时候，这个 message 属性依然存在，这就证明 require 命令并没有重新加载模块文件，而是输出了缓存。

如果想要多次执行某个模块，可以让该模块输出一个函数，然后每次 require 这个模块的时候，重新执行一下输出的函数。

所有缓存的模块保存在 require.cache 之中，如果想删除模块的缓存，可以像下面这样写。

  // 删除指定模块的缓存
  delete require.cache[moduleName];

  // 删除所有模块的缓存
  Object.keys(require.cache).forEach(function(key) {
    delete require.cache[key];
  });

注意，缓存是根据绝对路径识别模块的，如果同样的模块名，但是保存在不同的路径，require 命令还是会重新加载该模块。

5. 环境变量 NODE_PATH

Node 执行一个脚本时，会先查看环境变量 NODE_PATH。它是一组以冒号分隔的绝对路径。在其他位置找不到指定模块时，Node 会去这些路径查找。

可以将 NODE_PATH 添加到 .bashrc。

  export NODE_PATH="/usr/local/lib/node"

所以，如果遇到复杂的相对路径，比如下面这样。

  var myModule = require('../../../../lib/myModule');

有两种解决方法，一是将该文件加入 node_modules 目录，二是修改 NODE_PATH 环境变量，package.json 文件可以采用下面的写法。

  {
    "name": "node_path",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "start": "NODE_PATH=lib node index.js"
    },
    "author": "",
    "license": "ISC"
  }

NODE_PATH 是历史遗留下来的一个路径解决方案，通常不应该使用，而应该使用 node_modules 目录机制。

4.6 模块的循环加载

如果发生模块的循环加载，即A加载B，B又加载A，则B将加载A的不完整版本。

  // a.js
  exports.x = 'a1';
  console.log('a.js ', require('./b.js').x);
  exports.x = 'a2';

  // b.js
  exports.x = 'b1';
  console.log('b.js ', require('./a.js').x);
  exports.x = 'b2';

  // main.js
  console.log('main.js ', require('./a.js').x);
  console.log('main.js ', require('./b.js').x);

上面代码是三个 JavaScript 文件。其中，a.js 加载了 b.js，而 b.js 又加载 a.js。这时， Node 返回 a.js 的不完整版本，所以执行结果如下。

  $ node main.js
  b.js  a1
  a.js  b2
  main.js  a2
  main.js  b2

修改 main.js，再次加载 a.js 和 b.js。

    // main.js
    console.log('main.js ', require('./a.js').x);
    console.log('main.js ', require('./b.js').x);
    console.log('main.js ', require('./a.js').x);
    console.log('main.js ', require('./b.js').x);

执行上面代码

  $ node main.js
  b.js  a1
  a.js  b2
  main.js  a2
  main.js  b2
  main.js  a2
  main.js  b2

上面代码中，第二次加载 a.js 和 b.js 时，会直接从缓存读取 exports 属性，所以 a.js 和 b.js 内部的 console.log 语句都不会执行了。

4.7 require.main

require 方法有一个 main 属性，可以用来判断模块是直接执行，还是被调用执行。

直接执行的时候（node module.js），require.main 属性指向模块本身。

    require.main === module
    // true

调用执行的时候（通过 require 加载该脚本执行），上面的表达式返回 false 。

5. 模块的加载机制

CommonJS 模块输出的是一个值的拷贝，一旦输出一个值，模块内部的变化就影响不到这个值
CommonJS 模块是运行时加载，加载的是一个对象（即 module.exports 属性），该对象只有在脚本运行完才会生成

  // lib.js
  var counter = 3;
  function incCounter() {
    counter++;
  }
  module.exports = {
    counter: counter,
    incCounter: incCounter,
  };

上面代码输出内部变量 counter 和改写这个变量的内部方法 incCounter。然后，在 main.js 里面加载这个模块。

  // main.js
  var com = require('./lib')

  console.log(com.counter) // 3
  com.incCounter()
  console.log(com.counter) // 3

上面代码说明，lib.js 模块加载以后，它的内部变化就影响不到输出的 com.counter 了。这是因为 com.counter 是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。

  // lib.js
  var counter = 3;
  function incCounter() {
    counter++;
  }
  module.exports = {
    get counter() {
      return counter
    },
    incCounter: incCounter,
  };

上面代码中，输出的 counter 属性实际上是一个取值器函数。现在再执行 main.js ，就可以正确读取内部变量 counter 的变动了。

  $ node main.js
  3
  4

5.1 require 的内部处理流程

require 命令是 CommonJS 规范之中，用来加载其他模块的命令。它其实不是一个全局命令，而是指向当前模块的 module.require 命令，而后者又调用 Node 的内部命令 Module._load 。

  Module._load = function(request, parent, isMain) {
    // 1. 检查 Module._cache，是否缓存之中有指定模块
    // 2. 如果缓存之中没有，就创建一个新的Module实例
    // 3. 将它保存到缓存
    // 4. 使用 module.load() 加载指定的模块文件，
    //    读取文件内容之后，使用 module.compile() 执行文件代码
    // 5. 如果加载/解析过程报错，就从缓存删除该模块
    // 6. 返回该模块的 module.exports
  };

上面的第 4 步，采用 module.compile() 执行指定模块的脚本，逻辑如下。

  Module.prototype._compile = function(content, filename) {
    // 1. 生成一个require函数，指向module.require
    // 2. 加载其他辅助方法到require
    // 3. 将文件内容放到一个函数之中，该函数可调用 require
    // 4. 执行该函数
  };

上面的第 1 步和第 2 步， require 函数及其辅助方法主要如下。

  require(): 加载外部模块
  require.resolve()：将模块名解析到一个绝对路径
  require.main：指向主模块
  require.cache：指向所有缓存的模块
  require.extensions：根据文件的后缀名，调用不同的执行函数

一旦 require 函数准备完毕，整个所要加载的脚本内容，就被放到一个新的函数之中，这样可以避免污染全局环境。该函数的参数包括 require、module、exports ，以及其他一些参数。

  (function (exports, require, module, __filename, __dirname) {
    // YOUR CODE INJECTED HERE!
  });

Module._compile 方法是同步执行的，所以 Module._load 要等它执行完成，才会向用户返回 module.exports 的值

CommonJS 规范 require 方法简单实现

通过读取文件内容将内容包装到一个自执行函数中，默认返回 module.exports 做为函数的结果。

  const a = `function (exports, require, module, __filename, __dirname) {
      let a = 1;
      module.exports = 'hello';
      return module.exports;
  }(exports, require, module, xxxx, xxx)`;

  function Module(id) {
    this.id = id;
    // 代表的是模块的返回结果
    this.exports = {};
  }

  Module._cache = {};

  Module.wrapper = [
    `(function(exports, require, module, __filename, __dirname) {`,
    `})`
  ];

  Module._extensions = {
    '.js'(module) {
      let content = fs.readFileSync(module.id, 'utf8');
      content = Module.wrapper[0] + content + Module.wrapper[1];
      // 需要让函数字符串变成真正的函数
      let fn = vm.runInThisContext(content);
      let exports = module.exports; // {}
      let dirname = path.dirname(module.id);
      // 让包装的函数执行 require 时会让包装的函数执行，并且把this改变
      fn.call(exports, exports, req, module, module.id, dirname);
    },
    '.json'(module) {
      let content = fs.readFileSync(module.id, 'utf8');
      module.exports = JSON.parse(content);
    }
  };

  Module._resolveFilename = function (filename) {
    let absPath = path.resolve(__dirname, filename);
    // 查看路径是否存在 如果不存在 则增加 .js 或者 .json 后缀
    let isExists = fs.existsSync(absPath);
    if (isExists) {
      return absPath;
    } else {
      let keys = Object.keys(Module._extensions);
      for (let i = 0; i < keys.length; i++) {
        let newPath = absPath + keys[i];
        let flag = fs.existsSync(newPath);
        if (flag) {
          return newPath;
        }
      }
      throw new Error('module not exists');
    }
  };

  Module.prototype.load = function () {
    let extname = path.extname(this.id);
    // module.exports = 'hello'
    Module._extensions[extname](this);
  }

  function req(filename) { // 默认传入的文件名可能没有增加后缀，如果没有后缀我就尝试增加.js .json
    // 解析出绝对路径
    filename = Module._resolveFilename(filename);
    // 创建一个模块
    // 这里加载前先看一眼 是否加载过了
    let cacheModule = Module._cache[filename]; //  多次引用同一个模块只运行一次
    if (cacheModule) {
      return cacheModule.exports; // 返回缓存的结果即可
    }
    let module = new Module(filename);
    Module._cache[filename] = module
    // 加载模块
    module.load();
    return module.exports;
  };

ES6 加载规则

浏览器加载 ES6 模块，也使用 <script> 标签，但是要加入 type="module" 属性。

  <script type="module" src="./foo.js"></script>

上面代码在网页中插入一个模块 foo.js ，由于 type 属性设为 module ，所以浏览器知道这是一个 ES6 模块。
浏览器对于带有 type="module" 的 <script> ，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了 <script> 标签的 defer 属性。

    <script type="module" src="./foo.js"></script>
    <!-- 等同于 -->
    <script type="module" src="./foo.js" defer></script>

如果网页有多个 <script type="module"> ，它们会按照在页面出现的顺序依次执行。
<script> 标签的 async 属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染。

  <script type="module" src="./foo.js" async></script>

一旦使用了 async 属性，<script type="module"> 就不会按照在页面出现的顺序执行，而是只要该模块加载完成，就执行该模块。
ES6 模块也允许内嵌在网页中，语法行为与加载外部脚本完全一致。

  <script type="module">
    import utils from "./utils.js";
    // other code
  </script>

对于外部的模块脚本（上例是 foo.js ），有几点需要注意。

代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见。
模块脚本自动采用严格模式，不管有没有声明 use strict 。
模块之中，可以使用 import 命令加载其他模块（ .js 后缀不可省略，需要提供绝对 URL 或相对 URL），也可以使用 export 命令输出对外接口。
模块之中，顶层的 this 关键字返回 undefined ，而不是指向 window 。也就是说，在模块顶层使用 this 关键字，是无意义的。
同一个模块如果加载多次，将只执行一次。

示例

  import utils from 'https://example.com/js/utils.js';

  const x = 1;

  console.log(x === window.x); //false
  console.log(this === undefined); // true

利用顶层的 this 等于 undefined 这个语法点，可以侦测当前代码是否在 ES6 模块之中。

    const isNotModuleScript = this !== undefined;

ES6 模块与 CommonJS 模块的差异

ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的 import 有点像 Unix 系统的“符号连接”，原始值变了，import 加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

以之前 2-CommonJS 规范中的例子为例

  // lib.js
  export let counter = 3;
  export function incCounter() {
    counter++;
  }

  // main.js
  import { counter, incCounter } from './lib';
  console.log(counter); // 3
  incCounter();
  console.log(counter); // 4

再举一个例子

  // m1.js
  export var foo = 'bar';
  setTimeout(() => foo = 'baz', 500);

  // m2.js
  import {foo} from './m1.js';
  console.log(foo);
  setTimeout(() => console.log(foo), 500);

模块化、CommonJS 规范和 ES6 模块规范以及简单手写 CommonJS 的 require

无模块化

CommonJS 规范

1. 概述

2. module 对象

3. exports 变量

4. require 命令

4.1 基本用法

4.2 加载规则

4.3 目录的加载规则

4.4 模块的缓存

5. 环境变量 NODE_PATH

4.6 模块的循环加载

4.7 require.main

5. 模块的加载机制

5.1 require 的内部处理流程

CommonJS 规范 require 方法简单实现

ES6 加载规则

ES6 模块与 CommonJS 模块的差异

mahongqin

引用和评论

npm 超详细教程

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号