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

資訊專欄INFORMATION COLUMN

ES6深入淺出 模塊系統(tǒng)

Lionad-Morotar / 2206人閱讀

摘要：默認(rèn)導(dǎo)出可以使用進(jìn)行默認(rèn)導(dǎo)出注意一個(gè)模塊中只可以有一個(gè)默認(rèn)導(dǎo)出。盡管這種模塊的頂級(jí)變量函數(shù)或類最終并不會(huì)自動(dòng)被加入全局作用域，但這并不意味著該模塊無(wú)法訪問(wèn)全局作用域。

一步，一步前進(jìn)の一步。

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

筆者是一個(gè)也不會(huì)用啊（技術(shù)發(fā)展太快了，新技術(shù)學(xué)不過(guò)來(lái)，還是坐等它們過(guò)時(shí)吧，果然 webpack 和 es6替代了它們），一步心中有個(gè)期待，啥時(shí)候我們用的 ES6、ES7直接運(yùn)行在瀏覽器上吧，我現(xiàn)在還坐等 webpack 和 babel 死掉呢，一點(diǎn)還不會(huì)呢。

什么是模塊

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

嚴(yán)格模式

模塊中的代碼是在嚴(yán)格模式下運(yùn)行的，等同于在文件的頂部use strict。JS 在嚴(yán)格模式下使用會(huì)更加的嚴(yán)謹(jǐn)。簡(jiǎn)單列舉幾條嚴(yán)格模式的規(guī)則：

變量使用前必須聲明

函數(shù)不能有重名參數(shù)

with 不允許使用

。。。
更多規(guī)則請(qǐng)參考阮一峰老師的文章嚴(yán)格模式

export

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

默認(rèn)導(dǎo)出

可以使用 export default進(jìn)行默認(rèn)導(dǎo)出,注意一個(gè)模塊中只可以有一個(gè)默認(rèn)導(dǎo)出。

export default 1
export default NaN
export default "foo"
export default { foo: "bar" }
export default ["foo", "bar"]
命名導(dǎo)出

命名導(dǎo)出和默認(rèn)導(dǎo)出同樣常用，如果一個(gè)模塊想要導(dǎo)出多個(gè)聲明時(shí)較為常用，使用如下：

export var foo = "bar"
export var baz = "ponyfoo"
導(dǎo)出是綁定

需要注意的是 ES6模塊導(dǎo)出的是綁定關(guān)聯(lián)，不是值的復(fù)制，意味著如果你導(dǎo)出一個(gè)變量 foo,那么 foo 是和模塊內(nèi)部是相互關(guān)聯(lián)連動(dòng)的，我個(gè)人反對(duì)去更改一個(gè)模塊所暴露出來(lái)的接口(export出來(lái)的部分)。

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

export var foo = "bar"
setTimeout(() => foo = "baz", 500)
導(dǎo)出列表

ES6 的模塊允許你導(dǎo)出一個(gè)命名導(dǎo)出列表，代碼片段如下：

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

同時(shí)可以對(duì)命名導(dǎo)出進(jìn)行重命名:

export { foo as ponyfoo }
導(dǎo)出的最佳實(shí)踐

我們學(xué)會(huì)了命名導(dǎo)出、導(dǎo)出列表、默認(rèn)導(dǎo)出、導(dǎo)出重命名，此時(shí)你應(yīng)該有點(diǎn)疑惑，我該選擇那種方式實(shí)現(xiàn)自己的導(dǎo)出呢？人吶之所以煩惱，就是因?yàn)檫x擇太多了。作者推薦大家在文件的尾部使用export default進(jìn)行默認(rèn)導(dǎo)出。

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

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

這樣做的好處如下:

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

不用糾結(jié)是應(yīng)該使用命名導(dǎo)出，列表導(dǎo)出，還是重命名導(dǎo)出了，只使用export default不知道大家有沒(méi)有注意到，當(dāng)你將一個(gè)對(duì)象作為默認(rèn)導(dǎo)出接口時(shí)，即可以結(jié)合命名導(dǎo)出，還可以重命名，還能支持導(dǎo)出多個(gè)。

import

import 關(guān)鍵字的作用和 export 的作用正好相反，import 的作用是當(dāng)年想使用其他模塊中的內(nèi)容時(shí)進(jìn)行關(guān)系綁定。

導(dǎo)入默認(rèn)導(dǎo)出

當(dāng)想在另一個(gè)模塊中使用上一個(gè)模塊的默認(rèn)導(dǎo)出時(shí)十分方便，impprt 后面的名字可以隨便起，代碼如下：

import _ from "lodash"
import lodash from "lodash"
導(dǎo)入命名導(dǎo)出

import關(guān)鍵字后面使用花括號(hào)包上你想要使用的命名導(dǎo)出。

import {map, reduce} from "lodash"

