码迷,mamicode.com
首页 > 其他好文 > 详细

es6(六):module模块(export,import)

时间:2017-12-21 19:37:11      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:方案   function   es6   后缀   无法   text   括号   依赖   引用   

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属性:

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

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

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

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

 

export:导出变量,函数,类等

第一种写法:

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}
还可以用as重命名,类似sql语句
1 export {name1 as a,age1 as b}
 
注意下面这种情况:
1 let a1=function (){}
2 // export a1//错误的写法
3 export {a1}
也就是说export时要提供对外的接口
1 export function f(){}//正确写法
2 function f1(){}
3 // export f1//错误写法

 

同时注意:export必须放在模块顶层,不得放入块级作用域内(报错),因为无法做静态优化;
 
export default可以用在匿名函数之前;当然也可以放在不是匿名函数之前
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后缀,所以建议任何时候都加上后缀
同理import导入时也可以用as重命名:
1 import {name1 as a1}
 
同时由于import是静态执行,所以不得对import使用表达式、变量等操作;因为这些都是在运行时执行,并不是编译时(静态)执行

es6(六):module模块(export,import)

标签:方案   function   es6   后缀   无法   text   括号   依赖   引用   

原文地址:http://www.cnblogs.com/why-not-try/p/8081780.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!