ES6使用export和import實現模塊化的方法

在ES6前， 前端就使用RequireJS或者seaJS實現模塊化， requireJS是基于AMD規范的模塊化庫，  而像seaJS是基于CMD規范的模塊化庫，  兩者都是為了為了推廣前端模塊化的工具， 更多有關AMD和CMD的區別， 后面參考給了幾個鏈接；

現在ES6自帶了模塊化， 也是JS第一次支持module， 在很久以后 ，我們可以直接作用import和export在瀏覽器中導入和導出各個模塊了， 一個js文件代表一個js模塊；

現代瀏覽器對模塊(module)支持程度不同， 目前都是使用babelJS， 或者Traceur把ES6代碼轉化為兼容ES5版本的js代碼;

前端模塊化

1. 模塊化的好處

前后端分離以來，經常提到前端工程化，前端工程化是一個高層次的思想,前端工程化主要包括四個方面：模塊化、組件化、規范化、自動化。而模塊化和組件化是為工程化思想下相對較具體的開發方式,因此可以簡單的認為模塊化和組件化是工程化的表現形式。

模塊化帶來的好處：

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

2. 什么是模塊化？

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

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

在ES6前， 前端就使用RequireJS或者seaJS實現模塊化， requireJS是基于AMD規范的模塊化庫， 而像seaJS是基于CMD規范的模塊化庫， 兩者都是為了為了推廣前端模塊化的工具

4. ES6的模塊化

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

ES6的模塊化的基本規則或特點：

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

5.實際應用

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

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com