defer 和 async屬性

defer 會(huì)讓該標(biāo)簽引用的腳本在DOM完全解析之后，并且引用的其他腳本執(zhí)行完成之后，才會(huì)執(zhí)行；多個(gè)defer會(huì)按照在頁(yè)面上出現(xiàn)的順序依次執(zhí)行

async 類(lèi)似于異步回調(diào)函數(shù)，加載完成或，渲染引擎就會(huì)立即停下來(lái)去執(zhí)行該腳本，多個(gè)async腳本不能后保證執(zhí)行的順序

Node 的模塊系統(tǒng)就是參照著CommonJs規(guī)范所實(shí)現(xiàn)的

const path = require("path")
path.join(__dirname,path.sep)

path.join 必然是依賴(lài)于path模塊加載完成才能使用的，對(duì)于服務(wù)器來(lái)說(shuō)，因?yàn)樗械馁Y源都存放在本地，所以各種模塊各種模塊加載進(jìn)來(lái)之后再執(zhí)行先關(guān)邏輯對(duì)于速度的要求來(lái)說(shuō)并不會(huì)是那么明顯問(wèn)題。

特點(diǎn)：

一個(gè)文件就是一個(gè)模塊，擁有多帶帶的作用域；

普通方式定義的變量、函數(shù)、對(duì)象都屬于該模塊內(nèi)；

通過(guò)require來(lái)加載模塊；

通過(guò)exports和modul.exports來(lái)暴露模塊中的內(nèi)容；

模塊加載的順序，按照其在代碼中出現(xiàn)的順序。

模塊可以多次加載，但只會(huì)在第一次加載的時(shí)候運(yùn)行一次，然后運(yùn)行結(jié)果就被緩存了，以后再加載，就直接讀取緩存結(jié)果；模塊的加載順序，按照代碼的出現(xiàn)順序是同步加載的；

require（同步加載）基本功能：讀取并執(zhí)行一個(gè)JS文件，然后返回該模塊的exports對(duì)象，如果沒(méi)有發(fā)現(xiàn)指定模塊會(huì)報(bào)錯(cuò);

exports：node為每個(gè)模塊提供一個(gè)exports變量，其指向module.exports，相當(dāng)于在模塊頭部加了這句話：var exports = module.exports，在對(duì)外輸出時(shí)，可以給exports對(duì)象添加方法（exports.xxx等同于module.exports.xxx），不能直接賦值（因?yàn)檫@樣就切斷了exports和module.exports的聯(lián)系）;

module變量代表當(dāng)前模塊。這個(gè)變量是一個(gè)對(duì)象，它的exports屬性（即module.exports）是對(duì)外的接口。加載某個(gè)模塊，其實(shí)是加載該模塊的module.exports屬性。

module對(duì)象的屬性：

module.id模塊的識(shí)別符，通常是帶有絕對(duì)路徑的模塊文件名。

module.filename 模塊的文件名，帶有絕對(duì)路徑。

module.loaded 返回一個(gè)布爾值，表示模塊是否已經(jīng)完成加載。

module.parent 返回一個(gè)對(duì)象，表示調(diào)用該模塊的模塊。

module.children 返回一個(gè)數(shù)組，表示該模塊要用到的其他模塊。

module.exports 表示模塊對(duì)外輸出的值。

例子：

注意在這種方式下module.exports被重新賦值了，所以之前使用exports導(dǎo)出的hello不再有效(模塊頭部var exports = module.exports)

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

module.exports = "Hello world";/

因此一旦module.exports被賦值了，表明這個(gè)模塊具有單一出口了

Asynchronous Module Definition異步加載某模塊的規(guī)范。試想如果在瀏覽器中（資源不再本地）采用commonjs這種完全依賴(lài)于先加載再試用方法，那么如果一個(gè)模塊特別大，網(wǎng)速特別慢的情況下就會(huì)出現(xiàn)頁(yè)面卡頓的情況。便有了異步加載模塊的AMD規(guī)范。require.js便是基于此規(guī)范

require(["module1","module2"....], callback);
reqire([jquery],function(jquery){
   //do something
})


//定義模塊
define(id, [depends], callback); 
//id是模塊名,可選的依賴(lài)別的模塊的數(shù)組，callback是用于return出一個(gè)給別的模塊用的函數(shù)

熟悉的回調(diào)函數(shù)形式。

Node 對(duì)于模塊的實(shí)現(xiàn)以commonjs為基礎(chǔ)的同時(shí)也增加了許多自身的特性

