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

无模块化

简单的将所有的 js 文件统统放在一起，然后通过

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

• 默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到

  上面代码中，

  • 上面代码在网页中插入一个模块 foo.js ，由于 type 属性设为 module ，所以浏览器知道这是一个 ES6 模块。
  • 浏览器对于带有 type="module" 的
    • 如果网页有多个
      • 一旦使用了 async 属性，

        对于外部的模块脚本（上例是 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);