注:模块是自动运行在严格模式下并且没有办法退出运行的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文件(这个要考虑跨域)