es6(六):module模块(export,import)
<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}
export {name1 as a,age1 as b}
let a1=function (){}
// export a1//错误的写法
export {a1}
export function f(){}//正确写法
function f1(){}
// export f1//错误写法
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 {name1 as a1}
es6(六):module模块(export,import)的更多相关文章
- (转)关于ES6的 模块功能 Module 中export import的用法和注意之处
关于ES6的 模块功能 Module 中export import的用法和注意之处 export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一 ...
- 关于ES6的 模块功能 Module 中export import的用法和注意之处
export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一个默认输出,因此export deault命令只能使用一次.所以,import命令后 ...
- ES6 模块export import
在 ES6 前, 实现模块化使用的是 RequireJS 或者 seaJS(分别是基于 AMD 规范的模块化库, 和基于 CMD 规范的模块化库).ES6 引入了模块化,其设计思想是在编译时就能确定模 ...
- ES6学习笔记八(module模块export)
1.导出export,导入import组合 知识点1:导出export lesson2.js export let A=; export function test(){ console.log('t ...
- ES6中的模块
前面的话 JS用"共享一切"的方法加载代码,这是该语言中最容出错且容易令人感到困惑的地方.其他语言使用诸如包这样的概念来定义代码作用域,但在ES6以前,在应用程序的每一个JS中定义 ...
- ES6 模块化(Module)export和import详解 export default
ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记 ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- 在浏览器中使用ES6的模块功能 import 及 export
感谢英文原作者 Jake Archibald 的技术分享 各个浏览器对于ES6模块 import . export的支持情况 Safari 10.1. Chrome 61. Firefox 54 – ...
- JavaScript ES6 module 模块
在使用JavaScript开发大型项目时,模块开发概念是一个必须考虑的问题.其目的就是通过命名空间对各类业务对象进行一定的封装,防止命名冲突. 本篇着重介绍ES6 module中的export和imp ...
随机推荐
- UNIX环境高级编程——sigqueue、sigsuspend函数
一.sigqueue函数 功能:新的发送信号系统调用,主要是针对实时信号提出的支持信号带有参数,与函数sigaction()配合使用. int sigqueue(pid_t pid, int sig, ...
- pig的内置函数小总结(不全)
piggybank里面有很多函数,可以用register和define调用.也可以用java仿照piggybank自行开发. 比如读sequence二进制文件,可以用piggybank里面函数Sequ ...
- 分布式进阶(五)之JSVC配置
应用场景:在linux系统上进行项目开发,在部署java项目时,常用方法就是写一个shell脚本,但当服务器重启了,经常会忘了启动shell脚本了.所以我们需要把自己的应用变成linux的服务,当服务 ...
- Android进阶(十)Android 发邮件
最近在做的APP涉及到发邮件,总结如下: 在android里进行邮件客户端开发可以有两种方式: 在邮件客户端的设计中,可以采用两种方法. 一种是调用android系统自带的邮件服务 优点:这种方法比较 ...
- C++ Primer 有感(重载操作符)
1.用于内置类型的操作符,其含义不能改变.也不能为任何内置类型定义额外的新的操作符.(重载操作符必须具有至少一个类类型或枚举类型的操作数.这条规则强制重载操作符不能重新定义用于内置类型对象的操作符的含 ...
- 《java入门第一季》之好玩的正则表达式
先不通过正则表达式来判断输入的qq号码是否正确. import java.util.Scanner; /* * 校验qq号码. * 1:要求必须是5-15位数字 * 2:0不能开头 * * 分析: * ...
- 学习pthreads,管理线程的栈
进程的地址空间分成代码段,静态数据段,堆和栈段.线程栈的位置和大小是从它所属的进程的栈中切分出来的.每个栈必须足够大,以容纳所有对等线程的函数的执行以及它们将会调用的例程链.或许你会问为什么要进行线程 ...
- Android官方技术文档翻译——Gradle 插件用户指南(4)
最近赶项目,白天基本没时间,只有晚上在家的时候才能看一看.昨天晚上只翻译完了第四章,今天就只发第四章吧. 本文译自Android官方技术文档<Gradle Plugin User Guide&g ...
- TrueType和Bitmap字体的区别
只要标签的文本从不变化,在cocos2D中渲染TrueType和bitmap字体的性能是相同的.它们都仅仅像精灵那样绘制. 如果你希望大量的标签使用相同字体,则bitmap字体将更快.因为bitmap ...
- Android性能优化典例(一)
在Android开发过程中,很多时候往往因为代码的不规范.api使用不恰当.控件的使用场景考虑不全面和用户不恰当的操作等都能引发一系列性能问题的,下面就是我目前整理的一些Android开发过程中需要注 ...