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
一点一点积累,一点一点蜕变!