首页 > 其他分享 >前端模块化进化史:从全局 function 到 ES Modules

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

时间:2024-10-07 20:10:46浏览次数:9  
标签:function formatNumberWithCommas Modules number js util 模块 ES

目前,前端开发已经离不开由 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.jsutil.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.jsutil.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.jsutil.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.jsutil.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 资源文件加载,这不仅导致资源文件过于分散,而且每次加载模块都会产生新的服务器请求,从而增加了加载时间,降低了性能,这在大型项目中尤其明显。

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

关于 npmwebpack 的相关内容,大家可以查看我其他的博客,持续更新中~

标签:function,formatNumberWithCommas,Modules,number,js,util,模块,ES
From: https://www.cnblogs.com/vigourice/p/18450557

相关文章

  • iptables一句话修复安全漏洞
    iptables一句话修复安全漏洞原创 龚诗嘉 运维前沿  2024年08月30日08:20 辽宁 听全文  iptables一句话安全修复漏洞安全漏洞对于开发和运维人员来说总是灾难,而且总是来的猝不及防CVE-2022-22947GET /actuator/gateway/routes HTTP/1.1Host: 127.0.0.1:......
  • 题解 QOJ2559【Endless Road】/ SS241006D【套路题】
    PetrozavodskWinter2022.Day2.KAISTContest+KOITST2021XXIIOpenCupnamedafterE.V.Pankratiev,GrandPrixofDaejeon题目描述现在有\(10^9\)个花盆,依次编号为\(1,2,\dots,10^{9}\)。给定\(n\)个二元组\(L_i,R_i(L_i<R_i)\),我们将进行\(n\)次以下操......
  • 【Kubernetes】常见面试题汇总(五十七)
    目录125.K8S创建服务status为ErrlmagePull?126.不能进入指定容器内部?特别说明:题目  1-68  属于【Kubernetes】的常规概念题,即“汇总(一)~(二十二)”。题目 69-113 属于【Kubernetes】的生产应用题,其中104-113为“情景类”。题目114-132属于【Kube......
  • abc372E K-th Largest Connected Components
    有N个顶点的无向图,最初没有边,接下来有Q组询问,格式如下:1uv:在顶点u和v之间加一条边;2xk:问与顶点v连通的分量中,顶点编号第k大的是谁?如果不存在,输出-1.1<=N,Q<=2E5,1<=u<v<=N,1<=x<=N,1<=k<=10分析:由于k比较小,直接用vector维护连通分量的顶点集合,在合并时,如果顶点数超过k,......
  • ESP-IDF 学习 1 工程文件管理
    最小项目目录结构├──CMakeLists.txt├──main│├──CMakeLists.txt│└──main.c└──README.mdESP-IDF给用户的函数入口在voidapp_main(void)./CMakeLists.txt管理整个工程./main/CMakeLists.txt管理./main文件夹中的所有文件若要将.c&.h文......
  • 解决undefined reference to `google::protobuf::MessageLite::SerializeToString(std
    按照如下步骤安装了proto:https://zhuanlan.zhihu.com/p/631291781但是在后续的protoBuf测试demo中出现了问题 root@e23598ae2d28:/home/lee/Code/protof_test#g++test.cccontacts.pb.cc-otest_proto-lprotobuf-std=c++11-lpthread/tmp/ccbTc1bj.o:Infunction`......
  • The 2020 ICPC Asia Shenyang Regional Programming Contest Northeastern University
    The2020ICPCAsiaShenyangRegionalProgrammingContestNortheasternUniversity(SMU2024ICPC网络赛选拔赛2)D.JourneytoUn'Goro思路队友写得,没看。代码#include<bits/stdc++.h>usingnamespacestd;typedeflonglongintll;#defineintlonglong#defineP......
  • 2024.10.7 test
    nf#33B有一棵包含\(n\)个节点的有根树,且树的高度不超过\(100\)。每次操作时可以选择一个节点\(u\),使其与父节点断开(如果有),成为一颗新树的根节点,然后删除以节点\(u\)为根的树中的所有叶节点。求删除所有节点所需的最少操作次数和通过最少次操作删除所有节点的方案数。\(n......
  • AtCoder Beginner Contest 374
    ABC374A-Takahashisan2题目传送门代码(签到题)#include<cstdio>#include<cctype>#include<cstring>#include<cmath>#include<queue>usingnamespacestd;intiut(){ intans=0,f=1;charc=getchar(); while(!isdigit(c))f=(c==&......
  • 【前缀和+开区间二分】codeforces 1187 B. Letters Shop
    题意第一行,输入一个正整数\(n(1\leqn\leq2*10^5)\),代表字符串\(s\)的长度。第二行,输入一个字符串\(s\)。第三行,输入一个正整数\(m(1\leqm\leq5*10^4)\),代表接下来要输入的询问次数,对于每次询问:输入一个字符串\(t(1\leq|t|\leq2*10^5)\),并保证\(\sum_{i=1}^m......