ES6學習?Module的加載實現(xiàn)

瀏覽器加載

傳統(tǒng)方法

HTML網頁中，瀏覽器通過<script>標簽加載JavaScript腳本。

<!-- 頁面內嵌的腳本 -->
<script type="application/javascript">
  // module code
</script>
<!-- 外部腳本 -->
<script type="application/javascript" src="path/to/myModule.js">
</script>

上面代碼中闪金，由于瀏覽器腳本的默認語言是JavaScript，因此type="application/javascript"可以省略。
默認情況下哎垦，瀏覽器是同步加載JavaScript腳本囱嫩，即渲染引擎遇到<script>標簽就會停下來，等到執(zhí)行完腳本漏设，再繼續(xù)向下渲染墨闲。如果是外部腳本，還必須加入腳本下載的時間郑口。
如果腳本體積很大鸳碧，下載和執(zhí)行的時間就會很長，因此造成瀏覽器堵塞犬性，用戶會感覺到瀏覽器“卡死”了瞻离，沒有任何響應。這顯然是很不好的體驗乒裆，所以瀏覽器允許腳本異步加載套利，下面就是兩種異步加載的語法。

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

上面代碼中鹤耍，<script>標簽打開defer或async屬性肉迫，腳本就會異步加載。渲染引擎遇到這一行命令稿黄，就會開始下載外部腳本喊衫，但不會等它下載和執(zhí)行，而是直接執(zhí)行后面的命令杆怕。
defer與async的區(qū)別是：defer要等到整個頁面在內存中正常渲染結束（DOM結構完全生成族购，以及其他腳本執(zhí)行完成），才會執(zhí)行陵珍；async一旦下載完联四，渲染引擎就會中斷渲染，執(zhí)行這個腳本以后撑教，再繼續(xù)渲染朝墩。一句話，defer是渲染完再執(zhí)行伟姐，async是下載完就執(zhí)行收苏。另外，如果有多個defer腳本愤兵，會按照它們在頁面出現(xiàn)的順序加載鹿霸，而多個async腳本是不能保證加載順序的。

加載規(guī)則

瀏覽器加載ES6模塊秆乳，也使用<script>標簽懦鼠，但是要加入type="module"屬性钻哩。

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

瀏覽器對于帶有type="module"的<script>，都是異步加載肛冶，不會造成堵塞瀏覽器街氢，即等到整個頁面渲染完，再執(zhí)行模塊腳本睦袖，等同于打開了<script>標簽的defer屬性珊肃。
如果網頁有多個<script type="module">，它們會按照在頁面出現(xiàn)的順序依次執(zhí)行馅笙。
<script>標簽的async屬性也可以打開伦乔，這時只要加載完成，渲染引擎就會中斷渲染立即執(zhí)行董习。執(zhí)行完成后烈和，再恢復渲染。

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

一旦使用了async屬性皿淋，<script type="module">就不會按照在頁面出現(xiàn)的順序執(zhí)行招刹，而是只要該模塊加載完成，就執(zhí)行該模塊沥匈。
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關鍵字，是無意義的蝠咆。
  • 同一個模塊如果加載多次踊东，將只執(zhí)行一次北滥。

下面是一個示例模塊。

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模塊完全不同。它們有兩個重大差異缎脾。

  • CommonJS模塊輸出的是一個值的拷貝祝闻，ES6模塊輸出的是值的引用
  • CommonJS模塊是運行時加載，ES6模塊是編譯時輸出接口

第二個差異是因為CommonJS加載的是一個對象（即module.exports屬性）遗菠，該對象只有在腳本運行完才會生成联喘。而ES6模塊不是對象，它的對外接口只是一種靜態(tài)定義辙纬，在代碼靜態(tài)解析階段就會生成豁遭。
CommonJS模塊輸出的是值的拷貝，也就是說贺拣，一旦輸出一個值蓖谢，模塊內部的變化就影響不到這個值。

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};
// main.js
var mod = require('./lib');
console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3

上面代碼說明譬涡，lib.js模塊加載以后闪幽，它的內部變化就影響不到輸出的mod.counter了。這是因為mod.counter是一個原始類型的值涡匀，會被緩存盯腌。除非寫成一個函數(shù)，才能得到內部變動后的值陨瘩。

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

上面代碼中腕够，輸出的counter屬性實際上是一個取值器函數(shù)。現(xiàn)在再執(zhí)行main.js舌劳，就可以正確讀取內部變量counter的變動了帚湘。

$ node main.js
3
4

