前端模块化进化史：从全局 function 到 ES Modules

news2024/10/10 10:25:19

目前，前端开发已经离不开由 CommonJS、ES Modules 和 Webpack 构建的模块化开发环境。无论是 JavaScript、CSS、图片还是其他资源，都可以作为一个模块来处理。那么，模块化究竟是如何发展到今天的呢？

全局函数模式

最初的前端模块化尝试是通过 全局函数来实现的。例如，在一个 util.js 文件中定义了一个变量 count 和一个工具函数 formatNumberWithCommas，用于将数字转换成带千分位分隔符的字符串：

var count = 1;
function formatNumberWithCommas(number) {
  if (typeof number !== "number") {
    throw new TypeError("Input must be a number.");
  }
  return number.toLocaleString("en-US");
}

在 index.html 文件中通过 <script> 标签将 util.js 资源引入：

<script src="../src/util.js"></script>

此时 util.js 文件内的变量和函数将挂载到全局对象 window 上。

在浏览器的 Console 控制台上直接输入 window.formatNumberWithCommas 就可以访问该函数。

在这里插入图片描述

然而，这种方式存在一个问题：不同的 JS 文件间一旦存在相同的变量或函数名就会互相覆盖，从而导致某些变量或函数不可用。

全局命名空间

为了避免全局函数命名冲突的问题，进一步采用了通过对象封装模块的方式。例如，在 util.js 文件中定义了一个全局对象 __Util：

window.__Util = {
  count: 1,
  formatNumberWithCommas(number) {
    if (typeof number !== "number") {
      throw new TypeError("Input must be a number.");
    }
    return number.toLocaleString("en-US");
  },
};

通过为全局对象定义一个较复杂的名称，可以减少命名冲突的风险。然而，这种方式下对象内的属性很容易被外部修改。例如，将 window.__Util 赋值给变量 d，再修改 d 中的 count 时，window.__Util 中的 count 属性也会被修改。

在这里插入图片描述

IIFE 自执行函数

为了解决模块内的变量容易被外界随意修改的问题，通过 IIFE（立即执行函数表达式）创建闭包来实现模块化。例如：

(function () {
  var count = 1;
  function formatNumberWithCommas(number) {
    if (typeof number !== "number") {
      throw new TypeError("Input must be a number.");
    }
    return number.toLocaleString("en-US");
  }
  function getCount() {
    return count;
  }
  function setCount(num) {
    count = num;
  }
  window.__Util = {
    formatNumberWithCommas,
    getCount,
    setCount,
  };
})();

此时我们不直接将 count 变量导出，而是通过 getCount 获取 count 的值，通过 setCount 修改 count 的值。

在这里插入图片描述

这种方式使得模块内的变量不能被外界随意修改。然而，这种模式下存在的问题是，如果存在多个模块，且它们之间有依赖关系，就无法很好地支持。

IIFE 自定义依赖

为了解决 IIFE 无法关联模块的问题，可以通过在 IIFE 中传入参数来将各模块关联起来。例如，新增一个 verify.js 文件，并在 index.html 中引入：

(function (global) {
  function isNumber(num) {
    return typeof num === "number";
  }
  global.__Verify = {
    isNumber,
  };
})(window);

同时改造 util.js 文件，接收 verify.js 文件中绑定到全局的 __Verify 属性，并调用 __Verify 中的 isNumber 方法：

(function (global, verifyModule) {
  var count = 1;
  function formatNumberWithCommas(number) {
    if (!verifyModule.isNumber(number)) {
      throw new TypeError("Input must be a number.");
    }
    return number.toLocaleString("en-US");
  }
  function getCount() {
    return count;
  }
  function setCount(num) {
    count = num;
  }
  global.__Util = {
    formatNumberWithCommas,
    getCount,
    setCount,
  };
})(window, window.__Verify);

在这里插入图片描述

尽管这种方式能够在一定程度上支持模块化，但如果模块过多，特别是在现代项目中，模块数量动辄几十上百个，这种方式就显得力不从心，而且代码的可读性和维护性也会受到影响。

commonjs

以上提到的方法都是通过简单的代码实现模块化功能，但随着 CommonJS 的出现，一套正式的模块化规范开始形成。CommonJS 使用 module.exports 导出模块，并通过 require 加载其他模块，从而实现模块间的交互。

让我们对之前的 verify.js 和 util.js 文件进行改造以适应 CommonJS 规范：

// verify.js
function isNumber(num) {
  return typeof num === "number";
}
module.exports = {
  isNumber,
};

// util.js
const { isNumber } = require("./verify");
function formatNumberWithCommas(number) {
  if (!isNumber(number)) {
    throw new TypeError("Input must be a number.");
  }
  return number.toLocaleString("en-US");
}
console.log("formatNumberWithCommas", formatNumberWithCommas(123456));

