ES6 入門

時間 2019-11-06

原文原文鏈接

在es6以前，若是咱們須要引入一個外部的庫，多是像下面這樣子的：css

引入Jqueryhtml

而後在js中能夠像下面這樣使用：es6

$(function(){ $('.aaa').on('click',function(){ //... }); }); 在es6以前，幾乎全部的第三方類庫，都是經過上面這種形式引入的。這種形式的引入會有下面一些問題：web

全局變量污染每一個第三方的類庫基本都是定義了一個惟一的全局變量，而後將全部的函數，屬性都封裝到這個變量上面。 script標籤順序有嚴格的依賴全部的類庫基本上都須要依賴jQuery，在引入本身的類庫文件以前必須引入jQuery的類庫。建立es6的模塊在es6的規範中，引入了模塊的概念。chrome

例如如今我有一個a.js文件，這裏面封裝了一個模塊，而後須要給外部提供一些接口。內容以下：express

let p1 = 'abc'; const m1 = { fn:()=>{ console.log('from a module...p1='+p1); } };npm

export { m1 };跨域

使用es6模塊上面咱們已經寫好了一個模塊，下面來看一下如何使用這個模塊。 **注意：**在chrome瀏覽器中，默認是不支持模塊的。瀏覽器

解決辦法：在chrome瀏覽器中訪問：chrome://flags/ 而後找到Experimental Web Platform features項，點擊啓用。重啓瀏覽器以後生效。

接下來咱們再建立一個模塊和一個用來使用這些模塊的html頁面

b.js的內容以下：

//導入a.js模塊 import { m1 } from './a.js';

//調用模塊的方法 m1.fn();

index.html的內容以下：

<!doctype html>

<html> <head> <script type="module" src="./b.js"></script> </head> </html> 注意：

這裏的script標籤的type必須是module才行。須要使用一個web服務器來運行上面的內容，不然瀏覽器會報跨域的錯誤這裏推薦使用輕量級的http-server做爲web服務器來運行上面的內容。使用如下命令安裝http-server:

cnpm install -g http-server 若是你沒有安裝cnpm的話，請先安裝cnpm。到此，咱們來看一下咱們的目錄結構：輸入圖片說明

在此目錄下運行：

http-server 而後訪問：http://127.0.0.1:8080

查看下圖：輸入圖片說明

從上圖中能夠看出，此時模塊b的做用域鏈的活動對象中，包含了導入的模塊a，也就是說，此時在b模塊中，能夠訪問到a模塊。

控制檯輸出以下：輸入圖片說明到此，咱們已經初步瞭解了es6模塊的建立已經使用。

import和export 參考連接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

在模塊中，除了能夠像上面a.js中那樣，導出一個模塊，還支持如下導出方式：

export { name1, name2, …, nameN };

export { variable1 as name1, variable2 as name2, …, nameN };

export let name1, name2, …, nameN;

export let name1 = …, name2 = …, …, nameN;

export default expression;

export default function (…) { … }

export default function name1(…) { … }

export { name1 as default, … };

export * from …;

export { name1, name2, …, nameN } from …;

export { import1 as name1, import2 as name2, …, nameN } from …;

除了像b.js中那樣，導入一個模塊以外，還支持如下方式的導入：

import defaultMember from "module-name"; import * as name from "module-name"; import { member } from "module-name"; import { member as alias } from "module-name"; import { member1 , member2 } from "module-name"; import { member1 , member2 as alias2 , [...] } from "module-name"; import defaultMember, { member [ , [...] ] } from "module-name"; import defaultMember, * as name from "module-name"; import "module-name"; 下面具體來看幾種方式的使用：

第一種：導出多個成員將a.js的內容修改成以下：

let p1 = 'abc'; const m1 = { fn:()=>{ console.log('from a module...p1='+p1); } };

export { m1 , p1 }; b.js的內容修改成以下：

//導入a.js模塊 import { m1,p1 } from './a.js';

//調用模塊的方法 m1.fn();

console.log(p1); 刷新頁面，查看控制檯輸出：輸入圖片說明

第二種：經過as指定導出別名修改a.js的內容，改成以下：

let p1 = 'abc'; const m1 = { fn:()=>{ console.log('from a module...p1='+p1); } };

export { m1 as m, p1 as p }; as能夠指定導出別名。

b.js修改以下：

//導入a.js模塊 import { m , p } from './a.js';

//調用模塊的方法 m.fn();