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');