用模块封装代码
在模块顶部创建的变量不会自动被添加到全局共享作用域（模块顶部this的值为undefined），必须导出后，外部代码才可访问。
浏览器中使用模块
<script>的type属性缺失或者包含一个javascript内容类型（如，text/javascript）时作为脚本加载；type属性值为“module”时支持模块加载（如果浏览器不支持，会自动向后兼容）。
<script type="text/javascript">
var a = 'a';
</script>
<script type="module">
var b = 'b';
</script>
<script>
console.log(window.a); // a
console.log(window.b); // undefined
</script>
注意：type="module"会自动应用defer属性。
也可将模块作为Worker加载，let worker = new Worker("module.js", {type: "module"})。Worker脚本只能从引用的网页相同的源加载；Worker模块不会完全受限（可以加载并访问具有适当的跨域资源共享头的文件）
导出
- 导出的函数和类声明需要有一个名称，除非用default关键词，否则不能导出匿名函数或类。同时需要注意导出变量名或者函数名称需要增加
{}
const foo = 'bar';
export foo; // Error Unexpected token, expected {
export {foo}; // Correct
- 导入、导出时可以进行重命名
export { sum as add }
import { add as sum }- 一个模块只能设置一个默认导出值
导入
- import必须包含导入的标识符和从哪个模块导入。注意，导入绑定的列表看起来与解构对象很相似，但其作用不一样，其更像是使用const定义一样。
import { identifier1, identifier2} from './example.js'
identifier1 = 1; // Error为了兼容更多浏览器和Node环境，导入模块路径之前要包含/、./、../来表示导入的文件
- 导入整个模块，然后所有导出都可以作为对象（命名空间）的属性使用
import * as example from './example.js'
example.identifier1;
- 不管在import语句中把一个模块写了多少次，该模块只执行一次。导入模块的代码执行后，实例化过的模块被保存在内存中，其他import语句可以重复使用它。如果一个应用程序中的其他模块也对同一模块导入，那么这些模块使用相同的导入实例，这就是util.js中new Vue()全局通用的原因（在Vue项目中文名经常会借助此实现兄弟组件传值）！
import { identifier1 } from './example.js'
import { identifier2 } from './example.js'上述example只被加载一次！
/*person.js*/
var name = 'ligang'
function setName(newName) {
name = newName;
}
export {setName, name};
<!--person1.vue-->
<template>
<div>
<p>{{name}}</p>
<button @click="setName">设置名称</button>
</div>
</template>
<script>
import {name, setName} from './person.js'
export default {
data() {
return {
name: name
}
},
methods: {
setName() {
// name = 'lg';
setName('lg')
}
}
}
</script>
<!--person2.vue-->
<template>
<div>
<p>{{name}}</p>
</div>
</template>
<script>
import {name} from './person.js'
export default {
data() {
return {
name: name
}
}
}
</script>
在person1.vue中点击“设置名称”按钮，切换到person2.vue，name名称会变为‘lg’！注意，不能在person1.vue中直接修改name，因为import语句为变量、函数和类创建的是只读绑定，而不是像正常变量一样简单地引用原始绑定！
- import语句中默认值必须放到非默认值前面
import sum, {color} from './example.js'上述，sum为默认值，color为非默认值
- 无绑定导入，只执行代码，常用于创建polyfill和shim
import './example.js'