ES6規範

瀏覽器中使用ES6 Module script的type必須寫上module
<script type="module">
import {a} from '../static/module.js';
console.log(a);
</script>

<!-- 或者 -->
<script src="../static/import.js" type="module"></script>

形式一
使用export導出的變量 import後面必須跟{}
index.html
<script type="module">
import {area} from './circle.js';
console.log(area(1)); //3.141592653589793
</script>

circle.js
export function area(radius){
return Math.PI * radius * radius;
}

export function circle(radius){
return 2 * Math * PI *radius;
}

形式二(export導出變量)
circle.js
export var m = 1;
index.html
<script type="module">
import {m} from './circle.js';
console.log(m);
</script>

形式三
circle.js
export function area(radius){
return Math.PI * radius * radius;
}
index.html
import {area as a} from './circle.js';
console.log(a(1));

形式四
circle.js
function area(radius){
return Math.PI * radius * radius;
}
export {area as a};
index.html
import {a} from './circle.js';
console.log(a(1));

形式五
circle.js
function area(radius){
return Math.PI * radius * radius;
}
export {area as a};
index.html
import {a as area} from './circle.js';
console.log(area(1));

形式六
下面的import命令能夠用任意名稱指向 circle的輸出方法,這時就不須要知道模塊輸出的函數名,
須要注意的是這時的import命令後面不使用大括號 export default只能使用一次
circle.js
export default function () {
console.log('123');
}
index.html
<script type="module">
import custom from './circle.js';
console.log(custom()); //123
</script>

 

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

//方法一
export var firstName = 'pittle';
export var lastName = 'zjy';
export var year = 1999;

//方法二與上面的方法相同 但優先使用方法二(這樣就能夠在腳本尾部一眼看清楚全部變量)

var firstName = 'pittle';
var lastName = 'zjy';
var year = 1999;
export {firstName,lastName,year};

// exports除了能輸出變量還能輸出函數
exports function multiply(x,y){
return x*y;
}
// 上面代碼輸出一個函數
// 正常狀況下export輸出的變量就是原本的名字,可是可使用as關鍵字重命名
function v1(){}
function v2(){}
export {
v1 as funv1,
v2 as funv2,
v2 as funv22
}
// 上面代碼as關鍵字重命名了函數v1和v2的對外接口,重命名後v2能夠用不一樣的名字輸出兩次
//
// 須要特別注意的是，export命令規定的是對外接口 必須與模塊內部的變量創建一一對應的關係

export 1; //報錯
var m = 1; export m; //報錯
//上面的兩種寫法都會報錯,由於沒有提供對外的接口,第一種寫法直接輸出1第二種寫法經過變量m
// 依然直接輸出1,1只是一個值,不是接口
//正確的寫法以下(export輸出變量的時候須要{},import導入的時候也須要{})
(1)var m = 1;export {m};
(2)export var m = 1;
(3)var n = 1; export {n as m};

// -------------------------------------------------
// 注意：export default 對應的import不須要{} export對應的import須要{}
// export default指定模塊的默認輸出,顯然一個模塊只能有一個默認輸出,所以export default命令只能使用一次
// ---------------------------------------------------
export default function crc32(){}; //輸出
import crc32 from 'crc32';//輸入

export function crc32(){}//輸出
import {crc32} from 'crc32' //輸入

// 本質上export default就是輸出一個叫作default的變量或方法
//而後系統容許咱們爲它取任何名字
function add(x,y){
return x*y;
}
export {add as default};
//等同於
export default add;

import {default as xxx} from 'module';
// 等同於
import xxx from 'modules';//注意哦：export default導出的變量沒有加{}哦

// 正是由於export default命令其實只是輸出一個叫作default的變量,因此它後面不能跟
// 變量聲明語句
export var a = 1; //正確

var a = 1;
export default a; //正確

export default var a = 1; //錯誤
// export default a 的含義是將變量a的值賦給變量default

export default 42;//正確 指定對外的接口爲default

export 42;//報錯 沒有指定對外的接口

//有了export default 命令,輸入模塊就很是直觀了,以lodash爲例
import _ from 'lodash';//將lodash庫導入爲_就好像import $ from 'JQuery'
//若是想一條import 語句中同時輸入默認方法和其餘接口,能夠寫成下面這樣
import _,{each,each as forEach} from 'lodash';//each as forEach表示將each重命名爲forEach

// export default 也能夠用來輸出一個類
// Myclass.js
export default class{}
// main.js
import Myclass from "Myclass";
let o = new Myclass

//條件是：若是在一個模塊之中(注意是一個模塊好比lodash) 輸入後輸出同一個模塊,那import和export能夠寫一塊兒
// export 與 import 的複合用法
export { foo,bar } from 'my_module';
// 至關於
import {foo,bar} from 'my_module';
export {foo,bar};

//模塊的接口更名
export {foo as Myfoo} from 'my_module';

//總體輸出
export * from 'my_module';

// 具名接口改默認接口寫法
export {es6 as default} from './someModule';
//等同於
import {es6} from './someModule';
export default es6;

//默認接口改具名接口寫法
export {default as es6} from './someModule'

//下面的3中import 語句沒有複合寫法
import * as someId from 'someModule';
import someId from 'someModule';
import someId,{namedId} from 'someModule';
//爲了作到形式對稱有一個提案 詳情請看es6基礎入門Page469

// 跨模塊常量
// const 聲明的常量只在當前代碼塊內有效.若是想設置跨模塊的常量(跨多個文件);或者說一個值被多個模塊共享,能夠
// 採用下面的方法
//circle.js
export const A = 1;
export const B = 3;
export const C = 4;
//index.html
// <script type="module">
// import * as cons from './circle.js';
// console.log(cons.A); // 1
// </script>

//若是常量特別多能夠創建一個專門的constant目錄,將各類常量寫在不一樣的文件裏面並保存在該目錄下
//constants/db.js
export const db = {
url:'http://www.baidu.com',
admin_user:'admin',
admin_pass:'pass'
}
// constants/user.js
export const users = ['root','admin','staff','ceo'];
//而後將這些文件輸出的常量合併在index.js裏面
//consants/index.js
export {db} from './db';
export {users} from './users';

//最後使用的時候只須要加載index.js就能夠了
//script.js
import {db,users} from './constants'//./constants至關於./constants/index

// import命令加載模塊爲編譯時加載 require是運行時加載
// 編譯時的加載效率高於運行時的加載效率
// 但import沒法在運行時加載模塊

// import()函數出世 能夠用在任何地方 不單單是模塊 非模塊的腳本也可使用// 它是運行時執行,也就是說運行到這一句便會加載指定模塊// 膩歪import()函數與所加載的模塊沒有靜態鏈接關係 這一點也與import語句不相同 // import還有能夠是個函數// 關鍵字import能夠像調用函數同樣來動態的導入模塊。以這種方式調用，將返回一個 promise。import('/modules/my-module.js') .then((module) => { // Do something with the module. });// 這種使用方式也支持 await 關鍵字。let module = await import('/modules/my-module.js');