2.2 ES Module模块化的原理

最新推荐文章于 2024-06-23 02:04:13 发布

蓝色清晨_

最新推荐文章于 2024-06-23 02:04:13 发布

阅读量448

点赞数

分类专栏： ES6 笔记

本文链接：https://blog.csdn.net/yingleiming/article/details/118416930

版权

关键词由CSDN通过智能技术生成

11 篇文章 3 订阅

订阅专栏

一、CommonJS模块加载js文件的过程是运行时加载的，并且是同步的：

console.log("main代码执行");

const flag = true;
if (flag) {
  // 同步加载foo文件，并且执行一次内部的代码
  const foo = require('./foo');
  console.log("if语句继续执行");
}

二、CommonJS通过module.exports导出的是一个对象：

三、ES Module加载js文件的过程是编译（解析）时加载的，并且是异步的：

编译时（解析）时加载，意味着import不能和运行时相关的内容放在一起使用：
- 比如from后面的路径需要动态获取；
- 比如不能将import放到if等语句的代码块中；
- 所以我们有时候也称ES Module是静态解析的，而不是动态或者运行时解析的；
异步的意味着：JS引擎在遇到import时会去获取这个js文件，但是这个获取的过程是异步的，并不会阻塞主线程继续执行；
- 也就是说设置了 type=module 的代码，相当于在script标签上也加上了 async 属性；
- 如果我们后面有普通的script标签以及对应的代码，那么ES Module对应的js文件和代码不会阻塞它们的执行；

<script src="main.js" type="module"></script>
<!-- 这个js文件的代码不会被阻塞执行 -->
<script src="index.js"></script>

四、ES Module通过export导出的是变量本身的引用：

所以我们下面的代码是成立的：

bar.js文件中修改

let name = 'coderwhy';

setTimeout(() => {
  name = "湖人总冠军";
}, 1000);

setTimeout(() => {
  console.log(name);
}, 2000);

export {
  name
}

main.js文件中获取

import { name } from './modules/bar.js';

console.log(name);

// bar中修改, main中验证
setTimeout(() => {
  console.log(name);
}, 2000);

但是，下面的代码是不成立的：main.js中修改

import { name } from './modules/bar.js';

console.log(name);

// main中修改, bar中验证
setTimeout(() => {
  name = 'kobe';
}, 1000);

导入的变量不可以被修改

思考：如果bar.js中导出的是一个对象，那么main.js中是否可以修改对象中的属性呢？

关注

专栏目录