ES6模塊的運行機制與CommonJS不一樣。JS引擎對腳本靜態(tài)分析的時候甚淡，遇到模塊加載命令import大诸，就會生成一個只讀引用。等到腳本真正執(zhí)行時贯卦，再根據(jù)這個只讀引用资柔，到被加載的那個模塊里面去取值。
因此脸侥，ES6模塊是動態(tài)引用建邓，并且不會緩存值，模塊里面的變量綁定其所在的模塊睁枕。

// 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);

上面代碼中沸手，m1.js的變量foo，在剛加載時等于bar注簿，過了500毫秒契吉，又變?yōu)榈扔?code>baz。
運行結果：

$ babel-node m2.js
bar
baz

上面代碼表明诡渴，ES6模塊不會緩存運行結果捐晶，而是動態(tài)地去被加載的模塊取值，并且變量總是綁定其所在的模塊妄辩。
由于ES6輸入的模塊變量惑灵，只是一個“符號連接”，所以這個變量是只讀的眼耀，對它進行重新賦值會報錯英支。

// lib.js
export let obj = {};
// main.js
import { obj } from './lib';
obj.prop = 123; // OK
obj = {}; // TypeError

最后，export通過接口哮伟，輸出的是同一個值干花。不同的腳本加載這個接口，得到的都是同樣的實例楞黄。

// mod.js
function C() {
  this.sum = 0;
  this.add = function () {
    this.sum += 1;
  };
  this.show = function () {
    console.log(this.sum);
  };
}
export let c = new C();

上面的腳本mod.js池凄，輸出的是一個C的實例。不同的腳本加載這個模塊鬼廓，得到的都是同一個實例肿仑。

// x.js
import {c} from './mod';
c.add();
// y.js
import {c} from './mod';
c.show();
// main.js
import './x';
import './y';

現(xiàn)在執(zhí)行main.js，輸出的是1桑阶。

$ babel-node main.js
1

這就證明了x.js和y.js加載的都是c的同一個實例柏副。

Node加載

概述

Node對ES6模塊的處理比較麻煩勾邦，因為它有自己的CommonJS模塊格式蚣录，與ES6模塊格式是不兼容的。目前的解決方案是眷篇，將兩者分開萎河，ES6模塊和CommonJS采用各自的加載方案。
Node要求ES6模塊采用.mjs后綴文件名蕉饼。也就是說虐杯，只要腳本文件里面使用import或者export命令，那么就必須采用.mjs后綴名昧港。require命令不能加載.mjs文件擎椰，會報錯，只有import命令才可以加載.mjs文件创肥。反過來达舒，.mjs文件里面也不能使用require命令值朋，必須使用import。
目前巩搏，這項功能還在試驗階段昨登。安裝Node v8.5.0或以上版本，要用--experimental-modules參數(shù)才能打開該功能贯底。

$ node --experimental-modules my-app.mjs

為了與瀏覽器的import加載規(guī)則相同丰辣，Node的.mjs文件支持URL路徑。

import './foo?query=1'; // 加載 ./foo 傳入?yún)?shù) ?query=1

上面代碼中禽捆，腳本路徑帶有參數(shù)?query=1笙什，Node會按URL規(guī)則解讀。同一個腳本只要參數(shù)不同胚想，就會被加載多次得湘，并且保存成不同的緩存。由于這個原因顿仇，只要文件名中含有:淘正、%、#臼闻、?等特殊字符鸿吆，最好對這些字符進行轉義。
目前述呐，Node的import命令只支持加載本地模塊（file:協(xié)議）惩淳，不支持加載遠程模塊。
如果模塊名不含路徑乓搬，那么import命令會去node_modules目錄尋找這個模塊思犁。

import 'baz';
import 'abc/123';

如果模塊名包含路徑，那么import命令會按照路徑去尋找這個名字的腳本文件进肯。

import 'file:///etc/config/app.json';
import './foo';
import './foo?search';
import '../bar';
import '/baz';

如果腳本文件省略了后綴名激蹲，比如import './foo'，Node會依次嘗試四個后綴名：./foo.mjs江掩、./foo.js学辱、./foo.json、./foo.node环形。如果這些腳本文件都不存在策泣，Node就會去加載./foo/package.json的main字段指定的腳本。如果./foo/package.json不存在或者沒有main字段抬吟，那么就會依次加載./foo/index.mjs萨咕、./foo/index.js、./foo/index.json火本、./foo/index.node危队。如果以上四個文件還是都不存在蓄喇，就會拋出錯誤。
最后交掏，Node的import命令是異步加載妆偏，這一點與瀏覽器的處理方法相同。

