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

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使用表达式、变量等操作;因为这些都是在运行时执行,并不是编译时(静态)执行

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极客生活

数据分析Excel之去重

默认是所有列对比,也就是将所有列看成一个元组,全都相同才算重复。 比如上图中,由于「全选」,只有一个重复值就是20行和21行,点击「删除重复项」即可。

8510
来自专栏机器学习从入门到成神

Spring使用p名称空间配置属性

Spring的p标签是基于XML Schema的配置方式,目的是为了简化配置方式。

16610
来自专栏搞前端的李蚊子

Vue-cli搭建完项目,各文件解释

脚手架vue-cli搭建完成后,会生成一些文件,总结学习一下这些文件是做什么用的: 1、一级目录: build和config文件夹是wbepack配置的文件夹;...

35860
来自专栏不想当开发的产品不是好测试

gitignore 使用

在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如无,则需自己手工建立此文件)。这个文件每一...

205100
来自专栏菩提树下的杨过

进程与线程

一般来讲,当启动一个应用程序时,系统里就生成了一个进程, 这个进程拥有自己的内存空间。(我们平时用windows的任务管理器看到的也就是进程) 但也有特殊:比如...

199100
来自专栏JavaEdge

JVM性能调优实战(一) - 基于JDK命令行的监控1 JVM的参数类型2 查看JVM运行时参数3 jstat查看JVM统计信息GC

7010
来自专栏ImportSource

厕读:每日一题,面试无忧

9. volatile关键字是否能保证线程安全?() 答案:不能 解析:volatile关键字用在多线程同步中,可保证读取的可见性,JVM只是保证从主内存加载到...

335100
来自专栏Java 技术分享

Hibernate Session总结

34880
来自专栏Java 技术分享

Hibernate Session总结

14360
来自专栏大数据

scrapy如何顺序执行多个爬虫

scrapy如何单线程顺序执行多个爬虫,刚开始我天真的以为将多个excute顺序罗列就能依次执行每个爬虫了,代码如下所示: ? 谁料,在执行完第一个爬虫之后,...

703100

扫码关注云+社区

领取腾讯云代金券