ES6語法模塊化

淺談模塊化(完整版)

原生的JS沒有提供模塊化,於是有人寫了require.js，來幫助JS模塊化，有人又不想用第三方提供的JS模塊載入框架，所以原生JS的ES6提供了代碼的模塊化，但是目前大部分的瀏覽器都不支持ES6的模塊化，所以昨天更新了webpack的基本配置，配置完成之後就可以進行ES6模塊化的調試了。

也許還有人不知道什麼是模塊化，給大家舉一個簡單的例子吧！

我們之前寫代碼的時候要寫的代碼很多，有時候可能一個項目裡面有的JS代碼要用好幾遍，如果載入以前的JS代碼的話，整個頁面就要載入進去，很不利於優化。

JS現在給了我們一個方法，每一個JS文件之間可以互相調用其他的JS的代碼，但這個調用不是隨意調用，選擇把自己的一部分變數，或者函數給別人調用，調用別人的代碼的人呢，也要清楚你調用別人的什麼函數和變數，就跟去圖書館借書一樣，圖書館給你提供你可以借閱的目錄，你選擇你想看的書籍借閱。

啰嗦了這麼多，我們的模塊化語法是什麼呢？

export var str = "smallDream"

這就是模塊化的拋出語法，聽起來有點晦澀對不對， 還是剛剛那個例子，拋出的東西就相當於圖書館的目錄，export是拋出的意思，這句代碼的意思是拋出了一個變數名為str的變數，變數的值為"smallDream"。

有一點需要注意的地方，所有拋出的變數和函數在外部引用的時候是不可以改變的，就像去圖書館借書，借的時候是什麼樣子，還的時候還是要一樣的，不然是要賠償的。

上面的一句話就是簡單的拋出了一個變數，有拋出就有引用，就像圖書館這時候已經給了你可以借閱的目錄，你要怎麼借呢？模塊化提供了另外的一個方法

import from "./one.js"

import是模塊化另一個重要的命令，就是引用的意思，上面這句代碼的意思是從同級目錄的one.js文件中引用了一個str的變數。你告訴了代碼你要去one.js裡面str這個變數，這時候列印str就是上面引用的值了 。

上面只是給大家簡單的示範了一下模塊化拋出和引用的語法，一次只能拋出一個變數和函數。當我們在項目中真正要用的時候，肯定是有很多需要拋出和引用的函數和變數，當我們遇到大量需要拋出和引用的時候有沒有簡單一點的寫法呢？

export var name = "小夢"

export var age = "18"

export var height = 155;

其實可以簡寫為

var name = "小夢";

var age = "18";

var height = 165;

export

可以在export的後面跟花括弧，花括弧內拋出多個變數，之後用逗號隔開，輸出函數也是一樣的

export function f1(str){

return str

}

export function f2(str){

return str

}

export function f3(str){

return str

}

拋出了三個函數，可以簡寫為

function f1(str){

return str

}

function f2(str){

return str

}

function f3(str){

return str

}

export

export就這點作用嗎？當然不是了，ES6模塊化規定了一個關鍵字as用於重命名，感動嗎？出門前你麻麻還給了你一次可以改名換姓的機會，就像這樣

function tiezhu(str){

return str

}

export

在家的時候這個函數叫鐵柱，出門的時候鐵柱麻麻說，兒啊，在外面你可不能被人笑話啊，給你改個洋氣點的英文名字Tom吧。於是，出門人家都叫你Tom了，鐵柱這個名字外面的人再也不知道了。

總結一下，對外拋出一共有兩種方法，第一種方法是export後面聲明一個變數拋出，第二種方法是先聲明變數，之後export後面跟一個花括弧，花括弧裡面是要拋出的變數和方法。輸出的方式一共只有這兩種，其他的輸出方式都是會直接報錯的。

拋出了這麼多變數，應該怎麼引用呢？

import from "./one.js"

不管拋出多少個，引用方式都是一樣的，from的後面可以跟相對路徑，也可以跟絕對路徑。引用時候的這個花括弧是必須要加的。

關鍵字as在引用裡面一樣是生效的。

還有需要注意一點的是const是個塊級作用域內的靜態變數，整個模塊化中應該盡量避免使用const，如果你真的想用的話，ES6也會想辦法滿足你的。

export const a = 1;

export const b = 2;

export const c = 3;

拋出靜態變數的時候引入就要這樣寫了。

import * from "one"

這種寫法相當於給所有拋出的東西指定了一個對象num，所有拋出的變數和函數都成了這個對象num的方法和屬性了。

當拋出的變數和屬性很多的時候就可以採用這種方式，調用的時候需要這樣寫

*.a

它的值就和上一個js中const a的值是相等的了。