內部變量

ES6模塊應該是通用的盅弛，同一個模塊不用修改钱骂，就可以用在瀏覽器環(huán)境和服務器環(huán)境。為了達到這個目標挪鹏，Node規(guī)定ES6模塊之中不能使用CommonJS模塊的特有的一些內部變量见秽。
首先，就是this關鍵字讨盒。ES6模塊之中解取，頂層的this指向undefined；CommonJS模塊的頂層this指向當前模塊返顺，這是兩者的一個重大差異禀苦。
其次，以下這些頂層變量在ES6模塊之中都是不存在的遂鹊。

arguments
require
module
exports
__filename
__dirname

如果你一定要使用這些變量振乏，有一個變通方法，就是寫一個CommonJS模塊輸出這些變量秉扑，然后再用 ES6模塊加載這個CommonJS模塊慧邮。但是這樣一來，該ES6模塊就不能直接用于瀏覽器環(huán)境了舟陆，所以不推薦這樣做误澳。

// expose.js
module.exports = {__dirname};
// use.mjs
import expose from './expose.js';
const {__dirname} = expose;

上面代碼中，expose.js是一個CommonJS模塊秦躯，輸出變量__dirname忆谓，該變量在ES6模塊之中不存在。ES6模塊加載expose.js宦赠，就可以得到__dirname陪毡。

ES6模塊加載CommonJS模塊

CommonJS模塊的輸出都定義在module.exports這個屬性上面米母。Node的import命令加載CommonJS模塊勾扭，Node會自動將module.exports屬性，當作模塊的默認輸出铁瞒，即等同于export default xxx妙色。
下面是一個CommonJS模塊。

// a.js
module.exports = {
  foo: 'hello',
  bar: 'world'
};
// 等同于
export default {
  foo: 'hello',
  bar: 'world'
};

import命令加載上面的模塊慧耍，module.exports會被視為默認輸出身辨，即import命令實際上輸入的是這樣一個對象{ default: module.exports }丐谋。
所以，一共有三種寫法煌珊，可以拿到CommonJS模塊的module.exports号俐。

// 寫法一
import baz from './a';
// baz = {foo: 'hello', bar: 'world'};
// 寫法二
import {default as baz} from './a';
// baz = {foo: 'hello', bar: 'world'};
// 寫法三
import * as baz from './a';
// baz = {
//   get default() {return module.exports;},
//   get foo() {return this.default.foo}.bind(baz),
//   get bar() {return this.default.bar}.bind(baz)
// }

上面代碼的第三種寫法，可以通過baz.default拿到module.exports定庵。foo屬性和bar屬性就是可以通過這種方法拿到了module.exports吏饿。
下面是一些例子。

// b.js
module.exports = null;
// es.js
import foo from './b';
// foo = null;
import * as bar from './b';
// bar = { default:null };

上面代碼中蔬浙，es.js采用第二種寫法時猪落，要通過bar.default這樣的寫法，才能拿到module.exports畴博。

// c.js
module.exports = function two() {
  return 2;
};
// es.js
import foo from './c';
foo(); // 2
import * as bar from './c';
bar.default(); // 2
bar(); // throws, bar is not a function

上面代碼中笨忌，bar本身是一個對象，不能當作函數(shù)調用俱病，只能通過bar.default調用官疲。
CommonJS模塊的輸出緩存機制，在ES6加載方式下依然有效亮隙。

// foo.js
module.exports = 123;
setTimeout(_ => module.exports = null);

上面代碼中袁余，對于加載foo.js的腳本，module.exports將一直是123咱揍，而不會變成null颖榜。
由于ES6模塊是編譯時確定輸出接口，CommonJS模塊是運行時確定輸出接口煤裙，所以采用import命令加載CommonJS模塊時掩完，不允許采用下面的寫法。

// 不正確
import { readFile } from 'fs';

上面的寫法不正確硼砰，因為fs是CommonJS格式且蓬，只有在運行時才能確定readFile接口，而import命令要求編譯時就確定這個接口题翰。解決方法就是改為整體輸入恶阴。

// 正確的寫法一
import * as express from 'express';
const app = express.default();
// 正確的寫法二
import express from 'express';
const app = express();

CommonJS模塊加載ES6模塊

CommonJS模塊加載ES6模塊，不能使用require命令豹障，而要使用import()函數(shù)冯事。ES6模塊的所有輸出接口，會成為輸入對象的屬性血公。

