《深刻理解 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 {

}复制代码