資訊專欄INFORMATION COLUMN
摘要：兩者對(duì)比就像下面這樣通過對(duì)象把函數(shù)向外開放而使用的模塊就像下面通過導(dǎo)出方法當(dāng)然了，的模塊肯定是比匿名函數(shù)自執(zhí)行更加高級(jí)的一種封裝了。相比于匿名函數(shù)，模塊具有下面幾種特點(diǎn)。
什么是ES6模塊?
在ES6中，每個(gè)文件就是一個(gè)模塊，有自己的作用域。在一個(gè)文件里面定義的變量、函數(shù)、類，都是私有的，對(duì)其他文件不可見。在看到這里的時(shí)候感覺很熟悉，這不就是匿名函數(shù)自執(zhí)行，然后一個(gè)個(gè)匿名函數(shù)放在一個(gè)個(gè)文件中的么，一個(gè)模塊就是一個(gè)放在文件中的匿名自執(zhí)行函數(shù)。兩者對(duì)比就像下面這樣:
// add.js
(function(window){
function add(a, b) {
return a + b;
}
window.add = add // 通過window對(duì)象把 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í)行更加高級(jí)的一種封裝了。相比于匿名函數(shù)，ES6模塊具有下面幾種特點(diǎn)。
至于為什么時(shí)候ES6的模塊產(chǎn)生的歷史就不討論，網(wǎng)絡(luò)上很多。個(gè)人感覺明白了它的歷史就能更好的明白它的特性。
export 與 import說到模塊，就需要想到兩點(diǎn)，一個(gè)是模塊的對(duì)外接口，后面文章中使用導(dǎo)出來表示，另外一個(gè)是引入其他模塊的接口，后面文章中使用導(dǎo)入來表示。
export命令用于規(guī)定模塊的導(dǎo)出，import命令用于模塊的導(dǎo)入。重頭戲就來了，怎么更好更快的理解模塊的導(dǎo)出與導(dǎo)入。
當(dāng)模塊引入其他模塊的時(shí)候，最終是獲取其模塊導(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 這個(gè)模塊，其實(shí)主要是把a(bǔ)dd.js 中的 add 函數(shù)進(jìn)行引入。
當(dāng)需要到導(dǎo)入多個(gè)值的時(shí)候，可以通過對(duì)象來返回多個(gè)所需要的值。
// util.js
function add(a, b) {
return a + b;
}
function reduce(a, b) {
return a - b;
}
// 通過對(duì)象來返回多個(gè)值
export default {add: add, reduce: reduce};
// main.js
import util from "./util.js"
console.log(util) // {add: add, reduce: reduce}
到這里，我個(gè)人覺得模塊的導(dǎo)入和導(dǎo)出基本上就已經(jīng)很好了。因?yàn)檫@樣不管是導(dǎo)出還是導(dǎo)入，對(duì)接的接口都是簡單方便。
當(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)入的是值是對(duì)象的時(shí)候，需要多次去使用對(duì)象獲取屬性。 就像上面需要多次使用util去獲取屬性。ES6中不是有解構(gòu)賦值么，用來處理對(duì)象多次獲取屬性的問題，那么導(dǎo)入對(duì)象的時(shí)候，也可以這樣去處理。
于是按照對(duì)象的解構(gòu)賦值，對(duì)上面的 main.js 改變。
// main.js
import {add: addFn} from "./util.js"
// 這里在`webpack`中編譯就已經(jīng)報(bào)錯(cuò)了, ES6模塊不支持這種方式
// 使用另外一種解構(gòu)方式，`導(dǎo)出`模塊的屬性名與`導(dǎo)入`的變量名一致
// main.js
import { add } from "./util.js"
console.log(add) // undefined
// 這里在`webpack`編譯中沒有報(bào)出錯(cuò)誤，但是還有警告: "export "add" was not found
// 于是對(duì) 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)入`對(duì)接
模塊的導(dǎo)入與導(dǎo)出大致可以分為兩種模式
1. default 模式default 模式下，模塊中導(dǎo)出的值可以使用任何類型(不管是基本類型還是引用類型)，都可以對(duì)外輸出。而導(dǎo)入的此模塊也是很簡單，提供一個(gè)接收的變量就可以（推薦這種模式）
例子如下:
// 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)出的時(shí)候使用default的。但是這種方式下，導(dǎo)出的值一定是object的。
而導(dǎo)入的模塊時(shí)是需要使用 { 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)錯(cuò)
export { add, reduce };
// 除了這樣直接導(dǎo)出對(duì)象，還可以像下面這樣
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 重命名主要是用于 { xxx }模式。因?yàn)樵?b>導(dǎo)出的時(shí)候，屬性名是被確定下來，而在導(dǎo)入此模塊的時(shí)候，變量名需要跟此屬性名一樣才能獲取對(duì)應(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; }
上面是個(gè)人關(guān)于ES6的模塊個(gè)人理解和學(xué)習(xí)心得。
另外想要深入了解的可以查看官方文檔 http://www.ecma-international...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93692.html
摘要：由于這種特性，某一個(gè)任務(wù)的后續(xù)操作，往往采用回調(diào)函數(shù)的形式進(jìn)行定義。另外，回調(diào)函數(shù)本身的第一個(gè)參數(shù)，約定為上一步傳入的錯(cuò)誤對(duì)象。這種寫法有一個(gè)很大的好處，就是說只要判斷回調(diào)函數(shù)的第一個(gè)參數(shù)，就知道有沒有出錯(cuò)，如果不是，就肯定出錯(cuò)了。 REPL環(huán)境 在命令行鍵入node命令，后面沒有文件名，就進(jìn)入一個(gè)Node.js的REPL環(huán)境（Read–eval–print loop，讀取-求值-輸出...
摘要：模塊化是隨著前端技術(shù)的發(fā)展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調(diào)也不等同于異步。將會(huì)討論安全的類型檢測惰性載入函數(shù)凍結(jié)對(duì)象定時(shí)器等話題。 Vue.js 前后端同構(gòu)方案之準(zhǔn)備篇——代碼優(yōu)化 目前 Vue.js 的火爆不亞于當(dāng)初的 React，本人對(duì)寫代碼有潔癖，代碼也是藝術(shù)。此篇是準(zhǔn)備篇，工欲善其事，必先利其器。我們先在代...
摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。對(duì)該漏洞的綜合評(píng)級(jí)為高危。目前，相關(guān)利用方式已經(jīng)在互聯(lián)網(wǎng)上公開，近期出現(xiàn)攻擊嘗試爆發(fā)的可能。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡...
摘要：巔峰人生年老兵思路上的轉(zhuǎn)變，遠(yuǎn)比單純提升技術(shù)更有價(jià)值本文節(jié)選自趙成教授在極客時(shí)間開設(shè)的趙成的運(yùn)維體系管理課，是其對(duì)自己十年技術(shù)生涯的回顧與總結(jié)。趙成教授來自美麗聯(lián)合集團(tuán)，集團(tuán)旗下兩大主力產(chǎn)品是蘑菇街和美麗說，目前負(fù)責(zé)管理集團(tuán)的技術(shù)服務(wù)團(tuán)隊(duì)。 showImg(https://segmentfault.com/img/remote/1460000012476504?w=1240&h=826...
摘要：模塊化編程，已經(jīng)成為一個(gè)迫切的需求。但是，不是一種模塊化編程語言，它不支持類，更遑論模塊了。本文總結(jié)了當(dāng)前模塊化編程的最佳實(shí)踐，說明如何投入實(shí)用。就是模塊的基本寫法。這樣做除了保證模塊的獨(dú)立性，還使得模塊之間的依賴關(guān)系變得明顯。 隨著WEB的快速崛起，網(wǎng)頁越來越像桌面程序，需要一個(gè)團(tuán)隊(duì)分工協(xié)作、進(jìn)度管理、單元測試等等......開發(fā)者不得不使用軟件工程的方法，管理網(wǎng)頁的業(yè)務(wù)邏輯。 Ja...
閱讀 2517·2021-10-09 09:44
閱讀 3907·2021-09-22 15:43
閱讀 2997·2021-09-02 09:47
閱讀 2659·2021-08-12 13:29
閱讀 3941·2019-08-30 15:43
閱讀 1747·2019-08-30 13:06
閱讀 2249·2019-08-29 16:07
閱讀 2816·2019-08-29 15:23