Node模塊的引入的三個(gè)步驟

路徑分析

文件定位

在require參數(shù)中如果不寫(xiě)后綴名，node會(huì)按照.js,.node,.json的順序依次補(bǔ)足并try

此過(guò)程會(huì)調(diào)用fs模塊同步阻塞式的判斷文件是否存在，因此非js文件最后加上后綴

編譯執(zhí)行

.js 文件會(huì)被解析為 JavaScript 文本文件，.json 文件會(huì)被解析為 JSON 文本文件。 .node 文件會(huì)被解析為通過(guò) dlopen 加載的編譯后的插件模塊.

Node的模塊分類(lèi)

核心模塊 Node本身提供的模塊，比如path,buffer,http等，在Node編譯過(guò)程中就加載進(jìn)內(nèi)存，因此會(huì)省掉文件定位和編譯執(zhí)行兩個(gè)文件加載步驟

文件模塊 開(kāi)發(fā)人員自己寫(xiě)的模塊，會(huì)經(jīng)歷完整的模塊引入步驟

Node也會(huì)優(yōu)先從緩存中加載引入過(guò)的文件模塊，在Node中第一次加載某一個(gè)模塊的時(shí)候，Node就會(huì)緩存下該模塊，之后再加載模塊就會(huì)直接從緩存中取了。這個(gè)“潛規(guī)則”核心模塊和文件模塊都會(huì)有。

require("./test.js").message="hello"
console.log(require.cache);
console.log(require("./test.js").message)//hello

上述代碼說(shuō)明第二次加載依舊使用了第一次加載進(jìn)來(lái)之后的模塊并沒(méi)有重新加載而是讀取了緩存中的模塊，因?yàn)橹匦录虞d的某塊中并沒(méi)有message。打印出來(lái)的require.cache包含了本模塊的module信息和加載進(jìn)來(lái)的模塊信息。

那么如果你想要多次執(zhí)行某一個(gè)模塊，要么你手動(dòng)像下面這樣刪除該模塊的緩存記錄之后再重新加載使用，要么應(yīng)該在模塊中暴露一個(gè)工廠函數(shù)，然后調(diào)用那個(gè)函數(shù)多次執(zhí)行該模塊，與vue-ssr的創(chuàng)建應(yīng)用實(shí)例的工廠函數(shù)意思相近。

require("./test.js").message="hello"
delete require.cache["/absolute-path/test.js"]
console.log(require("./test.js").message)//undifined

可見(jiàn)當(dāng)刪除了相關(guān)模塊的緩存,再一次加載時(shí)則不再有message了。

// Vue-ssr工廠函數(shù)，目的是為每個(gè)請(qǐng)求創(chuàng)立一個(gè)新的應(yīng)用實(shí)例
const Vue = require("vue")
module.exports = function createApp (context) {
  return new Vue({
    data: {
      url: context.url
    },
    template: `
訪問(wèn)的 URL 是： {{ url }}
`
  })
}

模塊包裝器

Node在加載模塊之后，執(zhí)行之前則會(huì)使用函數(shù)包裝器將模塊代碼包裝，從而實(shí)現(xiàn)將頂層變量（var,let,const）作用域限制在模塊范圍內(nèi)，提供每一個(gè)特定在該模塊的頂層全局變量module,exports,__dirname(所在文件夾的絕對(duì)路徑),__filename（絕對(duì)路徑加上文件名）

(function(exports, require, module, __filename, __dirname) {
// 模塊的代碼實(shí)際上在這里
});

關(guān)于模塊的具體編譯執(zhí)行過(guò)程，這次就不深入討論了，足夠花心思在好好重新深入總結(jié)重寫(xiě)一篇了，順便再次安利樸靈大大的《深入淺出nodejs》

終于，ES6在語(yǔ)言層面上提供了JS一直都沒(méi)有的模塊功能，使得在繼Commonjs之于服務(wù)端，AMD之于瀏覽器之外提供了一個(gè)通用的解決方案。

1.設(shè)計(jì)思想

盡量靜態(tài)化（靜態(tài)加載），使得編譯時(shí)就能確定模塊間的依賴(lài)關(guān)系以及輸入輸出的變量。

2.關(guān)鍵語(yǔ)法

export

export可以輸出變量：export var a = 1

輸出函數(shù)：`export function sum(x, y) {

return x + y;
};
`

輸出類(lèi)：export class A{}

結(jié)尾大括號(hào)寫(xiě)法：export {a , sum , A}

