ES6的模块一些要点

注：模块是自动运行在严格模式下并且没有办法退出运行的JavaScript代码。

 

模块中的变量，函数或类声明尽在模块的顶级作用于中存在，

必须导出才能使用。

在模块的顶部，this的值是undefined；

 

导出语法

//导出数据
export var a=1;
export let b="2";
export const c=3;

//导出函数
export function sum(a,b){
    return a+b;
}
//导出类
export class Rectangle{
    constructor(length,width)
        this.length=length;
        this.width=width;
}

//不标注export的函数是模块私有的
function(){}

//定义一个函数...
function test(){}

//将它导出
export test;

 

导入语法

import * as example form "./example/js";


//导入导出重命名
function sum(a,b){
    return a+b;
}

export {sum as add};


import {add as sum} from ......


//模块默认值
//导出
export default function(a,b){
    return a+b;
}
//导入   ，一个模块只能设置一个默认导出， 默认  的导入 不用大括号，且必须在大括号前
import sum,{color} from .......


//重新绑定一个绑定
import {sum} from ....
export {sum}
//也可以写成
export {sum} from ....

 

模块语法限制

export 和 import 必须在其他语句和函数之外使用，

如if语句， function 

不可以动态地导入或导出绑定，

关键词被设计成静态的，可以被文本编辑器识别。

 

无绑定导入

用于修改全局作用域中的对象，建议自查。

 

加载模块

默认是文件顺序加载，

设置script标签的type为module ，一些不兼容的浏览器会默认为text/javascript

设置为async的话就按下载完成的顺序加载。

模块的加载会，按依赖全部下载完成再运行。

必须有明确的开头才能解析地址 ./ / ../

 

在web浏览器中使用模块的方法

1.script标签修改src

2.javascript代码内嵌到没有src的script标签

3.通过web worker 或 service worker 的方法加载并执行javascript文件（这个要考虑跨域）