es6（六）：module模块（export，import）

es6之前，社区模块加载方案，主要是CommonJS(用于服务器)和AMD(用于浏览器)

而es6实现的模块解决方案完全可以替代CommonJS和AMD

ES6模块设计思想：尽量静态化，在编译时就能确定模块的依赖关系，以及输入输出的变量

而CommonJS和AMD模块，都只能在运行时确定这些东西

 

同时：模块中使用的是严格模式

<script type="module" src="es7-1.js" ></script>
  <script type="module" src="es7-2.js" ></script>
  <!-- 页面渲染完成再去加载，相当于设置了defer，不会造成浏览器阻塞 -->

用script引入模块文件时，需要加上type="module"

 

这里补充一下defer和async属性：

<script src="a.js" async></script>

设置了async属性后，浏览器加载页面的过程是：渲染引擎开始渲染，发现设置async属性的脚本，继续渲染，同时下载脚本，当脚本下载完成，渲染引擎将浏览器控制权脚本JS引擎，执行脚本。因为可能会遇见多个脚本，同时脚本的下载时间有长有短，所以脚本执行顺序可能不是脚本书写的顺序！

设置defer属性，浏览器的工作情况：前面与上面类似，不过当发现脚本，渲染引擎会继续渲染页面，直到页面渲染完成，再将浏览器控制权交给JS引擎，执行脚本；所以脚本执行顺序与脚本书写的顺序一致。这种与在页面底部引入的脚本文件作用类似！

如果均未设置以上属性，浏览器工作情况：渲染引擎开始渲染，发现脚本，将浏览器控制权脚本js引擎，下载脚本，执行脚本，结束后JS引擎再将浏览器控制权交给渲染引擎，渲染引擎继续渲染。。。

 

export：导出变量，函数，类等

第一种写法：

export let name='apple'
export let age=100
export let year=2017

第二种写法：更推荐（在最下面使用export导出，能看出究竟哪些变量或其他类型被导出，更直观）

let name1='apple'
let age1=100
let year1=2017
export {name1,age1,year1}

还可以用as重命名，类似sql语句

export {name1 as a,age1 as b}

 

注意下面这种情况：

let a1=function (){}
// export a1//错误的写法
export {a1}

也就是说export时要提供对外的接口

export function f(){}//正确写法
function f1(){}
// export f1//错误写法

 

同时注意：export必须放在模块顶层，不得放入块级作用域内(报错),因为无法做静态优化;

 

export default可以用在匿名函数之前；当然也可以放在不是匿名函数之前

export default function(){}
// 而导入时，可以import abc from './es7-2' 注意此时的abc没有用大括号括起来，abc可以为任意有效变量名
// 总体来说export default后， import后面可以加上任意变量名，比较方便

 

import：当export导出了模块的对外接口，此时就可以用import导入接口(加载导出的模块)

import {name1,age1,year1} from './es7-1.js'
console.log(name1,age1,year1)//apple 100 2017
// form后面路径可以是相对路径也可以是绝对路径，.js后缀可以省略
// 但是我开apache时，省略js报错了，同时如果script是行内引用的话，必须加.js后缀，所以建议任何时候都加上后缀

同理import导入时也可以用as重命名:

import {name1 as a1}

 

同时由于import是静态执行,所以不得对import使用表达式、变量等操作；因为这些都是在运行时执行，并不是编译时(静态)执行