ES6中Module語法與載入實現

在前三篇文章中一次介紹了commonjs，amd，cmd，他們都需要單獨載入檔案

在阮一峰老師的module一文中寫到，es6 在語言標準的層面上，實現的模組功能，而且實現得相當簡單，完全可以取代 commonjs 和 amd 規範，成為瀏覽器和伺服器通用的模組解決方案

require實際上是整體載入fs模組，然後在需要使用的時候使用

123

4567
8

// commonjs模組

let  = require('fs')
// 等同於
let _fs = require('fs')
let stat = _fs.stat
let exists = _fs.exists
let readfile = _fs.readfile

es6

es6中的import可以在編譯時，按照需要去載入所需要的模組，這個時候就相當於只載入了大括號裡的3個方法，相比上面commonjs中使用require載入整個fs模組好很多

1

import  from

'fs'

模組功能主要由兩個命令構成：export和import

規定對外介面

123

4

// poeple.js

export
var name = 'zhangsan'
export
var height = 180
export
var age = 18

上述**認為是乙個模組，利用export向外輸出三個變數

也可以在大括號內一塊輸出

123

456

// poeple.js

var name = 'zhangsan'
var height = 180
var age = 18
export 

輸出函式或類：

123

export

function
add (x, y) 

輸出變數改別名：

利用as關鍵字

123

4567
8

function

a1 () {}
function
a2 () {}
function
a3 () {}
export 

載入模組

123

45

import  from

'./people.js'
function
getpeople ()  is $ cm`
}

import語句可以選擇性的只載入需要的模組，更加節省了資源

星號（*）指定乙個物件，所有輸出值都載入在這個物件上面

那上面的例子

1

import * as people from

'./people.js'

從前面的例子可以看出，使用import命令的時候，使用者需要知道所要載入的變數名或函式名，否則無法載入

為了給使用者提供方便，讓他們不用閱讀文件就能載入模組，就要用到export default命令，為模組指定預設輸出

123

4

// export-default.js

export
default
function () 

其他模組載入該模組時，import命令可以為該匿名函式指定任意名字

123

// import-default.js

import something from './export-default'
something() // 'foo'

const宣告的常量只在當前**塊有效。如果想設定跨模組的常量（即跨多個檔案），或者說乙個值要被多個模組共享，可以採用下面的寫法

123

4567
891011
1213
14

// constants.js 模組

export
const a = 1;
export
const b = 3;
export
const c = 4;
// test1.js 模組
import * as constants from
'./constants';
console.log(constants.a); // 1
console.log(constants.b); // 3
// test2.js 模組
import  from
'./constants';
console.log(a); // 1
console.log(b); // 3

在瀏覽器和node之中載入es6模組

瀏覽器載入 es6 模組，也使用標籤，但是要加入type="module"屬性，以此屬性告訴瀏覽器，這載入的是乙個 es6 模組

1

type="module"

src="./foo.js">
script>

該載入是非同步載入，不會造成阻塞，按出現順序載入，相當於h5中的defer

123

type="module"

src="./foo.js">
script>
type="module"
src="./foo.js"
defer>
script>

同樣的可以使用async屬性，但此時不按順序載入，依然是非同步的，只不過不知道會先載入哪乙個

1

type="module"

src="./foo.js"
async>
script>

es6中Module 的語法總結

報錯 export 1 報錯 var m 1 export m 以上寫法都會報錯，第一種寫法直接輸出1，第二種寫法通過變數m，還是直接輸出1。1只是乙個值，不是介面 export匯出時規定的是對外的介面，就是你匯出的東西必須有乙個名字，匯入時才能找到這個名字，第二個方法之所以報錯，是因為不用大括號括...

es6中reduce的用法 Es6基礎語法

1 this this代表當前正在執行的物件 function fn fn window const obj new fn fn.call 2 箭頭函式 1 箭頭函式的this是在定義的時候就固定不變了 2 箭頭函式 沒有自己的this 3 箭頭函式 不能當類 構造器 使用 不可以 new 4 箭頭...

ES6 模組載入

es6中的import 是singleton 的載入方式只會載入一次，並且是編譯是執行，在編譯時進行運算等是會報錯的 export 註冊介面 export 使用方法 import 引入介面 import import from profile.js 介面可以整體載入 載入方式如下 import as...