Module加载的详细说明-保证你有所收获

  • Module加载的详细说明-保证你有所收获已关闭评论
  • 30 次浏览
  • A+
所属分类:Web前端
摘要

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


模块

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 模块不是对象,它的对外接口只是一种【静态定义】,在代码静态解析阶段就会生成。