通过命令行工具执行 node ./src/util.js，可以看到 console.log 输出的结果。

CommonJS 规范是为服务器端设计的，它假定所有的模块加载都是同步的。然而，在客户端环境中，由于网络延迟，这种方式可能会导致用户界面的阻塞，从而影响用户体验。

AMD

AMD（Asynchronous Module Definition）规范则是为了解决浏览器端模块加载的异步需求而设计的。AMD 规范使用 define 来定义模块，并且通过 return 导出模块内容，同时使用 require 来加载其他模块。

以下是 verify.js 和 util.js 改造后的 AMD 规范代码：

// verify.js
define(function () {
  function isNumber(num) {
    return typeof num === "number";
  }
  return {
    isNumber: isNumber,
  };
});

// util.js
define(['verify'], function(verify) {
  function formatNumberWithCommas(number) {
    if (!verify.isNumber(number)) {
      throw new TypeError("Input must be a number.");
    }
    return number.toLocaleString("en-US");
  }
  return {
    formatNumberWithCommas: formatNumberWithCommas
  };
});

此外，定义一个 index.js 文件来使用这些模块：

define(function (require) {
  var util = require("util");
  console.log("formatNumberWithCommas", util.formatNumberWithCommas(123456));
});

在 HTML 页面中，可以通过 RequireJS 来解析 AMD 规范的代码，并通过 HTML 属性 data-main 指定入口文件：

 <script data-main="../src/index.js" src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>

打开 HTML 页面时，可以在浏览器控制台中看到输出结果。

CMD

CMD（Common Module Definition）规范在 AMD 的基础上进行了改进，尤其是在异步加载和延迟执行方面。CMD 规范同样使用 define 来定义模块，但导出模块时使用的是 exports。

下面是 verify.js 和 util.js 按照 CMD 规范的代码示例：

// verify.js
define(function (require, exports, module) {
  function isNumber(num) {
    return typeof num === "number";
  }
  exports.isNumber = isNumber;
});

// util.js
define(function (require, exports, module) {
  var verify = require("verify");
  function formatNumberWithCommas(number) {
    if (!verify.isNumber(number)) {
      throw new TypeError("Input must be a number.");
    }
    return number.toLocaleString("en-US");
  }
  exports.formatNumberWithCommas = formatNumberWithCommas;
});

为了在浏览器中运行 CMD 规范的代码，可以使用 Sea.js。在 HTML 文件中添加以下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js"></script>
<script>
  seajs.config({
    alias: {
      verify: "../src/verify",
      util: "../src/util",
    },
  });
  seajs.use(["util"], function (util) {
    console.log(
      "formatNumberWithCommas",
      util.formatNumberWithCommas(123456)
    );
  });
</script>

ES Modules

相比之下，ES Modules（ESM） 作为 ECMAScript 标准的一部分，不仅提供了更为简洁的语法用于模块的导入和导出，还具备动态加载的能力，提高了模块间协作的效率与灵活性。

下面是如何用 ESM 来重写 verify.js 和 util.js：

// verify.js
export function isNumber(num) {
  return typeof num === "number";
}

// util.js
import { isNumber } from "./verify.js";
export function formatNumberWithCommas(number) {
  if (!isNumber(number)) {
    throw new TypeError("Input must be a number.");
  }
  return number.toLocaleString("en-US");
}

为了测试 formatNumberWithCommas 函数，我们定义一个 index.js 文件：

// index.js
import { formatNumberWithCommas } from "./util.js";
console.log("formatNumberWithCommas", formatNumberWithCommas(123456));

在 index.html 文件中引入 index.js，浏览器本身就支持 ESModule，只需要将 type 需要定义成 module。

  <script type="module" src="../src/index.js"></script>

尽管现代浏览器原生支持 ES Modules，但浏览器自身并不具备有效的模块管理机制。这意味着，每一个模块都会作为一个独立的 JS 资源文件加载，这不仅导致资源文件过于分散，而且每次加载模块都会产生新的服务器请求，从而增加了加载时间，降低了性能，这在大型项目中尤其明显。

为了解决这些问题，开发者社区引入了 npm 和 webpack 这样的工具。npm 作为最流行的 JavaScript 包管理器之一，能够有效地管理和组织模块依赖关系，确保项目的模块化组件能够被正确地安装和更新。另一方面，webpack 则是一个模块打包工具，它可以将多个模块和它们的依赖合并成单个文件或一组优化过的文件，同时还能进行压缩等优化操作，以减少最终输出文件的大小，提高加载速度和应用的整体性能。

关于 npm 和 webpack 的相关内容，大家可以查看我其他的博客，持续更新中~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2195476.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C# 属性和方法

C# 属性和方法

