javascript基礎(chǔ)之模塊

keithyau 發(fā)布于2019-08-22 15:43 / 2135人閱讀

摘要：兩者對比就像下面這樣通過對象把函數(shù)向外開放而使用的模塊就像下面通過導(dǎo)出方法當(dāng)然了，的模塊肯定是比匿名函數(shù)自執(zhí)行更加高級的一種封裝了。相比于匿名函數(shù)，模塊具有下面幾種特點(diǎn)。

什么是ES6模塊?

在ES6中，每個文件就是一個模塊，有自己的作用域。在一個文件里面定義的變量、函數(shù)、類，都是私有的，對其他文件不可見。在看到這里的時候感覺很熟悉，這不就是匿名函數(shù)自執(zhí)行，然后一個個匿名函數(shù)放在一個個文件中的么，一個模塊就是一個放在文件中的匿名自執(zhí)行函數(shù)。兩者對比就像下面這樣:

// add.js 
(function(window){
    function add(a, b) {
       return a + b;
    }
    
    window.add = add // 通過window對象把 add 函數(shù)向外開放
})(window)

而使用ES6的模塊, 就像下面

// add.js
function add(a, b) {
  return a + b;
}
export default add; // 通過export 導(dǎo)出 add方法

當(dāng)然了，ES6的模塊肯定是比匿名函數(shù)自執(zhí)行更加高級的一種封裝了。相比于匿名函數(shù)，ES6模塊具有下面幾種特點(diǎn)。

1. ES6默認(rèn)使用嚴(yán)格模式, 而不需要使用 "use strict"

2. ES6模塊是編譯時加載，對代碼進(jìn)行靜態(tài)分析

3. 對外拋出接口的時候，不會污染全局的對象

4. 能夠有效的處理依賴，而且只會在第一次加載模塊時，代碼運(yùn)行一次。后面再次加載，不會重復(fù) 運(yùn)行，會從緩存中讀取

......暫時這些，以后待補(bǔ)充

至于為什么時候ES6的模塊產(chǎn)生的歷史就不討論，網(wǎng)絡(luò)上很多。個人感覺明白了它的歷史就能更好的明白它的特性。

export 與 import

說到模塊，就需要想到兩點(diǎn)，一個是模塊的對外接口，后面文章中使用導(dǎo)出來表示，另外一個是引入其他模塊的接口，后面文章中使用導(dǎo)入來表示。

export命令用于規(guī)定模塊的導(dǎo)出，import命令用于模塊的導(dǎo)入。

重頭戲就來了，怎么更好更快的理解模塊的導(dǎo)出與導(dǎo)入。

當(dāng)模塊引入其他模塊的時候，最終是獲取其模塊導(dǎo)出的值(基本數(shù)據(jù)類型或者引用類型)。于是可以這樣去理解，當(dāng)我們引入的模塊(文件)已經(jīng)確定下來了，那么導(dǎo)入的值也就確定下來。

// add.js
function add(a, b) {
   return a + b;
}
export default add

// main.js
import add from "./add.js"
add(1,2) // 3

上面導(dǎo)入的是 add.js 這個模塊，其實(shí)主要是把a(bǔ)dd.js 中的 add 函數(shù)進(jìn)行引入。

當(dāng)需要到導(dǎo)入多個值的時候，可以通過對象來返回多個所需要的值。

// util.js
function add(a, b) {
   return a + b;
}

function reduce(a, b) {
   return a - b;
}
// 通過對象來返回多個值
export default {add: add, reduce: reduce};

// main.js
import util from "./util.js"
console.log(util) // {add: add, reduce: reduce}

到這里，我個人覺得模塊的導(dǎo)入和導(dǎo)出基本上就已經(jīng)很好了。因?yàn)檫@樣不管是導(dǎo)出還是導(dǎo)入，對接的接口都是簡單方便。

當(dāng)然這只是我覺得。還是上面的例子

// util.js
function add(a, b) {
   return a + b;
}

function reduce(a, b) {
   return a - b;
}