// es.mjs
let foo = { bar: 'my-default' };
export default foo;
// cjs.js
const es_namespace = await import('./es.mjs');
// es_namespace = {
//   get default() {
//     ...
//   }
// }
console.log(es_namespace.default);
// { bar:'my-default' }

上面代碼中昵仅，default接口變成了es_namespace.default屬性。
下面是另一個例子。

// es.js
export let foo = { bar:'my-default' };
export { foo as bar };
export function f() {};
export class c {};
// cjs.js
const es_namespace = await import('./es');
// es_namespace = {
//   get foo() {return foo;}
//   get bar() {return foo;}
//   get f() {return f;}
//   get c() {return c;}
// }

循環(huán)加載

循環(huán)加載指的是摔笤，a腳本的執(zhí)行依賴b腳本够滑，而b腳本的執(zhí)行又依賴a腳本。

// a.js
var b = require('b');
// b.js
var a = require('a');

通常吕世，循環(huán)加載表示存在強耦合彰触，如果處理不好，還可能導致遞歸加載命辖，使得程序無法執(zhí)行渴析，因此應該避免出現(xiàn)。
目前最常見的兩種模塊格式CommonJS和ES6吮龄，處理“循環(huán)加載”的方法是不一樣的俭茧，返回的結果也不一樣慕爬。

CommonJS模塊的加載原理

CommonJS的一個模塊别洪，就是一個腳本文件。require命令第一次加載該腳本笋妥，就會執(zhí)行整個腳本尝抖，然后在內存生成一個對象毡们。

{
  id: '...',
  exports: { ... },
  loaded: true,
  ...
}

上面代碼就是Node內部加載模塊后生成的一個對象。該對象的id屬性是模塊名昧辽，exports屬性是模塊輸出的各個接口衙熔，loaded屬性是一個布爾值，表示該模塊的腳本是否執(zhí)行完畢搅荞。其他還有很多屬性红氯，這里都省略了。
以后需要用到這個模塊的時候咕痛，就會到exports屬性上面取值痢甘。即使再次執(zhí)行require命令，也不會再次執(zhí)行該模塊茉贡，而是到緩存之中取值塞栅。也就是說，CommonJS模塊無論加載多少次腔丧，都只會在第一次加載時運行一次放椰，以后再加載，就返回第一次運行的結果愉粤，除非手動清除系統(tǒng)緩存砾医。

CommonJS模塊的循環(huán)加載

CommonJS模塊的重要特性是加載時執(zhí)行，即腳本代碼在require的時候科汗，就會全部執(zhí)行藻烤。一旦出現(xiàn)某個模塊被"循環(huán)加載"，就只輸出已經執(zhí)行的部分头滔，還未執(zhí)行的部分不會輸出怖亭。

// a.js
exports.done = false;
var b = require('./b.js');
console.log('在 a.js 之中，b.done = %j', b.done);
exports.done = true;
console.log('a.js 執(zhí)行完畢');

上面代碼之中坤检，a.js腳本先輸出一個done變量兴猩，然后加載另一個腳本文件b.js。注意早歇，此時a.js代碼就停在這里倾芝，等待b.js執(zhí)行完畢，再往下執(zhí)行箭跳。

// b.js
exports.done = false;
var a = require('./a.js');
console.log('在 b.js 之中晨另，a.done = %j', a.done);
exports.done = true;
console.log('b.js 執(zhí)行完畢');

上面代碼之中，b.js執(zhí)行到第二行谱姓，就會去加載a.js借尿，這時，就發(fā)生了“循環(huán)加載”屉来。系統(tǒng)會去a.js模塊對應對象的exports屬性取值路翻，可是因為a.js還沒有執(zhí)行完，從exports屬性只能取回已經執(zhí)行的部分茄靠，而不是最后的值茂契。
a.js已經執(zhí)行的部分，只有一行慨绳。

exports.done = false;

因此掉冶，對于b.js來說，它從a.js只輸入一個變量done脐雪，值為false郭蕉。
然后，b.js接著往下執(zhí)行喂江，等到全部執(zhí)行完畢召锈，再把執(zhí)行權交還給a.js。于是获询，a.js接著往下執(zhí)行涨岁，直到執(zhí)行完畢。我們寫一個腳本main.js吉嚣，驗證這個過程梢薪。

