深刻理解ES6之《用模块封装代码》

什么是模块

模块是自动运行在严格模式下而且没有办法退出运行的Javascript代码

1. 在模块的顶部this的值是undefined
2. 其模块不支持html风格的代码注释
   除非用default关键字，不然不能用这个语法导出匿名函数或类

任何未显示导出的变量、函数或类都是模块私有的，没法从模块外部访问

import {identifier1,identifier2} from './example.js'

import大括号表示给定模块导入的绑定，文件必须把文件扩展名也加上扩展名
导入绑定的列表看起来与解构对象很类似，但它不是
当从模块中导入一个绑定时，它就好像使用const定义的同样
无论是在import语句中把一个模块写了多少次，该模块将只招待一次。导入模块的代码执行后，实例化过的模块被保存在内存中，只要另外一个import语句引用它就能够重复使用它
export和import的一个重要的限制是它们必须在其它语句和函数以外使用，也就是说不容许出如今if语句中，不能有条件导出或以任何方式动态导出。模块语法存在的一个缘由是让js引擎静态肯定哪些能够导出，所以只能在模块顶部使用export
export、import均可以用as来重命名导出的函数名
为默认导出值指定标识符指定重命名语法：

function sum(num1, num2) {
  return num1 + num2
}
//export default sum
export { sum as default }

看下面这个例子：

export let color = 'red'
export default function (num1, num2) {
  return num1 + num2
}


import sum,{color} from './example.js'

import 和export 组合使用

export {sum as add } from './example.js'

<script type="module"执行时自动应用defer属性，模块文件开始下载，直到文档被彻底解析模块才会执行，模块按照它们出如今html文件中的顺序执行
async属性也能够应用在模块上，async属性会让模块以相似于脚本的方式执行，惟一的区别是在模块执行前，模块中全部的导入资源必须下载下来，这能够确保只有当模块招待所需的全部资源都下载完成后才执行模块，但不能保证是模块的招待时机

浏览器模块说明符解析

1. 以/开头的解析为以根目录开始
2. 以./开头的解析为以当前目录开始
3. 以../开头的解析为从父目录开始