這個方法同樣可以用於整體引入，不需要一個一個的把名字列出來，所有拋出的靜態變數都被指定在*上面了，可以直接當成對象的屬性來調用，堪稱懶人福音。

同時這個方法也可以這樣用

export var a="小夢姑娘";

export var b="今天北京下雨了";

export var c="我沒帶傘";

export var all = function(a,b,c){

return a + b + c;

}

上面的這些是需要拋出的變數，引用的時候只需要

import * from "./one";

調用函數的時候只需要這樣寫就可以了

*.all();

但這樣寫是沒有意義的，因為我們還沒給函數傳參呢

*.all(*.a,*.b,"我剛好帶了傘");

這樣列印出來的結果應該就是：

小夢姑娘今天北京下雨了我剛好帶了傘

如果引用模板少的時候還可以，如果引用模板多了，那麼*之間是會起衝突的，可以換個名字嗎？

當然可以了，還記得鐵柱出村前改了個名字嗎？同樣，引入的時候也是允許模塊修改自己名字的，語法和拋出時候的語法一樣

import * as today from "./one"

調用的時候就可以直接用

today

來調用了，語法如下：

today.all(today.a,today.b)

是不是比以前一個一個的拋出方便了很多。別急，還有更方便的辦法。

export var a = 1;

export var b = 2;

這個JS裡面拋出了兩個變數，如果在另一個JS裡面引用的話可以這樣引用

import from "./one.js";

console.log(a);

console.log(b);

也可以這樣引用

import * as num from "./one";

console.log(num.a);

console.log(num.b);

可是，如果我不知道a和b的變數名，我們該如何調用呢？

可我們平時工作的時候要處理大量的代碼，引用的時候可能不會仔細閱讀拋出的變數和方法，這時候我們可能需要一個新的命令

default

這個命令是默認值的意思，他的語法如下

var a = 1;

export default a;

調用的時候語法如下

import default from "./one.js";

default實際上是默認的意思，叫什麼名字都無所謂，都可以引用到a這個變數,平時引用的時候都需要用花括弧包起來，因為默認值只能有一個，所以引用的時候花括弧可以省略。

也可以選擇這樣引用

import dream from "./one";

dream實際就是上個模塊中a的值,默認值是可以和其他的值一起引用拋出的，比如這樣

export var a = "ccc";

export default {

data:{

name:"小夢姑娘",

age:"18"

}

};

引用語法如下

import from "./one.js";

但是，大部分情況下，我們寫模塊語法的時候，一般一個模塊只拋出一個默認值就夠用了，不會選擇默認值和其他變數同時拋出，什麼？只拋出一個默認值？真的夠用嗎？兄弟你先別著急

export default {

data:{

name:"張三",

age:18,

family:["爸爸","媽媽","爺爺","奶奶"]

},

add:function(a,b){

return a+b;

},

addOne:function(arr){

var nArr = [];

for(let i=0;i

nArr.push(arr[i]+1);

}

}

}

這是一段最簡單不過的代碼了，只拋出了一個默認值，如何引用相信你一定能想到吧

import myFrist from "./one";

let arr = [123,54,"er",54,654,321]

console.log(myFirst.addOne(arr));

這樣直接調用就可以了，一般情況下我們都會使用這樣的方式調用模塊，你也省心，我也省心。

可有的時候，我們可能直接調用不到自己想用的方法，比如你想用的方法在你的同事B定義的模塊上，可你和B又沒有一點聯繫，只和同事A有聯繫，剛好B也和同事A有聯繫，這時候怎麼辦呢？

可以讓同事A引用B的模塊之後拋出，你再引用同事A的模塊就好了，聽上去好像很簡單，可是怎麼寫呢？

我是同事A

import B from "./b.js";

export default B ;

直接這樣就可以，這樣你就可以和同事b沒有一點聯繫，卻調用了他的方法，同時同事A這邊引用了之後就拋出了，B的代碼是不會在A代碼部分載入的

每個人都得到了自己想要的東西而且還沒有多載入代碼，這就是模塊化神奇的地方。

同時，模塊化是ES6新推出的，並不同於其他代碼。

import後面的from指定模塊文件的位置，可以是相對路徑，也可以是絕對路徑，.js後綴可以省略。

import命令具有提升效果，會提升到整個模塊的頭部，首先執行。

import是靜態執行，所以不能使用表達式和變數，那些是只有在運行時才能得到結果的語法結構。

比如

if(a === 1){

import one from "./one.js";

}//報錯，不被允許的寫法

關於模塊化的語法平時用到的大概也只有這些了，當然，模塊化的內容還有好多，我能做的，只是把我知道的分享給大家。

如果想要更深刻的了解模塊化，還是需要多實踐和參考官網的內容。

如果您發現本文有錯誤的地方歡迎您與我聯繫。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！