ES6深入淺出模塊系統

Lionad-Morotar 發布于2019-08-23 10:57 / 2201人閱讀

摘要：默認導出可以使用進行默認導出注意一個模塊中只可以有一個默認導出。盡管這種模塊的頂級變量函數或類最終并不會自動被加入全局作用域，但這并不意味著該模塊無法訪問全局作用域。

一步，一步前進の一步。

模塊化主要是幫助我們更好的組織代碼，模塊允許我們將相關的變量和函數放在一個模塊中。在 ES6 模塊化之前，JS 語言并沒有模塊的概念，只有函數作用域和全局作用域非常容易發生命名沖突。之前的 RequireJS、SeaJS、AMD、UMD、CMD啥的，在一定層面上都是為了解決 JS 模塊化的問題。

筆者是一個也不會用啊（技術發展太快了，新技術學不過來，還是坐等它們過時吧，果然 webpack 和 es6替代了它們），一步心中有個期待，啥時候我們用的 ES6、ES7直接運行在瀏覽器上吧，我現在還坐等 webpack 和 babel 死掉呢，一點還不會呢。

什么是模塊

模塊是自動運行在嚴格模式下的JS 代碼，在模塊中創建的變量不會被添加到全局共享作用域，這個變量只會存在于模塊的作用域中，在模塊中 this的值是 undefined。模塊的真正魔力所在是僅導入、導出你需要的綁定，而不是將所用的東西都放在一個地方。一個文件即一個模塊。

嚴格模式

模塊中的代碼是在嚴格模式下運行的，等同于在文件的頂部use strict。JS 在嚴格模式下使用會更加的嚴謹。簡單列舉幾條嚴格模式的規則：

變量使用前必須聲明

函數不能有重名參數

with 不允許使用

。。。
更多規則請參考阮一峰老師的文章嚴格模式

export

在 ES6模塊中的聲明的作用范圍就被限定在了模塊文件中，文件外部是無法訪問的，必須使用 export關鍵字將引用顯示的暴露出去。

默認導出

可以使用 export default進行默認導出,注意一個模塊中只可以有一個默認導出。

export default 1
export default NaN
export default "foo"
export default { foo: "bar" }
export default ["foo", "bar"]

命名導出

命名導出和默認導出同樣常用，如果一個模塊想要導出多個聲明時較為常用，使用如下：

export var foo = "bar"
export var baz = "ponyfoo"

導出是綁定

需要注意的是 ES6模塊導出的是綁定關聯，不是值的復制，意味著如果你導出一個變量 foo,那么 foo 是和模塊內部是相互關聯連動的，我個人反對去更改一個模塊所暴露出來的接口(export出來的部分)。

假設你有個模塊./a，導出的 foo 變量初始值是 bar 將在500ms 變成 baz，在使用該變量的地方（import處）也會有該變化。

export var foo = "bar"
setTimeout(() => foo = "baz", 500)

導出列表

ES6 的模塊允許你導出一個命名導出列表，代碼片段如下：

var foo = "ponyfoo"
var bar = "baz"
export { foo, bar }

同時可以對命名導出進行重命名:

export { foo as ponyfoo }

導出的最佳實踐

我們學會了命名導出、導出列表、默認導出、導出重命名，此時你應該有點疑惑，我該選擇那種方式實現自己的導出呢？人吶之所以煩惱，就是因為選擇太多了。作者推薦大家在文件的尾部使用export default進行默認導出。

var foo = "ponyfoo"
var bar = "baz"
...

var api = {
  foo,
  baz,
  ...
}
export default api

這樣做的好處如下:

模塊中導出的部分變得顯而意見，不需要從頭到尾去找模塊中哪里是私有的，哪里是需要export 出去的，只需要滾動到文件底部就可以一目了然。

不用糾結是應該使用命名導出，列表導出，還是重命名導出了，只使用export default不知道大家有沒有注意到，當你將一個對象作為默認導出接口時，即可以結合命名導出，還可以重命名，還能支持導出多個。

import

import 關鍵字的作用和 export 的作用正好相反，import 的作用是當年想使用其他模塊中的內容時進行關系綁定。

導入默認導出

當想在另一個模塊中使用上一個模塊的默認導出時十分方便，impprt 后面的名字可以隨便起，代碼如下：

import _ from "lodash"
import lodash from "lodash"

導入命名導出

import關鍵字后面使用花括號包上你想要使用的命名導出。

import {map, reduce} from "lodash"

導入時也可以進行重命名

import {cloneDeep as clone, map} from "lodash"

完全導入一個模塊

import * as _ from "lodash"
//使用時采用_.的形式
_.map()

無綁定的導入

有些模塊也許沒有進行任何導出，相反只是修改全局作用域的對象。盡管這種模塊的頂級變量、函數或類最終并不會自動被加入全局作用域，但這并不意味著該模塊無法訪問全局作用域。

加載模塊

雖然我們日常編碼中在使用 ES6的 import和 export 關鍵字，但是仔細想一下，我們并不了解 ES6的模塊是如何加載的，只知道打包工具幫我們處理好了，實際上我們并不了解模塊化的知識。有時間再更新

云服務器 GPU云服務器深入理解計算機系統深入解析windows操作系統 oa系統html模塊 java模塊化系統初探

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96852.html

【翻譯】深入理解ES6的模塊

摘要：你可能認為和它的新模塊系統出現得有點晚。聚合模塊有時候一個包的主模塊只不過是導入包其他所有的模塊，并用統一的方式導出。靜態動態，或者說規則如何打破規則作為一個動態編譯語言，令人驚奇的是擁有一個靜態的模塊系統。回想2007年，那時候我剛加入Mozillas JavaScript團隊，那時候的一個典型的JavaScript程序只需要一行代碼，聽起來像個笑話。兩年后，Google Map...

icattlecoder 2019-08-21 17:36 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
帶你了解JavaScript相關的模塊機制

摘要：本文從最簡單的模塊開始，然后主要從的模塊規范和的模塊機制對模塊進行梳理。對象的屬性模塊的識別符，通常是帶有絕對路徑的模塊文件名。返回一個對象，表示調用該模塊的模塊。表示模塊對外輸出的值。可見當刪除了相關模塊的緩存再一次加載時則不再有了。前言 java有類文件，Python有import機制，Ruby有require等，而Javascript 通過標簽引入代碼的機制顯得雜亂無章，語言自...

ningwang 2019-08-22 14:03 評論0 收藏0
前端構建工具整理

摘要：常見前端構建工具的分類和對比是附帶的包管理器，是內置的一個功能，允許在文件里面使用字段定義任務在這里，一個屬性對應一段腳本，原理是通過調用去運行腳本命令。前文端技術范圍不斷發展，前端開發不僅限于直接編寫html，css和javascript，Web應用日益龐大，代碼也更加龐大，因此許多新的思想（例如模塊化和工程化等）和框架（React和Vue等），以及新的語言（Es6 TypeSc...

leo108 2019-08-23 10:53 評論0 收藏0
面試深入一、ES6模塊化、安裝和打包

摘要：開發環境已經普及使用瀏覽器環境卻支持不好需要開發環境編譯內容很多，重點了解常用語法面試開發環境的使用重點語法的掌握問題模塊化如何使用，開發環境如何打包和普通構造函數有何區別的基本使用和原理總結一下其他常用功能模塊化的基本語法開發環境電腦有 ES6 開發環境已經普及使用瀏覽器環境卻支持不好（需要開發環境編譯）內容很多，重點了解常用語法面試：開發環境的使用 + 重點語法的掌握 ...

verano 2019-08-23 13:49 評論0 收藏0