模块

HTML 网页中,浏览器通过<script>标签加载 JavaScript 脚本。
<!-- 页面内嵌的脚本 -->
<script type="application/javascript">
// module code
</script> <!-- 外部脚本 -->
<script type="application/javascript" src="path/to/myModule.js">
</script>
上面代码中由于浏览器脚本的默认语言是 JavaScript。
因此type="application/javascript"可以省略。

浏览器同步加载 JavaScript 脚本可能会产生的问题

默认情况下,浏览器是同步加载 JavaScript 脚本.
即渲染引擎遇到<script>标签就会停下来,等JavaScript脚本执行完后,再继续向下渲染。
如果是外部脚本,还必须加入脚本下载的时间。下载完成后,在执行。
如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞。
用户会感觉到浏览器“卡死”了,没有任何响应。这显然是很不好的体验。
然后就出现了异步加载脚本的两种语法

异步加载脚本的两种语法 defer或async

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
上面代码中,<script>标签打开defer或async属性,脚本就会异步加载。
渲染引擎遇到这一行命令,就会开始下载外部脚本,但不会等它下载和执行,而是直接执行后面的命令。

defer 与 async的区别是

defer:要等到整个页面在内存中正常渲染结束(DOM 结构完全生成,以及其他脚本执行完成),才会执行;
async:一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。
一句话,defer是“渲染完再执行”,async是“下载完就执行”。
另外,如果有多个defer脚本,会按照它们在页面出现的顺序加载,而多个async脚本是不能保证加载顺序的。

浏览器加载 ES6 模块

浏览器加载 ES6 模块,也使用<script>标签,但是要加入type="module"属性。
<script type="module" src="./foo.js"></script>
浏览器就知道这是一个es6模块。
浏览器对于带有type="module"的<script>,都是异步加载,不会造成堵塞浏览器。
即等到整个页面渲染完,再执行<script type="module" src="./foo.js"></script>模块脚本
也就是说 type="module" 等价于 defer
如果网页有多个<script type="module">,它们会按照在页面出现的顺序依次执行。

模块引入的注意点

模块之中,可以使用import命令加载其他模块(.js后缀不可省略,需要提供绝对 URL 或相对 URL)。
也可以使用export命令输出对外接口。
同一个模块如果加载多次,将只执行一次。

ES6 模块与 CommonJS 模块的差异

1.ommonJS 模块输出的是一个值的拷贝,输出的是值。ES6 模块输出的是值的引用。
2.CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
3.CommonJS 模块的require()是同步加载模块。ES6 模块的import命令是异步加载,

详细说下他们的第1个差异

CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值。
模块内部的变化就影响不到这个值。请看下面这个模块文件
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
counter: counter,
incCounter: incCounter,
};

上面代码输出内部变量counter和改写这个变量的内部方法incCounter。然后,在main.js里面加载这个模块。

// main.js
var mod = require('./lib');
console.log(mod.counter); // 3
mod.incCounter(); //调用
console.log(mod.counter); // 3
上面代码说明,
lib.js模块加载以后,它的内部变化就影响不到输出的值 mod.counter 了。
这是因为mod.counter是一个原始类型的值,会被缓存。除非写成一个函数,才能得到内部变动后的值。
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
get counter() {
return counter
},
incCounter: incCounter,
}; // main.js
var mod = require('./lib');
console.log(mod.counter); // 3
mod.incCounter(); //调用
console.log(mod.counter); // 4
ES6 模块的运行机制与 CommonJS 不一样。
JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。
等到脚本真正执行时,再根据这个只读引用到被加载的那个模块里面去取值。
换句话说,ES6 的import有点像 Unix 系统的“符号连接”,原始值变了,import加载的值也会跟着变。
因此,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。
还是举上面的例子。
// lib.js
export let counter = 3;
export function incCounter() {
counter++;
} // main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

在举一个小粒子

// m1.js
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500); // m2.js
import {foo} from './m1.js';
console.log(foo);
setTimeout(() => console.log(foo), 500);
上面代码中,m1.js的变量,foo,在刚加载时等于bar,过了 500 毫秒,又变为等于baz。

Node.js 的模块加载方法

JavaScript 现在有两种模块。一种是 ES6 模块,简称 ESM;另一种是 CommonJS 模块,简称 CJS。
CommonJS 模块是 Node.js 专用的,与 ES6 模块不兼容。
语法上面,两者最明显的差异是,CommonJS 模块使用require()和module.exports.
ES6 模块使用import和export。 ps:从 Node.js v13.2 版本开始,Node.js 已经默认打开了 ES6 模块支持。
Node.js 要求 ES6 模块采用.mjs后缀文件名。
也就是说,只要脚本文件里面使用import或者export命令,那么就必须采用.mjs后缀名。
Node.js 遇到.mjs文件,就认为它是 ES6 模块,默认启用严格模式,不必在每个模块文件顶部指定"use strict"。