本课要点&#xff1a; 1、属性的使用 2、方法的使用 一 数据安全问题 示例 static void Main(string[] args) {Student stu new Student();stu.age -2; }二 属性 private int age; //年龄 public int Age {get { return age; }set{if (value > 0 && value <…
阅读更多...
JavaEE: 深入解析HTTP协议的奥秘(2)

JavaEE: 深入解析HTTP协议的奥秘(2)

文章目录 HTTP认识 URLURL encode 介绍 认识 "方法"(method)GETPOST其他方法 HTTP JavaEE: 深入解析HTTP协议的奥秘(1) 书接上文~ 认识 URL 平时我们俗称的"网址"其实就是说的 URL .(唯一资源定位符) URL 不是 HTTP 专属的,很多协议都会用到. 其实除了 …
阅读更多...
软考-程序设计语言基础

软考-程序设计语言基础

一、程序设计语言概述 (一)程序设计语言的基本概念 1. 程序设计语言的目的 为了书写计算机程序而人为设计的符号语言&#xff0c;用于对计算过程进行描述、组织和推导。 2.低级语言 机器语言&#xff1a; 机器语言是计算机最原始的语言&#xff0c;由0和1的代码构成 计算机…
阅读更多...
You must konw JS!!(超详细的javascript套餐,适合计算机专业有基础的,包含常见前端开发面试题)

You must konw JS!!(超详细的javascript套餐,适合计算机专业有基础的,包含常见前端开发面试题)

1.起源 JavaScript 起源于 1995 年&#xff0c;当时它主要是为了满足网页交互的需求而被创建。它最初的设计目的是为了让网页开发者能够在网页中添加一些简单的交互效果和动态内容。在那个时期&#xff0c;网页大多是静态的&#xff0c;而 JavaScript 的出现为网页带来了新的活…
阅读更多...
如何将数据从 AWS S3 导入到 Elastic Cloud - 第 1 部分：Elastic Serverless Forwarder

如何将数据从 AWS S3 导入到 Elastic Cloud - 第 1 部分：Elastic Serverless Forwarder

作者&#xff1a;来自 Elastic Hemendra Singh Lodhi 这是多部分博客系列的第一部分&#xff0c;探讨了将数据从 AWS S3 导入 Elastic Cloud 的不同选项。 Elasticsearch 提供了多种从 AWS S3 存储桶导入数据的选项&#xff0c;允许客户根据其特定需求和架构策略选择最合适的方…
阅读更多...
助动词的分类及其缩略形式

助动词的分类及其缩略形式

助动词的分类及其缩略形式 1. 助动词 (auxiliary verb)2. 基本助动词 (primary auxiliary)2.1. 基本助动词 be、do 和 have2.2. 实义动词 be、do 和 have 3. 情态助动词 (modal auxiliary)3.1. 情态助动词取代情态动词 4. 半助动词 (semi-auxiliary)4.1. 不能与 it ... that-cl…
阅读更多...
MoveIt2-humble----Planning Around Objects(a)

MoveIt2-humble----Planning Around Objects(a)

4.Pick and Place with MoveIt Task Constructor 本节教程会教你创建一个功能包&#xff0c;使用MoveIt Task Constructor规划一个抓取和放置的操作。MoveIt Task Constructor 提供了一种方式&#xff0c;去规划由多种不同子任务&#xff08;也称为阶段&#xff09;所组成的任…
阅读更多...
详解Redis分布式锁在SpringBoot的@Async方法中没锁住的坑

详解Redis分布式锁在SpringBoot的@Async方法中没锁住的坑

背景 Redis分布式锁很有用处&#xff0c;在秒杀、抢购、订单、限流特别是一些用到异步分布式并行处理任务时频繁的用到&#xff0c;可以说它是一个BS架构的应用中最高频使用的技术之一。 但是我们经常会碰到这样的一个问题&#xff0c;那就是我们都按照标准做了但有时运行着、…
阅读更多...
分层解耦-05.IOCDI-DI详解

分层解耦-05.IOCDI-DI详解

一.依赖注入的注解 在我们的项目中&#xff0c;EmpService的实现类有两个&#xff0c;分别是EmpServiceA和EmpServiceB。这两个实现类都加上Service注解。我们运行程序&#xff0c;就会报错。 这是因为我们依赖注入的注解Autowired默认是按照类型来寻找bean对象的进行依赖注入…
阅读更多...
基于Qt的速度仪表盘控件实现

基于Qt的速度仪表盘控件实现

本文将详细讲解一个基于Qt的速度仪表盘控件的实现过程&#xff0c;并对代码进行详细的注释说明。该控件可以模拟汽车仪表盘的外观&#xff0c;并通过滑动条动态改变速度显示。本文将从代码结构、绘制组件到实现细节进行讲解&#xff0c;帮助您理解如何使用Qt框架自定义绘制控件…
阅读更多...
CSRF | GET 型 CSRF 漏洞攻击