導(dǎo)入時(shí)也可以進(jìn)行重命名

import {cloneDeep as clone, map} from "lodash"
完全導(dǎo)入一個(gè)模塊 
import * as _ from "lodash"
//使用時(shí)采用_.的形式
_.map()
無(wú)綁定的導(dǎo)入

有些模塊也許沒(méi)有進(jìn)行任何導(dǎo)出，相反只是修改全局作用域的對(duì)象。盡管這種模塊的頂級(jí)變 量、函數(shù)或類最終并不會(huì)自動(dòng)被加入全局作用域，但這并不意味著該模塊無(wú)法訪問(wèn)全局作用 域。

加載模塊

雖然我們?nèi)粘＞幋a中在使用 ES6的 import和 export 關(guān)鍵字，但是仔細(xì)想一下，我們并不了解 ES6的模塊是如何加載的，只知道打包工具幫我們處理好了，實(shí)際上我們并不了解模塊化的知識(shí)。有時(shí)間再更新

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

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

相關(guān)文章

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

    摘要：你可能認(rèn)為和它的新模塊系統(tǒng)出現(xiàn)得有點(diǎn)晚。聚合模塊有時(shí)候一個(gè)包的主模塊只不過(guò)是導(dǎo)入包其他所有的模塊，并用統(tǒng)一的方式導(dǎo)出。靜態(tài)動(dòng)態(tài)，或者說(shuō)規(guī)則如何打破規(guī)則作為一個(gè)動(dòng)態(tài)編譯語(yǔ)言，令人驚奇的是擁有一個(gè)靜態(tài)的模塊系統(tǒng)。 回想2007年，那時(shí)候我剛加入Mozillas JavaScript團(tuán)隊(duì)，那時(shí)候的一個(gè)典型的JavaScript程序只需要一行代碼，聽(tīng)起來(lái)像個(gè)笑話。 兩年后，Google Map...

    icattlecoder 評(píng)論0 收藏0

  • ES6-7

    摘要：的翻譯文檔由的維護(hù)很多人說(shuō)，阮老師已經(jīng)有一本關(guān)于的書(shū)了入門(mén)，覺(jué)得看看這本書(shū)就足夠了。前端的異步解決方案之和異步編程模式在前端開(kāi)發(fā)過(guò)程中，顯得越來(lái)越重要。為了讓編程更美好，我們就需要引入來(lái)降低異步編程的復(fù)雜性。 JavaScript Promise 迷你書(shū)（中文版） 超詳細(xì)介紹promise的gitbook，看完再不會(huì)promise...... 本書(shū)的目的是以目前還在制定中的ECMASc...

    mudiyouyou 評(píng)論0 收藏0

  • 帶你了解JavaScript相關(guān)的模塊機(jī)制

    摘要：本文從最簡(jiǎn)單的模塊開(kāi)始，然后主要從的模塊規(guī)范和的模塊機(jī)制對(duì)模塊進(jìn)行梳理。對(duì)象的屬性模塊的識(shí)別符，通常是帶有絕對(duì)路徑的模塊文件名。返回一個(gè)對(duì)象，表示調(diào)用該模塊的模塊。表示模塊對(duì)外輸出的值?？梢?jiàn)當(dāng)刪除了相關(guān)模塊的緩存再一次加載時(shí)則不再有了。 前言 java有類文件，Python有import機(jī)制，Ruby有require等，而Javascript 通過(guò)標(biāo)簽引入代碼的機(jī)制顯得雜亂無(wú)章，語(yǔ)言自...

    ningwang 評(píng)論0 收藏0

  • 前端構(gòu)建工具整理

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

    leo108 評(píng)論0 收藏0

  • 面試深入一、ES6模塊化、安裝和打包

    摘要：開(kāi)發(fā)環(huán)境已經(jīng)普及使用瀏覽器環(huán)境卻支持不好需要開(kāi)發(fā)環(huán)境編譯內(nèi)容很多，重點(diǎn)了解常用語(yǔ)法面試開(kāi)發(fā)環(huán)境的使用重點(diǎn)語(yǔ)法的掌握問(wèn)題模塊化如何使用，開(kāi)發(fā)環(huán)境如何打包和普通構(gòu)造函數(shù)有何區(qū)別的基本使用和原理總結(jié)一下其他常用功能模塊化的基本語(yǔ)法開(kāi)發(fā)環(huán)境電腦有 ES6 開(kāi)發(fā)環(huán)境已經(jīng)普及使用 瀏覽器環(huán)境卻支持不好（需要開(kāi)發(fā)環(huán)境編譯） 內(nèi)容很多，重點(diǎn)了解常用語(yǔ)法 面試：開(kāi)發(fā)環(huán)境的使用 + 重點(diǎn)語(yǔ)法的掌握 ...

    verano 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<