ES6入門之Module

本文首發於公衆號：小夭同窗，同步更新我的博客：故事膠片，轉載請署名。

一、概述

JS中一直沒有 module 體系，沒法將一個大程序拆分紅依賴的小文件，在用簡單的方法拼接起來。ES6 的模塊設計思想是儘可能靜態化，使得編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。

ES6模塊不是對象，而是經過 export 命令顯式指定輸出的代碼，再經過import 命令輸入。以下：

import {state, getNum, setPost} form 'api'

複製代碼

以上方法實質上是從 api模塊加載了3個方法，api中其餘的方法不加載。這種加載就是 編譯時加載或者靜態加載

1.1 ES6模塊的好處

• 不在須要UMD模塊格式。
• 未來瀏覽器的新API就能用模塊格式提供，不在必須作成全局變量或 navigator 對象的屬性。
• 不在須要命名空間

二、嚴格模式

ES6的模塊自動採用嚴格模式，無論你有沒有再模塊頭部加上 「use strict」

2.1 嚴格模式的限制

• 變量必須聲明再使用
• 函數的參數不能有同名屬性，不然報錯
• 不能使用with語句
• 不能對只讀屬性賦值，不然報錯
• 不能刪除不可刪除的屬性，不然報錯
• 不能刪除變量 delete prop，會報錯，只能刪除屬性delete global[prop]
• eval不會在它的外層做用域引入變量
• eval和arguments不能被從新賦值
• arguments不會自動反應函數的變化
• 不能使用 arguments.callee
• 不能使用 arguments.caller
• 禁止 this 指向全局對象（頂層指向 undefined，因此不能在頂層代碼中使用 this）
• 不能使用 fn.caller 和 fn.arguments獲取調用的堆棧
• 增長了保留字段（如：protected、static、interface）

三、export命令

模塊功能主要由兩個命令構成：export 和 import。export 命令用於規定模塊的對外接口，import 命令用於輸入其餘模塊提供的功能

另一個模塊就是一個獨立的文件。該文件內部的全部變量，外部沒法獲取。若是你但願可以再外部讀取某個模塊內部的變量，那麼就須要使用 export 輸出該變量。以下：

export function test() {
    console.log('export')
}

或者

let test = 'test'

export { test }
複製代碼

第一種方法是直接輸出該變量，第二種這是一次性輸出一組變量。可根據狀況酌情使用。

一般狀況下，export輸出的是變量自己的名字，若是想重命名的話，能夠經過 as 關鍵字。

function a () {}
function b () {}

export {
    a as a1,
    b as b1
}
複製代碼

敲黑板： export 規定的是對外的接口，必須與模塊內部的變量創建一一對應關係。

export 1 // 報錯
var m = 1 
export m // 報錯

export const m = 1 // 正確
export(const m = 1) // 正確
const n = 1
export {n as m} // 正確

function a(){}
export a    // 報錯

export function a() {} // 正確
export(a)   //正確
複製代碼

export 命令能夠出如今模塊的任何位置，只要處於模塊頂層就能夠。若是處於塊級做用域中就會報錯。

四、import命令

使用了export 輸出模塊定義的接口以後可使用 import 加載這個模塊。

a.js
export function test() {}

b.js
import test from 'a.js'

// 爲 test 從新定義名字
import {test as ttt} from 'a.js'
複製代碼

若是有多個接口能夠一行引入
import {a, b, c} from 'a'

import 'a'  // 加載a中全部模塊
複製代碼

敲重點： import 輸入的變量都是隻讀的，由於它的本質是輸入接口。也就是說，不容許在加載模塊的腳本里改寫接口。

五、模塊的總體加載

除了指定加載某個輸出值，還可使用總體加載，即用 星號 （*）指定對象，全部輸出值都加載在這個對象上面。以下：

通常寫法

a.js 中
export function add (num) {
    return num = num * num
}
export function put (name) {
    retrun name = name + 'hh'
}
// 引用
import {add, put} from 'a'
console.log(add(3), put('put'))
複製代碼

總體加載

import * as go from 'a'
console.log(go.add(3), go.put('put'))
複製代碼

六、export default

在上面能夠看出，使用 import 命令的時候，用戶須要知道所要加載的變量名或函數名，不然沒法加載。若是想快速的加載模塊，在這裏可使用 export default, 爲模塊指定默認輸出。

export default function () {
    console.log('hahha')
}

import hhh from 'a' // 引用的時候能夠指定任意名字
複製代碼

非匿名函數

export default function hah(){
    console.log('哈哈')
}

// 或者

function hah(){
    console.log('hah')
}
export default hah
import hah from 'a'

// 也能夠更換名字
import {b as a } import 'a'
複製代碼

敲黑板：

// defautl 方式輸出 import 引入的時候變量名直接寫
export default function aa(){}
import aa form 'a'

// 非defautl 方式輸出 import 引入的時候變量名需加花括號
export function aa(){}
import {aa} form 'a'
複製代碼

export default 命令用於指定模塊的默認輸出。顯然，一個模塊只能有一個默認輸出。所以 export default 命令只能使用一次。因此 import引入的時候 方法名纔不須要加括號。

七、export 與 import 的複合寫法

若是在一個模塊中，先輸入後輸出同一個模塊

export { c, b } from 'a';

// 能夠簡單理解爲
import { c, b } from 'a';
export { c, b };
複製代碼

重學js系列

重學js之JavaScript簡介

重學 JS 之在 HTML 中使用 JavaScript

重學js之JavaScript基本概念（上）=> 數據類型

重學js之JavaScript基本概念（中）=> 操做符

重學js之JavaScript基本概念（下）=> 運算符

重學js之JavaScript變量、做用域和內存問題

重學js之JavaScript引用類型

重學js之JavaScript 面向對象的程序設計（建立對象）

重學JavaScript之面向對象的程序設計 => 繼承

重學JavaScript之匿名函數

重學JavaScript之window

ES6入門系列

ES6入門之let、cont

ES6入門之變量的解構賦值

ES6入門之字符串的擴展

ES6入門之正則的擴展

ES6入門之數值的擴展

ES6入門之函數的擴展

ES6入門之數組的擴展

ES6入門之對象的擴展

ES6入門之Symbol

ES6入門之Set 和 Map

Es6入門之proxy

ES6入門之Promise對象

Git教程

前端Git基礎教程

Python玩轉微信

Python 實現微信自動經過好友添加請求！！！

Python + Wxpy 實現微信防撤回。

Python獲取好友地區分佈及好友性別分佈