export default {add: add, reduce: reduce, name: "util"}

// main.js
import util from "./util.js"

util.add(1, 2) // => 3

util.reduce(4, 3) // => 1

util.name // => "util"

有人說，當(dāng)導(dǎo)入的是值是對象的時候，需要多次去使用對象獲取屬性。就像上面需要多次使用util去獲取屬性。ES6中不是有解構(gòu)賦值么，用來處理對象多次獲取屬性的問題，那么導(dǎo)入對象的時候，也可以這樣去處理。

于是按照對象的解構(gòu)賦值，對上面的 main.js 改變。

// main.js
import {add: addFn} from "./util.js"
// 這里在`webpack`中編譯就已經(jīng)報(bào)錯了, ES6模塊不支持這種方式

// 使用另外一種解構(gòu)方式，`導(dǎo)出`模塊的屬性名與`導(dǎo)入`的變量名一致

// main.js
import { add } from "./util.js"
console.log(add)  // undefined
// 這里在`webpack`編譯中沒有報(bào)出錯誤，但是還有警告: "export "add" was not found  

// 于是對 util.js 的`導(dǎo)出`進(jìn)行改變
//util.js
 function add(a, b) {
   return a + b;
}

function reduce(a, b) {
   return a - b;
}

export {add, reduce, name: "util"}
// 當(dāng)修改完util.js 就完成了util.js模塊`導(dǎo)出` 與 main.js模塊的`導(dǎo)入`對接

模塊的導(dǎo)入與導(dǎo)出大致可以分為兩種模式

1. default 模式

default 模式下，模塊中導(dǎo)出的值可以使用任何類型(不管是基本類型還是引用類型)，都可以對外輸出。而導(dǎo)入的此模塊也是很簡單，提供一個接收的變量就可以（推薦這種模式）
例子如下:

// util.js 
function add(a, b) {
  return a + b;
}
function reduce(a, b) {
  return a - b;
}

const obj = { add, reduce };

export default obj;

// main.js
import util from "./util.js";
// util 是可以變換任意名稱
console.log(util)// => {add: ?, reduce: ?}

2. { xxx } 模式

{ xxx } 是不需要在模塊導(dǎo)出的時候使用default的。但是這種方式下，導(dǎo)出的值一定是object的。
而導(dǎo)入的模塊時是需要使用 { xxx }來接收。而且接收的變量名稱還必須與導(dǎo)出模塊屬性名的一樣。
例子如下:

// util.js 
function add(a, b) {
  return a + b;
}
function reduce(a, b) {
  return a - b;
}

let obj = { add, reduce };
// export obj; //webpack 編譯報(bào)錯

export { add, reduce };

// 除了這樣直接導(dǎo)出對象，還可以像下面這樣

export let name = "util";
// 與 export { name } 效果一樣;

深入了解的話，兩者還是可以一起合用

function add(a, b) {
  return a + b;
}
function reduce(a, b) {
  return a - b;
}

export let name = "util";
export { add, reduce };
// 相當(dāng)于把這些屬性合并在一起

// main.js
import { add, reduce, name } from "./util.js" 
console.log(add) // add(a, b) { return a + b; }
console.log(name) // util

as 重命名

as 重命名主要是用于 { xxx }模式。因?yàn)樵?b>導(dǎo)出的時候，屬性名是被確定下來，而在導(dǎo)入此模塊的時候，變量名需要跟此屬性名一樣才能獲取對應(yīng)的值。而使用 as 不僅能夠幫助導(dǎo)出模塊把屬性名重命名，也能夠幫導(dǎo)入模塊把接收的變量名進(jìn)行重命名。
例子如下:

// util.js
function add(a, b) {
    return a + b;
}

export { add as addFn};

// main.js
import { addFn as add } from "./util.js"

console.log(add) // add(a, b) { return a + b; }

上面是個人關(guān)于ES6的模塊個人理解和學(xué)習(xí)心得。

另外想要深入了解的可以查看官方文檔 http://www.ecma-international...

