es6學習筆記-module_v1.0_byKL

es6 學習-module_v1.0

• ES6模塊不是對象，而是經過export命令顯式指定輸出的代碼，輸入時也採用靜態命令的形式。

• ES6的模塊自動採用嚴格模式

• export命令用於規定模塊的對外接口，import命令用於輸入其餘模塊提供的功能。

關於export

//直接導出
export var year = 1958; //導出變量
export function multiply(x, y) { //導出函數
  return x * y;
};

//導出一組變量(屬性,方法)
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

//導出而且重命名
function v1() { ... }
function v2() { ... }

//即便重命名了,原來的也能夠用,至關於加了別名
export {
  v1 as streamV1, //重命名了
  v2 as streamV2,
  v2 as streamLatestVersion //重命名兩次
};

//混合導出,既定義了默認的,也定義了不默認的
export default class Client{
}
export const foo = 'bar';
    //使用的時候能夠分別導入
import Client,{foo} from 'module';

//暴露一個模塊的全部接口
export * from 'module';

//連鎖導出
    //a.js,導出一個函數
export function foo(){}    
    //b.js,b模塊導出全部內容,而這些內容來自a模塊
export * from 'a';
    //app.js,那麼在使用的時候
import { foo } from 'b';

//暴露一個模塊的部分接口
export { test } from 'module';

//暴露一個模塊的默認接口
export { default } from 'module';

• 一個模塊就是一個獨立的文件。該文件內部的全部變量，外部沒法獲取。若是你但願外部可以讀取模塊內部的某個變量，就必須使用 export 關鍵字輸出該變量。

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

• 一個模塊只能有一個默認輸出，所以export default命令只能使用一次

• export * 命令會忽略模塊的default方法

關於import

//直接導入,而且輸入到不一樣的變量裏面,這些變量名須要跟導入源一致
import {firstName, lastName, year} from './profile';
  //導入以後就能夠直接使用了
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

//直接導入,不過沒有寫路徑
import {myMethod} from 'util';

//直接導入並重命名,主要是爲了方便
import { lastName as surname } from './profile';

//不引入接口,僅運行模塊代碼
import 'XXXmodule'

//由於default是關鍵字,導入的時候不能直接使用,須要改一下名字,用as改
import { default as xxx } from 'modules';
    //至關於,xxx是一個新的名字,可以代替導入模塊
import xxx from 'module'

//以lodash模塊舉例,他的default是_,非default有一個each接口,能夠同時導入
import _, { each } from 'lodash';

• import命令具備提高效果，會提高到整個模塊的頭部

• import後面的from指定模塊文件的位置，能夠是相對路徑，也能夠是絕對路徑，.js路徑能夠省略。若是隻是模塊名，不帶有路徑，那麼必須有配置文件，告訴 JavaScript 引擎該模塊的位置。

• import是靜態執行,也是編譯前執行的,因此不能使用表達式和變量，這些只有在運行時才能獲得結果的語法結構。

• 屢次執行同一個import的話,只會執行一次

• import 不能導入*,要用as更名

複合寫法

若是在一個模塊之中，先輸入後輸出同一個模塊，import語句能夠與export語句寫在一塊兒。

export { es6 as default } from './someModule';
// 等同於
import { es6 } from './someModule';
export default es6;

模塊繼承

// circleplus.js
    //* 導出circle的全部,可是會忽略default
export * from 'circle';
export var e = 2.71828182846; //自定義了一個e變量導出
export default function(x) { //自定義了一個default導出,由於 * 忽略了default,若是須要導出的話,須要本身補一個
  return Math.exp(x);
}

// main.js
    //導入了circleplus模塊的全部,不過* 同樣會忽略了default
import * as math from 'circleplus'; //將circleplus所有導入並更名爲math
import exp from 'circleplus'; //導入了circleplus的default
//exp就是導入的默認default 函數
console.log(exp(math.e)); //math就是circleplus,因此能夠調用變量e

跨模塊常量

const聲明的常量只在當前代碼塊有效。若是想設置跨模塊的常量（即跨多個文件），或者說一個值要被多個模塊共享，能夠採用下面的寫法。

// 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 {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3

若是要使用的常量很是多，能夠建一個專門的constants目錄，將各類常量寫在不一樣的文件裏面，保存在該目錄下。

// constants/db.js
export const db = {
  url: 'http://my.couchdbserver.local:5984',
  admin_username: 'admin',
  admin_password: 'admin password'
};

// constants/user.js
export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];
而後，將這些文件輸出的常量，合併在index.js裏面。

// constants/index.js
export {db} from './db'; //使用一箇中轉模塊(文件)來收集這些常量模塊
export {users} from './users';
使用的時候，直接加載index.js就能夠了。

// script.js
import {db, users} from './constants';

須要注意的是,單純es6語法並不能很簡單的測試,須要使用babel-node這樣的支持徹底的es6語法的解析器才能解析,詳情能夠參考一下:(http://es6.ruanyifeng.com/#do...

參考引用:

1. ranyifeng的es6入門 我是買了實體書而後再看電子版的

2. es實戰2015