尤為注意的一點(diǎn)就是export所導(dǎo)出的接口一定要和模塊內(nèi)部的變量建立一一對(duì)應(yīng)的關(guān)系

對(duì)于一個(gè)模塊來(lái)說(shuō)，它就是一個(gè)默認(rèn)使用了嚴(yán)格模式的文件（"use strict"）,而別的文件要想使用該模塊，就必須要求該模塊內(nèi)有export主動(dòng)導(dǎo)出的內(nèi)容

例子：

export 1 //直接導(dǎo)出一個(gè)數(shù)字是不可以的

var a= 2
export a //間接導(dǎo)出數(shù)字也是不可以的！
export {a}//正確

export function(){} //錯(cuò)誤

function sum(){}
export sum //錯(cuò)誤
export {sum}//正確

export個(gè)人最為重要的一點(diǎn)就是可以取到模塊內(nèi)的實(shí)時(shí)的值

例子：

export var foo = "bar";
setTimeout(() => foo = "baz", 500);

引用該模塊的文件在定時(shí)器時(shí)間到的時(shí)候則會(huì)得到改變后的值

export default

實(shí)質(zhì)： 導(dǎo)出一個(gè)叫做default（默認(rèn)的）變量，本質(zhì)是將后面的值，賦給default變量，所以情況就和export 不同了

不同點(diǎn):

export 導(dǎo)出的變量，在import的時(shí)候必須要知道變量名，否則無(wú)法加載，export default就允許隨意取名直接加載，并且不用使用大括號(hào)；

export default 后面不能跟變量聲明語(yǔ)句

// 第一組
export default function crc32() {}
    
import crc32 from "crc32"; // 輸入
    
// 第二組
export function crc32() {};
    
import {crc32} from "crc32"; // 輸入


export var a = 1;// 正確


var a = 1;
export default a;// 正確


export default var a = 1;// 錯(cuò)誤

export default 每一個(gè)模塊只允許有一個(gè)

import

與導(dǎo)出export對(duì)應(yīng)，引用則是import

export {a,b}
    ||
    /
import { a as A ,b as B} from "./test.js";

主要特點(diǎn)：

使用import加載具有提升的效果，即會(huì)提到文件頭部進(jìn)行：

foo();

import { foo } from "my_module";

該代碼會(huì)正常執(zhí)行。

*加載默認(rèn)加載全部導(dǎo)出的變量

import * as A from "./a.js"

import 加載進(jìn)來(lái)的變量是不允許改變的。

type="module",此時(shí)瀏覽器就會(huì)知道這是ES6模塊，同時(shí)會(huì)自動(dòng)給他加上前文提到的defer屬性，即等到所有的渲染操作都執(zhí)行完成之后，才會(huì)執(zhí)行該模塊

由于Node有自己的模塊加載機(jī)制，所以在Node8.5以上版本將兩種方式的加載分開(kāi)來(lái)處理，對(duì)于加載ES6的模塊，node要求其后綴名得是.mjs,然后還得加上--experimental-modules參數(shù)，然后兩種機(jī)制還不能混用。確實(shí)還是很麻煩的，所以現(xiàn)在Node端想用import主流還是用babel轉(zhuǎn)義。

靜態(tài)加載VS運(yùn)行時(shí)加載

首先看下面一段代碼：

if (x > 2) {
  import A from "./a.js";
}else{
  import B from "./b.js";
}

這段代碼會(huì)報(bào)錯(cuò)，因?yàn)镴S引擎在處理import是在編譯時(shí)期，此時(shí)不會(huì)去執(zhí)行條件語(yǔ)句，因此這段代碼會(huì)出現(xiàn)句法錯(cuò)誤，相反，如果換成：

if (x > 2) {
  const A =require("./a.js");
}else{
  const B =require("./b.js");
}

commonjs是在運(yùn)行時(shí)加載模塊，因此上面代碼就會(huì)成功運(yùn)行

由于動(dòng)態(tài)加載功能的要求，才會(huì)有了import()函數(shù)的提案，這里就不過(guò)多贅述。

值的引用VS值的拷貝

commonjs模塊在加載之后會(huì)把原始類(lèi)型的值緩存，之后該模塊的內(nèi)部變化則不會(huì)再影響到其輸出的值：

//test.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};
==================================
//main.js
var test = require("./test");

console.log(test.counter);  // 3
test.incCounter();
console.log(test.counter); // 3

ES6的模塊機(jī)制,在引擎靜態(tài)分析階段會(huì)把import當(dāng)成是一種只讀引用（地址是只讀的const，因此不可以在引用該模塊的文件里給他重新賦值），等到代碼實(shí)際運(yùn)行時(shí)，才會(huì)根據(jù)引用去取值

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

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

