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