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...

參考引用:

ranyifeng的es6入門 我是買了實體書然后再看電子版的

es實戰2015

總結

以上是生活随笔為你收集整理的es6学习笔记-module_v1.0_byKL的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。