var a = require('./a.js');
var b = require('./b.js');
console.log('在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done);

執(zhí)行main.js，運行結果如下尝哆。

$ node main.js

在 b.js 之中秉撇，a.done = false
b.js 執(zhí)行完畢
在 a.js 之中，b.done = true
a.js 執(zhí)行完畢
在 main.js 之中, a.done=true, b.done=true

上面的代碼證明了兩件事。一是琐馆，在b.js之中规阀，a.js沒有執(zhí)行完畢，只執(zhí)行了第一行瘦麸。二是谁撼，main.js執(zhí)行到第二行時，不會再次執(zhí)行b.js滋饲，而是輸出緩存的b.js的執(zhí)行結果厉碟，即它的第四行。

exports.done = true;

總之屠缭，CommonJS輸入的是被輸出值的拷貝箍鼓，不是引用。
另外呵曹，由于CommonJS模塊遇到循環(huán)加載時款咖，返回的是當前已經執(zhí)行的部分的值，而不是代碼全部執(zhí)行后的值逢并，兩者可能會有差異之剧。所以，輸入變量的時候砍聊，必須非常小心背稼。

var a = require('a'); // 安全的寫法
var foo = require('a').foo; // 危險的寫法
exports.good = function (arg) {
  return a.foo('good', arg); // 使用的是 a.foo 的最新值
};
exports.bad = function (arg) {
  return foo('bad', arg); // 使用的是一個部分加載時的值
};

上面代碼中，如果發(fā)生循環(huán)加載玻蝌，require('a').foo的值很可能后面會被改寫蟹肘，改用require('a')會更保險一點。

ES6模塊的循環(huán)加載

ES6處理循環(huán)加載與CommonJS有本質的不同俯树。ES6模塊是動態(tài)引用帘腹，如果使用import從一個模塊加載變量（即import foo from 'foo'），那些變量不會被緩存许饿，而是成為一個指向被加載模塊的引用阳欲，需要開發(fā)者自己保證，真正取值的時候能夠取到值陋率。

// a.mjs
import {bar} from './b';
console.log('a.mjs');
console.log(bar);
export let foo = 'foo';
// b.mjs
import {foo} from './a';
console.log('b.mjs');
console.log(foo);
export let bar = 'bar';

上面代碼中球化，a.mjs加載b.mjs，b.mjs又加載a.mjs瓦糟，構成循環(huán)加載筒愚。執(zhí)行a.mjs，結果如下菩浙。

$ node --experimental-modules a.mjs
b.mjs
ReferenceError: foo is not defined

上面代碼中巢掺，執(zhí)行a.mjs以后會報錯句伶，foo變量未定義，這是為什么陆淀？
讓我們一行行來看考余，ES6循環(huán)加載是怎么處理的。首先倔约，執(zhí)行a.mjs以后秃殉，引擎發(fā)現(xiàn)它加載了b.mjs坝初，因此會優(yōu)先執(zhí)行b.mjs浸剩，然后再執(zhí)行a.mjs。接著鳄袍，執(zhí)行b.mjs的時候绢要，已知它從a.mjs輸入了foo接口，這時不會去執(zhí)行a.mjs拗小，而是認為這個接口已經存在了重罪，繼續(xù)往下執(zhí)行。執(zhí)行到第三行console.log(foo)的時候哀九，才發(fā)現(xiàn)這個接口根本沒定義剿配，因此報錯。
解決這個問題的方法阅束，就是讓b.mjs運行的時候呼胚，foo已經有定義了。這可以通過將foo寫成函數(shù)來解決息裸。

// a.mjs
import {bar} from './b';
console.log('a.mjs');
console.log(bar());
function foo() { return 'foo' }
export {foo};
// b.mjs
import {foo} from './a';
console.log('b.mjs');
console.log(foo());
function bar() { return 'bar' }
export {bar};

這時再執(zhí)行a.mjs就可以得到預期結果蝇更。

$ node --experimental-modules a.mjs
b.mjs
foo
a.mjs
bar

這是因為函數(shù)具有提升作用，在執(zhí)行import {bar} from './b'時呼盆，函數(shù)foo就已經有定義了年扩，所以b.mjs加載的時候不會報錯。這也意味著访圃，如果把函數(shù)foo改寫成函數(shù)表達式厨幻，也會報錯。

// a.mjs
import {bar} from './b';
console.log('a.mjs');
console.log(bar());
const foo = () => 'foo';
export {foo};

上面代碼的第四行腿时，改成了函數(shù)表達式况脆，就不具有提升作用，執(zhí)行就會報錯圈匆。
我們再來看ES6模塊加載器SystemJS給出的一個例子漠另。

// even.js
import { odd } from './odd'
export var counter = 0;
export function even(n) {
  counter++;
  return n === 0 || odd(n - 1);
}
// odd.js
import { even } from './even';
export function odd(n) {
  return n !== 0 && even(n - 1);
}

上面代碼中，even.js里面的函數(shù)even有一個參數(shù)n跃赚，只要不等于0笆搓，就會減去1性湿，傳入加載的odd()。odd.js也會做類似操作满败。
運行上面這段代碼肤频，結果如下。

$ babel-node
> import * as m from './even.js';
> m.even(10);
true
> m.counter
6
> m.even(20)
true
> m.counter
17

上面代碼中算墨，參數(shù)n從10變?yōu)?的過程中宵荒，even()一共會執(zhí)行6次，所以變量counter等于6净嘀。第二次調用even()時报咳，參數(shù)n從20變?yōu)?，even()一共會執(zhí)行11次挖藏，加上前面的6次暑刃，所以變量counter等于17。
這個例子要是改寫成CommonJS膜眠，就根本無法執(zhí)行岩臣，會報錯。

