模块化规范

一、浏览器 script 加载 javascript

HTML 网页中，浏览器通过<script>标签加载 JavaScript 脚本。

<!-- 页面内嵌的脚本 -->
<script type="application/javascript">
  // module code
</script>

<!-- 外部脚本 -->
<script type="application/javascript" src="path/to/myModule.js"></script>

如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。

这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。

由于浏览器脚本的默认语言是 JavaScript，因此 type="application/javascript"可以省略。

<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 脚本是不能保证加载顺序的

二、浏览器 script 加载 ES module

浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。就可以以 ES Module 的标准执行其中的 js 代码

<script type="module">
  console.log("test");
</script>

浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，

即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的 defer 属性。

<script type="module" src="./foo.js" async></script>

<script>标签的 async 属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染。

2.1 ES module 的特点

  • ① ESM 自动采用严格模式，忽略'use strict'
<script type="module">
  console.log(this);
  // undefined
</script>
  • ② 每个 ES module 都是运行在单独的私有作用域中
<script type="module">
  var foo = 100;
  console.log(foo);

  // 100
</script>

<script type="module">
  console.log(foo);

  // foo is not defined
</script>

  • ③ ES module 的 src 文件源必须支持 CORS,否则会报跨域错误

  • ④ ES module 的 script 标签会延迟执行脚本，等待网页的渲染之后再执行

2.2 ES module 导入和导出

1.导出的对象，import 并不是解构，而是所有的单独 export 的对象，导入的是对象的引用

示例

 |-- app.js',
 |-- index.html',
 |-- module.js',

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="module" src="./app.js"></script>
</body>
</html>

app.js


/*******************************************************************************************************
* 单独导出的变量
*/
import { name, age } from './module.js';

// 导入name其实为引用关系，module中的值变更的话，导入地方的值会变更,导入地方不能修改这个值
// foo name
console.log(name)
// 18
console.log(age)

setTimeout(() => {
  // new fool name
  console.log(name)
}, 1000)


/*******************************************************************************************************
* 合并导出的变量
*/
import { foolName, age1 } from './module.js';

// foo name1
console.log(foolName)
// 19
console.log(age1)

/*******************************************************************************************************
* 默认导出的变量
*/
// caught SyntaxError: The requested module './module.js' does not provide an export named 'age2'
// 无法解构
// import { name2, age2 } from './module.js';

import nameAge2 from './module.js';

// {name2: 'fool name2', age2: 20}
console.log(nameAge2)


import { default as nameAge2_1 } from './module.js';

// {name2: 'fool name2', age2: 20}
console.log(nameAge2_1)

module.js

/*******************************************************************************************************
* 单独导出
*/
export let name = 'foo name';
export let age = 18;

setTimeout(() => {
  name = 'new fool name'
}, 1000)

/*******************************************************************************************************
* 合并导出
*/

// 合并导出
const name1 = 'foo name1';
const age1 = 19;

function hello() {
  console.log('function hello')
}

class Person {
  console() {
    console.log('class Person')
  }
}

export {
  // 别名导出为foolName
  name1 as foolName,
  age1,
  hello,
  Person
}

/*******************************************************************************************************
* 默认导出
*/
const name2 = 'fool name2'
const age2 = 20

export default { name2, age2 }
Contributors: masecho