《深入理解 ES6》筆記 — 模組

position_柚子發表於2017-08-19
筆記

什麼是模組

自動執行在嚴格模式下並且沒有辦法退出執行的 JavaScript 程式碼。在模組的頂部， this 的值是 undefined；模組不支援 HTML 程式碼風格的程式碼註釋。模組僅匯入和匯出你需要的繫結。

匯出

用 export 匯出


 // 匯出資料
 export const NAME = "柚子";

  // 這個 age 變數是此模組私有的
 let age = 18;

  // 匯出函式
 export function add(a, b) {
     return a + b;
 }

 function subtract(a, b) {
     return a - b
 }
  // 匯出引用
 export subtract;複製程式碼

任何未顯式匯出的變數、函式或類都是模組私有的，外部無法訪問。

匯入

用 import 匯入

語法：

 import { NAME, add, subtract } from './example.js';
 // 此語句的含義是，從 example.js 檔案中匯入需要的識別符號。
 // 可以匯入一個或多個

 add(1, 2) // 3

 NAME = 1; // 拋錯，不能給匯入的繫結重新賦值複製程式碼

匯入整個模組

    import * as example from './example.js';

    cconsole.log(example.NAME); // 柚子
    example.add(1, 2) // 3複製程式碼

這種匯入格式被稱為名稱空間匯入；在 example.js 檔案中不存在 example 物件，所以它作為 example.js 中所有匯出成員的名稱空間物件而被建立。

  import { NAME } from './example.js';
  import { add } from './example.js';
  import { subtract } from './example.js';複製程式碼

不管 import 語句中把一個模組寫了幾次，該模組都只會執行一次。

注意： export 語句不允許出現在 if 語句中，也不能在一條語句中使用 import，只能在頂部使用它。

 if(isTrue) {
     export add; // 這樣寫會報錯
 }
 function importSomething() {
     import { add } from './example.js'; // 這樣寫會報錯
 }複製程式碼

重新命名

通過 as 關鍵字來指定函式在模組外應該被叫做什麼名字

 // example.js
function sum(a, b) {
    return a + b
}
export { sum as add }; // 這裡 sum 是本地名稱，add 是匯出時使用的名稱

// app.js
import { add } from './example.js';
// 在匯入的時候，必須要使用 add複製程式碼

也可以這樣寫

// example.js
export function sum(a, b) {
    return a + b
}

// app.js
import { sum as add } from './example.js';
// 在匯入時用 add 來重新命名 sum

add(1, 2) // 3複製程式碼

預設值

每個模組只能有一個預設的匯出值。
default 表示這是一個預設的匯出。

// 匯出預設值
export default function(a, b) {
    return a + b;
}複製程式碼

也可以是：

// 匯出預設值
function sum(a, b) {
    return a + b;
}
export default sum;複製程式碼

如果要匯入預設值的話，就不能加大括號了：

import sum from './example.js';複製程式碼

如果檔案中既有預設值，也有非預設值：

 export let age = 18;

 export default function(a, b) {
     return a + b;
 }複製程式碼

那麼匯入的時候就需要這樣寫：

import add, { age } from './example.js';
// 在 import 語句中，預設值必須排在非預設值之前複製程式碼

結尾

所以，看完了上面的解析之後，現在知道下面的寫法是什麼意思了吧。

import React, { Component, PropTypes } from 'react';

export default class App extends Component {

}複製程式碼

相關文章