《深刻理解 ES6》筆記 — 模塊

什麼是模塊

自動運行在嚴格模式下而且沒有辦法退出運行的 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 {

}複製代碼