js-ES6学习笔记-module(4)
1、<script>
标签打开defer
或async
属性,脚本就会异步加载。渲染引擎遇到这一行命令,就会开始下载外部脚本,但不会等它下载和执行,而是直接执行后面的命令。
defer
与async
的区别是:前者要等到整个页面正常渲染结束,才会执行;后者一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。一句话,defer
是“渲染完再执行”,async
是“下载完就执行”。另外,如果有多个defer
脚本,会按照它们在页面出现的顺序加载,而多个async
脚本是不能保证加载顺序的。
2、浏览器加载 ES6 模块,也使用<script>
标签,但是要加入type="module"
属性。
浏览器对于带有type="module"
的<script>
,都是异步加载,不会造成堵塞浏览器,即等到整个页面渲染完,再执行模块脚本,等同于打开了<script>
标签的defer
属性。
3、对于外部的模块脚本,有几点需要注意。
- 代码是在模块作用域之中运行,而不是在全局作用域运行。模块内部的顶层变量,外部不可见。
- 模块脚本自动采用严格模式,不管有没有声明
use strict
。 - 模块之中,可以使用
import
命令加载其他模块(.js
后缀不可省略,需要提供绝对 URL 或相对 URL),也可以使用export
命令输出对外接口。 - 模块之中,顶层的
this
关键字返回undefined
,而不是指向window
。也就是说,在模块顶层使用this
关键字,是无意义的。 - 同一个模块如果加载多次,将只执行一次。
4、利用顶层的this
等于undefined
这个语法点,可以侦测当前代码是否在 ES6 模块之中。
5、讨论 Node 加载 ES6 模块之前,必须了解 ES6 模块与 CommonJS 模块完全不同。
它们有两个重大差异。
- CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
- CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
6、在静态分析阶段,一个模块脚本只要有一行import
或export
语句,Node 就会认为该脚本为 ES6 模块,否则就为 CommonJS 模块。如果不输出任何接口,但是希望被 Node 认为是 ES6 模块,可以在脚本中加一行语句export {};
。
7、ES6 模块之中,顶层的this
指向undefined
;CommonJS 模块的顶层this
指向当前模块,这是两者的一个重大差异。
8、Node 采用 CommonJS 模块格式,模块的输出都定义在module.exports
这个属性上面。在 Node 环境中,使用import
命令加载 CommonJS 模块,Node 会自动将module.exports
属性,当作模块的默认输出,即等同于export default
。
转载于:https://www.cnblogs.com/zczhangcui/p/6574877.html
js-ES6学习笔记-module(4)相关推荐
- ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- ES6学习笔记(五):轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
- ES6学习笔记04:Set与Map
ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...
- es6学习笔记-顶层对象_v1.0_byKL
es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象 顶层对象,在浏览器环境指的是window对象,在Node指的是global对象. ES5之中,顶层 ...
- JS逆向学习笔记 - 持续更新中
JS逆向学习笔记 寻找深圳爬虫工作,微信:cjh-18888 文章目录 JS逆向学习笔记 一. JS Hook 1. JS HOOK 原理和作用 原理:替换原来的方法. (好像写了句废话) 作用: 可 ...
- Node.js+mongodb 学习笔记(三)swagger注释+用户管理
Node.js+mongodb 学习笔记(三)swagger注释+用户管理 Node.js+mongodb 学习笔记(三)swagger注释+用户管理 用户注册 用户登录 修改密码 swagger注释 ...
- ES6学习笔记二arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- js/jquery学习笔记
javascript简介 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言. 不同于服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说Ja ...
- es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
- 【带着canvas去流浪(11)】Three.js入门学习笔记
[摘要] three.js 入门学习笔记 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 资料推荐及建议 1.官方文档 很详细,但是API部分单独 ...
最新文章
- 安全与透明:智能互联网的基石
- CNN已老,GNN来了:重磅论文讲述深度学习的因果推理
- BlogEngine.Net架构与源代码分析系列(转载)
- python连接mongo_Python连接MongoDB操作
- C++ algorithm库中的几个常用函数(swap,reverse,sort)
- 工作流实战_19_flowable 任务委派
- 阿里P6Java工程师的学习经历自述,希望新人少走弯路
- 向量距离汇总(连续值与离散值),Latex与Python实现
- Docker 以 docker 方式运行 jenkins
- mfc大观之五、六(消息机制和消息运行)
- 面向对象JavaScript入门——来自Mozilla的官网教程
- sql server 性能调优之 资源等待PAGEIOLATCH
- Android 时间格式转换
- 限制输入框输入(数字、小数点、负号)
- 如何给视频添加水印logo?
- Visual Studio2022 运行代码时“发生生成错误,是否继续并运行上次的成功生成”
- Thinging in Java读后总结
- 做毕设途中遇到了问题,求大神指教。
- 个人站——关于我页面设计
- uni-app无法触发onReachBottom事件
热门文章
- ActiveRecordBase借助NHibernate的条件获取实体类对象
- 二叉树线索化示意图_103-线索化二叉树思路图解
- 32如何向Linux转,linux使用技巧32则
- mysql数据库比对视频教程_MySQL数据库全学习实战视频教程(27讲 )
- windows优化大师怎么用_怎么在电脑上添加一款好用的提醒便签软件?
- html5调用系统声音1s响一次_HTML5声音录制/播放功能的实现代码
- vs2015开发c语言 简书,微软符号服务器_NT_SYMBOL_PATH给VS调试带来的隐藏坑
- android values-v21 style 报错,Android 4.4 以上实现透明导航栏和状态栏 Translucent system bar...
- python 根据地址求经纬度 谷歌_利用google的API获取世界城市经纬度(python实现)
- matlab 坐标轴中心,matlab中怎么将坐标轴改为经纬度坐标轴