浏览器环境下 ES6 的 export, import 的用法举例

有两个地方需要注意。一是 export 和 import 要配合使用，模块内还可以再引入(import)次级模块。二是要把引入的对象（函数等）赋值给 window.varname，这样才能在 js 块内使用。原因是 module 块是隔离的，它能访问 js 块但 js 块不能访问 module 块。这里说的 module 块，是指处于 <script type="module"> </script> 标签内的代码块。而 js 块是指处于 <script type="text/javascript"></script>标签内的代码块。当然module块和js块都可以有多个（此时各module块及其与js块之间都是互相隔离的，而各 js块则像同一块）。

以下第一段代码是 index.html 的相关部分，这其中设置了一个标志来表示 module 加载是否就绪，因为整个 html 文件在加载时 module 块是稍后完成的。第二段是要引入的 js 模块文件。

1、index.html 部分代码

<script type="module">

import {func1, func2,} from "./tools.js"

window.func1a = func1;

window.func1b = func2;

moduleOk = true;

</script>

<script type="text/javascript">

let moduleOk = false;

if(moduleOk ){

let lca = func1a();

let lcb = func1b();

}

</script>

2、 tools.js 代码

export {func1, func2, };

function func1(){};

function func2(){};

ES6 的 export，import 指令，使得浏览器也能像 node.js 一样拥有很好的模块功能。