// even.js
var odd = require('./odd');
var counter = 0;
exports.counter = counter;
exports.even = function (n) {
  counter++;
  return n == 0 || odd(n - 1);
}
// odd.js
var even = require('./even').even;
module.exports = function (n) {
  return n != 0 && even(n - 1);
}

上面代碼中宵膨，even.js加載odd.js架谎，而odd.js又去加載even.js，形成“循環(huán)加載”辟躏。這時谷扣，執(zhí)行引擎就會輸出even.js已經執(zhí)行的部分（不存在任何結果），所以在odd.js之中鸿脓，變量even等于undefined抑钟，等到后面調用even(n-1)就會報錯。

$ node
> var m = require('./even');
> m.even(10)
TypeError: even is not a function
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末野哭，一起剝皮案震驚了整個濱河市在塔，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌拨黔，老刑警劉巖蛔溃，帶你破解...
    沈念sama閱讀 211,496評論 6贊 491
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異篱蝇，居然都是意外死亡贺待，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門零截，熙熙樓的掌柜王于貴愁眉苦臉地迎上來麸塞，“玉大人，你說我怎么就攤上這事涧衙∧墓ぃ” “怎么了奥此？”我有些...
    開封第一講書人閱讀 157,091評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長雁比。 經常有香客問我稚虎，道長，這世上最難降的妖魔是什么偎捎？ 我笑而不...
    開封第一講書人閱讀 56,458評論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任蠢终，我火速辦了婚禮，結果婚禮上茴她，老公的妹妹穿的比我還像新娘寻拂。我一直安慰自己，他們只是感情好败京，可當我...
    茶點故事閱讀 65,542評論 6贊 385
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布兜喻。 她就那樣靜靜地躺著梦染，像睡著了一般赡麦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上帕识，一...
    開封第一講書人閱讀 49,802評論 1贊 290
  • 城市分裂傳說
    那天泛粹，我揣著相機與錄音，去河邊找鬼肮疗。 笑死晶姊，一個胖子當著我的面吹牛，可吹牛的內容都是我干的伪货。 我是一名探鬼主播们衙，決...
    沈念sama閱讀 38,945評論 3贊 407
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼碱呼！你這毒婦竟也來了蒙挑？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 37,709評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤愚臀，失蹤者是張志新（化名）和其女友劉穎忆蚀，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體姑裂，經...
    沈念sama閱讀 44,158評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡馋袜，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,502評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了舶斧。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片欣鳖。...
    茶點故事閱讀 38,637評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖茴厉，靈堂內的尸體忽然破棺而出泽台，到底是詐尸還是另有隱情让网，我是刑警寧澤，帶...
    沈念sama閱讀 34,300評論 4贊 329
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布师痕，位于F島的核電站溃睹，受9級特大地震影響，放射性物質發(fā)生泄漏胰坟。R本人自食惡果不足惜因篇，卻給世界環(huán)境...
    茶點故事閱讀 39,911評論 3贊 313
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望笔横。 院中可真熱鬧竞滓，春花似錦、人聲如沸吹缔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,744評論 0贊 21
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽厢塘。三九已至茶没，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間晚碾，已是汗流浹背抓半。 一陣腳步聲響...
    開封第一講書人閱讀 31,982評論 1贊 266
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留格嘁，地道東北人笛求。 一個月前我還...
    沈念sama閱讀 46,344評論 2贊 360
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像糕簿，于是被迫代替她去往敵國和親探入。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 43,500評論 2贊 348