云服務(wù)器 GPU云服務(wù)器之基礎(chǔ)篇黑客基礎(chǔ)之DOS 零基礎(chǔ)課程之c語言 python基礎(chǔ)模塊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93692.html

發(fā)表評論

登陸后可評論

0條評論

keithyau

男|高級講師

我要關(guān)注我要私信

TA的文章

《十萬字Java入門練習(xí)100例》1-10例——紙上得來終覺淺,絕知此事要躬行

閱讀 2444·2021-10-09 09:44
如何通過ip連接主機(jī)-如何利用ip地址連接打印機(jī)？

閱讀 3817·2021-09-22 15:43
GigsGigsCloud：美國VPS限時2折，洛杉磯CN2+聯(lián)通9929線路，首月$6/起

閱讀 2934·2021-09-02 09:47
Vultr機(jī)房測評 - Vultr韓國首爾Seoul機(jī)房綜合速度和線路去程回程測試

閱讀 2556·2021-08-12 13:29
微信小程序 + 騰訊地圖SDK 實(shí)現(xiàn)路線規(guī)劃

閱讀 3879·2019-08-30 15:43
個人Web前端開發(fā)切圖PS設(shè)置

閱讀 1689·2019-08-30 13:06
BFC-塊格式化上下文（block formatting context）

閱讀 2195·2019-08-29 16:07
css預(yù)編譯--sass基礎(chǔ)篇

閱讀 2756·2019-08-29 15:23

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

javascript基礎(chǔ)之模塊

1. ES6默認(rèn)使用嚴(yán)格模式, 而不需要使用 "use strict"

2. ES6模塊是編譯時加載，對代碼進(jìn)行靜態(tài)分析

3. 對外拋出接口的時候，不會污染全局的對象

4. 能夠有效的處理依賴，而且只會在第一次加載模塊時，代碼運(yùn)行一次。后面再次加載，不會重復(fù) 運(yùn)行，會從緩存中讀取

as 重命名

相關(guān)文章

**node學(xué)習(xí)系列之基礎(chǔ)(二)**

javascript知識點(diǎn)

前端每周清單半年盤點(diǎn)之 Node.js 篇

前端每周清單第 44 期: 2017 JS 調(diào)查報(bào)告、REST 接口實(shí)時化、ESM 的過去與未來

Javascript模塊化編程之【模塊的寫法】

發(fā)表評論

0條評論

keithyau

男|高級講師

TA的文章

《十萬字Java入門練習(xí)100例》1-10例——紙上得來終覺淺,絕知此事要躬行

如何通過ip連接主機(jī)-如何利用ip地址連接打印機(jī)？

GigsGigsCloud：美國VPS限時2折，洛杉磯CN2+聯(lián)通9929線路，首月$6/起

Vultr機(jī)房測評 - Vultr韓國首爾Seoul機(jī)房綜合速度和線路去程回程測試

微信小程序 + 騰訊地圖SDK 實(shí)現(xiàn)路線規(guī)劃

個人Web前端開發(fā)切圖PS設(shè)置

BFC-塊格式化上下文（block formatting context）

css預(yù)編譯--sass基礎(chǔ)篇

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

javascript基礎(chǔ)之模塊

1. ES6默認(rèn)使用嚴(yán)格模式, 而不需要使用 "use strict"

2. ES6模塊是編譯時加載，對代碼進(jìn)行靜態(tài)分析

3. 對外拋出接口的時候，不會污染全局的對象

4. 能夠有效的處理依賴， 而且只會在第一次加載模塊時，代碼運(yùn)行一次。后面再次加載，不會重復(fù) 運(yùn)行，會從緩存中讀取

as 重命名

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

2. ES6模塊是編譯時加載，對代碼進(jìn)行靜態(tài)分析

3. 對外拋出接口的時候，不會污染全局的對象

4. 能夠有效的處理依賴，而且只會在第一次加載模塊時，代碼運(yùn)行一次。后面再次加載，不會重復(fù) 運(yùn)行，會從緩存中讀取