Module

一、爲何會有Module?

答： 由於js以前一直沒有模塊體系，也就是Module體系。

 

二、在ES6以前，有哪些模塊加載方案？

答：有兩種，CommonJS和AMD。

 

三、兩種加載方案的區別是什麼？

答：CommonJS用於服務器，AMD用於瀏覽器。

 

四、Module的設計思想是什麼？

答：靜態化。

 

五、什麼是靜態化？

答：在編譯的時候就能肯定模塊的依賴關係，以及輸入和輸出的變量。

 

六、Module是對象嗎？

答：不是。運行時加載的纔是對象。

 

七、默寫靜態加載與運行時加載的代碼。

答：靜態加載加載的不是對象，而是從模塊裏面加載了相應的方法，所以它的效率要比運行時加載高。運行時加載加載的是一個對象，只有在運行時才能獲得這個對象，從而獲得這個對象的方法。

 import {start} from './fs.js' //靜態加載 
 const {start} = require('./fs.js') //運行時加載

 

 

八、export和import命令分別是作什麼的？

答：export命令用於規定模塊的對外接口，import命令用於輸入其餘模塊提供的功能。

 

九、使用模塊內部變量的時候須要注意什麼？

答：若是外部想要讀取模塊內部的變量，必須使用export命令，並用花括號包括。花括號表示這是一個對外的接口。

 

十、export命令能夠輸出什麼？

答： 變量，類，和方法。

 

十一、給下面兩句代碼找錯。

export 1；

答：錯誤。不能直接輸出1，由於它沒有提供對外的接口。

 

var m = 1;

export m;

答：錯誤。這種寫法經過變量直接輸出1, 1只是一個值，不是一個接口，仍然是沒喲提供對外的接口。

 

十二、export的位置有要求嗎？

答：export能夠在模塊的任何位置，只要處在模塊的頂層就能夠。可是不能處在塊級做用域。

 

------import命令分割線--------

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1、export命令

暴露的能夠是變量，函數和類，語法以下：

let name="Alice";
let age=18;
let year=2009;
let person={
    name:"Tony",
    age:20
}

export {name,age,year};

export{person as student,person as teenager}

-

（1）暴露的對象必須加{}，它表示暴露的是一個接口。若是不加的話，它表示暴露的是一個值，這樣就會報錯。好比下面這段代碼，就是錯誤的。

var name="Alice";
export name;

-

（2）as關鍵字，能夠給暴露的對象換名字，同一個對象能夠屢次使用as關鍵字，用不一樣的名字暴露出去。

（3）export命令必須處於模塊的頂層，位置無所謂。

（4）export暴露的對象是動態綁定關係，若是發生變化，外部引用也會變化。

 

2、import命令

語法以下：

import {name,age,year as born} from "./main";

  import有如下幾個特色：

（1）引用的文件能夠省略.js後綴。

（2）可使用as關鍵字。

（3）import具備變量提高的效果，因此放在引用的對象後面也無所謂。

（4）ES6的import命令最好不要跟CommonJS模塊的require命令放在一塊。由於import會變量提高，會最先解析。

（5）import接收對象是否用花括號括起來，要看對象的暴露方式。默認輸出就不用加花括號，若是是export，就要加花括號。

 

 3、export default命令

import命令，在引用的時候必須得知道這個文件中所暴露的全部變量的名字。若是我不知道export變量的名字，怎麼引用呢？就是在暴露的時候用export default命令，該命令爲模塊指定默認輸出。

暴露：

export default function onlyOne(){
    console.log("只能用一次");
}

引用：

import only from "./main";
only();

 export default命令的特色：

（1）export default命令在一個模塊中只能使用一次，由於是默認暴露值，因此默認的輸出值只能是惟一的嘛。

（2）引用的時候不須要知道暴露的對象名，能夠給他起隨意的名字。

（3）引用的時候不須要加花括號。

 

-

實際實踐：

Node是JS語言的服務器運行環境，他對ES6的支持度很高。雖然個人電腦上也安裝了Node.js環境，可是這個倒黴孩子，電腦居然不支持ES6的Module模塊，雖然是爲啥他不支持我也不明白。但這也就意味着上面的前兩個命令我都無法用。

 

看了看書，Node不支持ES6模塊的緣由我彷佛知道了。

Node自己帶有支持模塊的功能，他支持CommonJS模塊。

模塊分爲CommonJS裏的模塊與ES6裏面的模塊，這兩種模塊是不同的東西。export命令和import命令是ES6裏面的模塊。 而CommonJS模塊與ES6模塊的功能不兼容。

 -

CommonJS模塊與ES6模塊的區別是什麼呢？

（1）CommonJS暴露和加載的是一個對象，而ES6只是暴露和加載了一個接口。

（2）上面這個區別致使了，CommonJS的引用是靜態的，而ES6的引用是動態綁定的。參見上面export命令的第（4）條。

 

- 

在電腦不支持ES6Module的狀況下，想要引用暴露的文件怎麼辦呢？就用CommonJS的模塊。

暴露：module.exports={}方法

暴露的能夠有變量、對象和方法。

let year=2009;
let person={
    name:"Tony",
    age:20
}
let test=function(){
    console.log("It is a function!")
}
module.exports={year,person,test};

 -

引入：let 對象名=require（「相對路徑」）;

引入的info是一整個對象。這種引入是CommonJS模塊裏的功能。

var info = require("./main.js");
console.log('引入文件', info);
info.test();

 -

注意：上面的這兩種方法都不能使用as關鍵字。