zoukankan      html  css  js  c++  java
  • js-ES6学习笔记-module(4)

    1、<script>标签打开deferasync属性,脚本就会异步加载。渲染引擎遇到这一行命令,就会开始下载外部脚本,但不会等它下载和执行,而是直接执行后面的命令。

    deferasync的区别是:前者要等到整个页面正常渲染结束,才会执行;后者一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。一句话,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、在静态分析阶段,一个模块脚本只要有一行importexport语句,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。 

  • 相关阅读:
    一个数组中去除某一部分数组
    关于函数的同步异步
    多维数组转一维数组
    关于Promise的详细总结
    关于ES6(ES2015)的知识点详细总结
    vue实现一个会员卡的组件(可以动态传入图片(分出的一个组件)、背景、文字、卡号等)
    GitHub上常用命令(工作中几乎每天用到的命令)
    gitHub上如何设置或者取消电子邮箱提醒
    React评论展示案例(包含知识点:state、props、ref、React声明周期、localStorage本地存储等)
    感想2-对于组件化的一些思考
  • 原文地址:https://www.cnblogs.com/zczhangcui/p/6574877.html
Copyright © 2011-2022 走看看