js模块化

简述

　　在很早的时候，js脚本的代码又小又简单，没有必要进行模块化。但随着js代码变得越来越复杂，我们就需要对js的代码进行模块化处理，这样有利于代码复用。

模块

　　一个模块就是一个文件，一个脚本就是一个模块。

　　模块之间可以通过export和import关键字互相加载

语法

　　我们可以用export标记可以从当前模块外部访问的变量和函数。

// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

　　然后我们可以用import在另一个文件可能导入并使用这个函数

import { sayHi } from './sayHi.js';

alert(sayHi); // function...
sayHi('John'); // Hello, John!

　　需要注意import的内容是需要花括号包裹的，如果导入多个东西则用逗号间隔起来

　　需要注意的是模块仅在被导入的时候执行一次，多次导入不会执行多次

　　这意味着如果我们导出的是一个对象，对于多次导入而言，第一次导入会生成对象，后续导入的对象都是第一次导入的对象的引用

export default

　　一个文件只能有一个export default，使用export default导出文件后

　　导入时的花括号就可以省略了，因为导出的只有一个东西

严格模式

　　模块始终在严格模式下运行，对一个未声明的变量赋值将产生错误

　　模块之间不能共享全局变量，要达到模块之间共享变量的效果只能通过导出和导入变量

　　如果硬要共享可以在window对象的属性上加，但一般不这样干

模块的加载

　　模块的加载是延迟的，加载模块不会阻塞html的处理，模块脚本会等到HTML文档完全准备就绪才会运行

模块的this

　　在一个模块中，顶级this是undefined，而非window

References

　　https://zh.javascript.info/modules-intro#shi-mo-shi-mo-kuai