您现在的位置是:首页 > 正文

2.2 ES Module模块化的原理

2024-04-01 05:15:50阅读 2

ES Module的原理

ES Module和CommonJS的区别

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

  • 运行时加载意味着是js引擎在执行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导出的是变量本身的引用:

  • export在导出一个变量时,js引擎会解析这个语法,并且创建模块环境记录(module environment record);
  • 模块环境记录会和变量进行 绑定(binding),并且这个绑定是实时的;
  • 而在导入的地方,我们是可以实时的获取到绑定的最新值的;

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

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中是否可以修改对象中的属性呢?

  • 答案是可以的,因为他们指向同一块内存空间;(自己编写代码验证,这里不再给出)
  • 因为他们指向同一块内存空间;(自己编写代码验证,这里不再给出)

原文链接:彻底掌握前端模块化

网站文章

  • 基于python的随机森林回归实现_基于Scikit-Learn机器学习库的随机森林模型优化调参流程...

    基于python的随机森林回归实现_基于Scikit-Learn机器学习库的随机森林模型优化调参流程...

    因为有Scikit-Learn这样的库,现在用Python实现任何机器学习算法都非常容易。随机森林是一个由众多决策树构建的集成学习算法模型。随机森林模型的介绍,百度搜索,会出现一大堆,这里不再赘述。这...

    2024-04-01 05:15:10
  • Vue3+Ts+Vite项目(第十三篇)——配置Element-Plus主题色

    Vue3+Ts+Vite项目(第十三篇)——配置Element-Plus主题色

    找了很多博客,总结出来的最有效的vue3+ts+vite项目配置element-plus组件主题色

    2024-04-01 05:15:02
  • java 数组 push pop_JavaScript学习笔记:数组的push()、pop()、shift()和unshift()方法

    java 数组 push pop_JavaScript学习笔记:数组的push()、pop()、shift()和unshift()方法

    JavaScript是一种弱类型语言,不像其它程序语言需要严格定义数据类型。在JavaScript中数组可以任意修改变动,这样也就出现了一个问题,如果边遍历数组边操作数组(比如删除当前项,则所有之后的...

    2024-04-01 05:14:56
  • 51Talk-Level 7 Unit 5 L2

    今日主题:保守秘密(keeping a secret )高频口语句型(想到中文但是不能马上联想到英文的):1. break up with somebody 与某人绝交2. lie to somebody 向某人说谎3. be tempted to do something 想做某事4. look up to 羡慕,尊敬5

    2024-04-01 05:14:50
  • leetcode:149. 直线上最多的点数

    题目: 给定一个二维平面,平面上有 n 个点,求最多有多少个点在同一条直线上。 示例 1: 输入: [[1,1],[2,2],[3,3]] 输出: 3 解释: ^ | | o | o | o ±------------&gt; 0 1 2 3 4 示例 2: 输入: [[1,1],[3,2],[5,3],[4,1],[2,3],[1,4]] 输出: 4 解释: ^ ...

    2024-04-01 05:14:11
  • 高性能(二)

    高性能(二)

    高性能(二)

    2024-04-01 05:14:04
  • 【Linux】项目shell启动脚本简单模本

    背景:启动 tomcat + jar工程

    2024-04-01 05:13:57
  • Pytorch中的转置卷积

    反卷积反卷积(Transposed Convolution)输出大小计算起点可以整除不可以整除综合起来参考文献 反卷积(Transposed Convolution) 又称为转置卷积。 torch.n...

    2024-04-01 05:13:17
  • 安装think PHP5

    安装think PHP5

    Composer安装 Composer 是 PHP 的一个依赖管理工具。它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们。 下载地址:https://getcomposer.org/Com...

    2024-04-01 05:13:10
  • java:CAS、ABA问题详解

    1、java中的原子性操作所谓原子性操作,是指执行一系列操作时,这些操作要么全部执行,要么全部不执行,不存在只执行其中一部分的情况。2、CAS方法CAS即Compare and Swap,其是JDK提...

    2024-04-01 05:13:02