友情提示

注意,ES6 模块与 CommonJS 模块尽量不要混用。require命令不能加载.mjs文件,会报错。
只有import命令才可以加载.mjs文件。反过来.mjs文件里面也不能使用require命令,必须使用import。

简单说一下他们的第2个差异

第二个差异是因为 CommonJS 加载的是一个对象,通过 module.exports 输出。该对象只有在脚本运行完才会生成。
而ES6 模块不是对象,它的对外接口只是一种【静态定义】,在代码静态解析阶段就会生成。

Module加载的详细说明-保证你有所收获的更多相关文章

  1. YUI 和路径相关的参数与module加载之间的关系

    相关参数默认值 使用YUI, 我们可以配置一些和路径相关参数,如base.root.comboBase.cdn, combine.path.fullpath等属性的配置均会影响到YUI的module加 ...

  2. module加载过程初步分析[更新中]【转】

    转自:http://blog.chinaunix.net/uid-1817735-id-2837068.html 分析这个过程可以有助于我们认识在加载模块时出现的问题大抵在哪里了. 直接从sys_in ...

  3. nginx中有关命令和日志切割,配置文件加载的详细阐述

    一.Nginx简介 Nginx (“engine x”) 是俄罗斯人Igor Sysoev(塞索耶夫)编写的一款高性能的 HTTP 和反向代理服务器.Nginx 已经在俄罗斯最大的门户网站── Ram ...

  4. Android4.0 Launcher 源码分析2——Launcher内容加载绑定详细过程

    Launcher在应用启动的时候,需要加载AppWidget,shortcut等内容项,通过调用LauncherModel.startLoader(),开始加载的工作.launcherModel中加载 ...

  5. laravel composer vendor 目录加载类库详细 之后做说明

    composer installLoading composer repositories with package informationInstalling dependencies (inclu ...

  6. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  7. 基于javascript实现图片懒加载(亲测有效)

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  8. BitmapFactory 加载图片到内存

    Bitmap占用内存分析 Android的虚拟机是基于寄存器的Dalvik,它的最大堆(单个进程可用内存)大小一般是16M,当然不同设备是不一样的,可以查看/system/build.prop文件,[ ...

  9. 【原】从一个bug浅谈YUI3组件的资源加载

    篇前声明:为了不涉及业务细节,篇内信息统一以某游戏,某功能代替 前不久,某游戏准备内测客户端,开发人员测试过程中发现某功能突然不灵了,之前的测试一切ok,没有发现任何异常,第一反应是,游戏内浏览器都是 ...

随机推荐

  1. 乐观锁和悲观锁在kubernetes中的应用

    数据竞争和竞态条件 Go并发中有两个重要的概念:数据竞争(data race)和竞争条件(race condition).在并发程序中,竞争问题可能是程序面临的最难也是最不容易发现的错误之一. 当有两 ...

  2. nginx概述及配置

    Nginx是什么? Nginx是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器.因它的稳定性.丰富的功能集.示例配置文件和低系统资源的消耗而闻名.20 ...

  3. Hbuilderx Eslint配置

    [参照链接]https://blog.csdn.net/m0_67394002/article/details/123346267 安装插件 eslint-js eslint-plugin-vue 复 ...

  4. 【RocketMQ】消息的消费

    上一讲[RocketMQ]消息的拉取 消息消费 当RocketMQ进行消息消费的时候,是通过ConsumeMessageConcurrentlyService的submitConsumeRequest ...

  5. 1269: 求最长上升子序列(LIS)

     题目描述: LIS问题(longest increasing subsequence),即:最长上升子序列问题,是动态规划中一个比较经典的问题.具体描述为:一个有n个整数的序列:A[1],A[2], ...

  6. 如何创建一个带诊断工具的.NET镜像

    现阶段的问题 现在是云原生和容器化时代,.NET Core对于云原生来说有非常好的兼容和亲和性,dotnet社区以及微软为.NET Core提供了非常方便的镜像容器化方案.所以现在大多数的dotnet ...

  7. 基于 Next.js实现在线Excel

    如果要从头开始使用 React 构建一个完整的 Web 应用程序,需要哪些步骤? 这当然不像把大象装进冰箱那么简单,只需要分成三步:打开冰箱,拿起大象,塞进冰箱就好. 我们需要考虑细节有很多,比如: ...

  8. MySQL主从-报错

    安装: 环境: 系统:centos7 x3 master:192.168.220.133 slave1:192.168.220.136 slave2:192.168.220.137 mysql服务器, ...

  9. 第五十二篇:webpack的loader(三) -url-loader (图片的loader)

    好家伙, 1.什么是base64? 图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要 ...

  10. 经纬度转换为距离单位km的方法

    function rad(d){ return d * Math.PI /180.0; }; GetDistance(lat1, lng1, lat2, lng2){ var radLat1 =rad ...