循環(huán)加載指的是，a文件依賴(lài)于b文件，而b文件又依賴(lài)于a文件

commonjs的循環(huán)加載問(wèn)題

commonjs是在加載時(shí)執(zhí)行的，他在require的時(shí)候就會(huì)全部跑一遍，因此他在遇到循環(huán)加載的情況就會(huì)只輸出已經(jīng)執(zhí)行的部分，而之后的部分則不會(huì)輸出，下面是一個(gè)例子：

//parent文件
exports.flag = 1;
let children = require("./children")//停下來(lái)，加載chilren
console.log(`parent文件中chilren的flag =${children.flag}`);
exports.flag = 2
console.log(`parent文件執(zhí)行完畢了`);
=========================================================
//test2文件
exports.flag = 1;
let parent = require("./parent")//停下來(lái)，加載parent，此時(shí)parent只執(zhí)行到了第一行，導(dǎo)出結(jié)果flag ==1
console.log(`children文件中parent的flag =${parent.flag}`);
exports.flag = 2
console.log(`children文件執(zhí)行完畢了`);

node parent之后運(yùn)行結(jié)果為

運(yùn)行parent之后會(huì)在第一行導(dǎo)出flag=1，然后去ruquirechildren文件，此時(shí)parent進(jìn)行等待，等待children文件執(zhí)行結(jié)束，children開(kāi)始執(zhí)行到第二行的時(shí)候出現(xiàn)“循環(huán)加載”parent文件，此時(shí)系統(tǒng)自動(dòng)去找parent文件的exports屬性，而parent只執(zhí)行了一行，但是好在它有exports了flag，所以children文件加再進(jìn)來(lái)了那個(gè)flag并繼續(xù)執(zhí)行，第三行不會(huì)報(bào)錯(cuò)，最后在第四行children導(dǎo)出了flag=2，此時(shí)parent再接著執(zhí)行到結(jié)束。

ES6中的循環(huán)加載問(wèn)題

ES6和commonjs本質(zhì)上不同！因?yàn)镋S6是引用取值，即動(dòng)態(tài)引用

引用阮一峰老師ES6標(biāo)準(zhǔn)入門(mén)的例子

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

執(zhí)行后的結(jié)果：

執(zhí)行的過(guò)程是當(dāng)a文件防線import了b文件之后就會(huì)去執(zhí)行b文件，到了b文件這邊看到了他又引用了a文件，并不會(huì)又去執(zhí)行a文件發(fā)生“張郎送李郎”的故事，而是倔強(qiáng)得認(rèn)為foo這個(gè)接口已經(jīng)存在了，于是就繼續(xù)執(zhí)行下去，直到在要引用foo的時(shí)候發(fā)現(xiàn)foo還沒(méi)有定義，因?yàn)閘et定義變量會(huì)出現(xiàn)"暫時(shí)性死區(qū)"，不可以還沒(méi)定義就使用，其實(shí)如果改成var聲明，有個(gè)變量提升作用就不會(huì)報(bào)錯(cuò)了。改成var聲明fooexport let foo = "foo";

雖然打印的foo是undifined但是并沒(méi)有影響程序執(zhí)行，但最好的做法是，改成同樣有提升作用的function來(lái)聲明。最后去執(zhí)行函數(shù)來(lái)獲得值，最后得到了希望的結(jié)果

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

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

其實(shí)關(guān)于模塊還有很多東西還沒(méi)有梳理總結(jié)到，比如node模塊的加載過(guò)程的細(xì)節(jié)，和編譯過(guò)程，再比如如何自己寫(xiě)一個(gè)npm模塊發(fā)布等等都是很值得去梳理總結(jié)的，這一次就先到這吧，總之，第一次在自己的SF正兒八經(jīng)的寫(xiě)這么長(zhǎng)的技術(shù)總結(jié)博客，組織內(nèi)容上感覺(jué)比較凌亂，還有很多的不足。希望自己以后多多總結(jié)提高吧。最后當(dāng)然還是要感謝開(kāi)源，感謝提供了那么多優(yōu)秀資料的前輩們。也歡迎來(lái)我的博客網(wǎng)站(https://isliulei.com)指教。

參考文章：
ES6標(biāo)準(zhǔn)入門(mén)--阮一峰
Nodejs v8.9.4 官方文檔
《深入淺出Nodejs》---樸靈
Commonjs規(guī)范