<script type="module" src="es7-1.js" ></script> <script type="module" src="es7-2.js" ></script> <!-- 页面渲染完成再去加载,至关于设置了defer,不会形成浏览器阻塞 -->
用script引入模块文件时,须要加上type="module"es6
这里补充一下defer和async属性:sql
1 <script src="a.js" async></script>
设置了async属性后,浏览器加载页面的过程是:渲染引擎开始渲染,发现设置async属性的脚本,继续渲染,同时下载脚本,当脚本下载完成,渲染引擎将浏览器控制权脚本JS引擎,执行脚本。由于可能会碰见多个脚本,同时脚本的下载时间有长有短,因此脚本执行顺序可能不是脚本书写的顺序!apache
设置defer属性,浏览器的工做状况:前面与上面相似,不过当发现脚本,渲染引擎会继续渲染页面,直到页面渲染完成,再将浏览器控制权交给JS引擎,执行脚本;因此脚本执行顺序与脚本书写的顺序一致。这种与在页面底部引入的脚本文件做用相似!浏览器
若是均未设置以上属性,浏览器工做状况:渲染引擎开始渲染,发现脚本,将浏览器控制权脚本js引擎,下载脚本,执行脚本,结束后JS引擎再将浏览器控制权交给渲染引擎,渲染引擎继续渲染。。。服务器
export:导出变量,函数,类等app
第一种写法:async
1 export let name='apple' 2 export let age=100 3 export let year=2017
第二种写法:更推荐(在最下面使用export导出,能看出究竟哪些变量或其余类型被导出,更直观)函数
1 let name1='apple' 2 let age1=100 3 let year1=2017 4 export {name1,age1,year1}
1 export {name1 as a,age1 as b}
1 let a1=function (){} 2 // export a1//错误的写法 3 export {a1}
1 export function f(){}//正确写法 2 function f1(){} 3 // export f1//错误写法
1 export default function(){} 2 // 而导入时,能够import abc from './es7-2' 注意此时的abc没有用大括号括起来,abc能够为任意有效变量名 3 // 整体来讲export default后, import后面能够加上任意变量名,比较方便
import:当export导出了模块的对外接口,此时就能够用import导入接口(加载导出的模块)优化
1 import {name1,age1,year1} from './es7-1.js' 2 console.log(name1,age1,year1)//apple 100 2017 3 // form后面路径能够是相对路径也能够是绝对路径,.js后缀能够省略 4 // 可是我开apache时,省略js报错了,同时若是script是行内引用的话,必须加.js后缀,因此建议任什么时候候都加上后缀
1 import {name1 as a1}