CSRF | GET 型 CSRF 漏洞攻击

关注这个漏洞的其他相关笔记&#xff1a;CSRF 漏洞 - 学习手册-CSDN博客 0x01&#xff1a;GET 型 CSRF 漏洞攻击 —— 理论篇 GET 型 CSRF 漏洞是指攻击者通过构造恶意的 HTTP GET 请求&#xff0c;利用用户的登录状态&#xff0c;在用户不知情的情况下&#xff0c;诱使浏览器…
阅读更多...
Cortex-M3/M4/M7 芯片 Fault 分析原理与实战

Cortex-M3/M4/M7 芯片 Fault 分析原理与实战

目录 一、简介1、异常类型2、异常优先级3、同步异步问题4、异常具体类型 二、Fault exception registers1、Control registers1.1 CCR1.2 SHP1.3 SHCSR 2、Status and address registers2.1 HardFault Status Register——HSFR2.2 Configurable Fault Status Register——CFSR2…
阅读更多...
《Linux从小白到高手》进阶实操篇：用户及权限有关的实际工作场景应用

《Linux从小白到高手》进阶实操篇：用户及权限有关的实际工作场景应用

List item 本篇为《Linux从小白到高手》进阶实操篇的第一篇&#xff0c;主要介绍分享一些用户及权限有关的实际工作场景应用。 场景1&#xff1a; 实际工作中你一定会碰到如下图所示的情景&#xff1a;本部门有5个组&#xff0c;分别为&#xff1a;①Root组&#xff1a;用户…
阅读更多...
Python中对象obj类型确定最pythonic的方式——isinstance()函数

Python中对象obj类型确定最pythonic的方式——isinstance()函数

python中确定对象obj的类型&#xff0c;isinstance函数最是优雅&#xff0c;type、issubclass等函数也可以&#xff0c;但终究“曲折”。 (笔记模板由python脚本于2024年10月07日 19:42:38创建&#xff0c;本篇笔记适合喜欢python的coder翻阅) 【学习的细节是欢悦的历程】 Pyth…
阅读更多...
Vue2电商项目(七)、订单与支付

Vue2电商项目(七)、订单与支付

文章目录 一、交易业务Trade1. 获取用户地址2. 获取订单信息 二、提交订单三、支付1. 获取支付信息2. 支付页面--ElementUI(1) 引入Element UI(2) 弹框支付的业务逻辑(这个逻辑其实没那么全)(3) 支付逻辑知识点小总结 四、个人中心1. 搭建二级路由2. 展示动态数据(1). 接口(2).…
阅读更多...
【Kubernetes】常见面试题汇总（六十）

【Kubernetes】常见面试题汇总（六十）

目录 131. pod 一直处于 pending 状态&#xff1f; 132. helm 安装组件失败&#xff1f; 特别说明&#xff1a; 题目 1-68 属于【Kubernetes】的常规概念题&#xff0c;即 “ 汇总&#xff08;一&#xff09;~&#xff08;二十二&#xff09;” 。 题目 69-113 属于…
阅读更多...
企业经营异常怎么解除

企业经营异常怎么解除

经营异常是怎么回事&#xff1f;是什么意思&#xff1f;了解异常原因&#xff1a;我们到所属工商营业执照异常的具体原因。原因可能包括未按时提交年报、未履行即时信息公示义务、公示信息隐瞒真实情况或弄xu作jia、失联等。纠正违规行为&#xff1a;查到了异常原因&#xff0c…
阅读更多...
洛谷P5723、P5728、P1428、P1319 Python解析

洛谷P5723、P5728、P1428、P1319 Python解析

P5723 完整代码 def is_prime(y):if y < 2:return Falsefor i in range(2, int(y**0.5) 1):if y % i 0:return Falsereturn Truen int(input()) sum_primes 0 x 0if n < 2:print("0") elif n 2:print("2\n1") else:for i in range(2, n 1):i…
阅读更多...
计数原理与组合 - 离散数学系列（三）

计数原理与组合 - 离散数学系列（三）

目录 1. 计数原理的基本概念 加法原理&#xff08;Rule of Sum&#xff09; 乘法原理&#xff08;Rule of Product&#xff09; 2. 排列与组合 排列&#xff08;Permutation&#xff09; 组合&#xff08;Combination&#xff09; 日常生活中的例子 3. 二项式定理 4. 实…
阅读更多...
Mysql锁机制解读(敲详细)

Mysql锁机制解读(敲详细)

目录 锁的概念 全局锁 表级锁 表锁 元数据锁 意向锁 锁的概念 全局锁 表级锁 表锁 元数据锁 主要是对未提交事务&#xff0c;修改表结构造成表结构混乱&#xff0c;进行控制。 在不涉及表结构变化的情况下,元素锁可以忽略。 意向锁 避免有行级锁影响加表级锁&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023