今天就跟大家聊聊有關(guān)怎么在ES6中使用export和import實(shí)現(xiàn)模塊化，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開發(fā)，軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評(píng)估等整套的建站服務(wù)，主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，手機(jī)APP定制開發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。成都創(chuàng)新互聯(lián)深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

前端模塊化

1. 模塊化的好處

前后端分離以來，經(jīng)常提到前端工程化，前端工程化是一個(gè)高層次的思想,前端工程化主要包括四個(gè)方面：模塊化、組件化、規(guī)范化、自動(dòng)化。而模塊化和組件化是為工程化思想下相對(duì)較具體的開發(fā)方式,因此可以簡(jiǎn)單的認(rèn)為模塊化和組件化是工程化的表現(xiàn)形式。

模塊化帶來的好處：

   1 避免變量污染，命名沖突
   2 提高代碼復(fù)用率
   3 提高維護(hù)性
   4 依賴關(guān)系的管理

2. 什么是模塊化？

那具體什么是模塊化呢,還是舉簡(jiǎn)單的例子,我們要寫一個(gè)實(shí)現(xiàn)A功能的JS代碼,這個(gè)功能在項(xiàng)目其他位置也需要用到,那么我們就可以把這個(gè)功能看成一個(gè)模塊采用一定的方式進(jìn)行模塊化編寫,既能實(shí)現(xiàn)復(fù)用還可以分而治之,同理在寫樣式的時(shí)候,如果我們需要某種特殊的樣式,會(huì)在很多地方應(yīng)用,那么我們也可以采用一定的方式進(jìn)行CSS的模塊化,具體說來,JS模塊化方案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模塊化開發(fā)大多是在less、sass、stylus等預(yù)處理器的import/mixin特性支持下實(shí)現(xiàn)的,具體技術(shù)大家自行學(xué)習(xí)。

3. 沒有ES6模塊化之前是怎么表達(dá)模塊化的？

在ES6前， 前端就使用RequireJS或者seaJS實(shí)現(xiàn)模塊化， requireJS是基于AMD規(guī)范的模塊化庫(kù)， 而像seaJS是基于CMD規(guī)范的模塊化庫(kù)， 兩者都是為了為了推廣前端模塊化的工具

4. ES6的模塊化

現(xiàn)在ES6自帶了模塊化， 也是JS第一次支持module，我們可以直接作用import和export在瀏覽器中導(dǎo)入和導(dǎo)出各個(gè)模塊了， 一個(gè)js文件代表一個(gè)js模塊；

ES6的模塊化的基本規(guī)則或特點(diǎn)：

　　　　1：每一個(gè)模塊只加載一次,每一個(gè)JS只執(zhí)行一次,如果下次再去加載同目錄下同文件,直接從內(nèi)存中讀取。
　　　　2：每一個(gè)模塊內(nèi)聲明的變量都是局部變量， 不會(huì)污染全局作用域；
　　　　3：模塊內(nèi)部的變量或者函數(shù)可以通過export導(dǎo)出；
　　　　4：一個(gè)模塊可以導(dǎo)入別的模塊
　　　　5：ES6的模塊自動(dòng)采用嚴(yán)格模式
　　　　6：模塊頂級(jí)作用域的this值為undefined
　　　　7：需要外部使用的部分，必須導(dǎo)出才可以

5.實(shí)際應(yīng)用

// 普通的使用
  export var a = '1'
  export function sum(num1,num2){
    return num1+num2
  }
  
  import a from './a.js'
  import {sum} from './sum.js'
// 重命名導(dǎo)出與導(dǎo)入
  function sum(num1,num2){
    return num1+num2
  }
  export {sum as add}
  
  import {add as sum} from './sum.js'
  
// 模塊的默認(rèn)值

  export default function(num1,num2) {
    return num1 + num2
  }
  
// 在script標(biāo)簽中使用模塊

  <script type="module" src="module.js"></script>
  <script type="module">
  import a from '../b.js'
  </script>

看完上述內(nèi)容，你們對(duì)怎么在ES6中使用export和import實(shí)現(xiàn)模塊化有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：怎么在ES6中使用export和import實(shí)現(xiàn)模塊化-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://www.chinadenli.net/article6/gsgig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、虛擬主機(jī)、電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)、小程序開發(fā)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)