前端工程化和模块化的理解和认识（前端模块化开发的认识）



前端模块化是指将一个大型的前端应用程序分解为小的、独立的模块，每个模块都有自己的功能和接口，可以被其他模块使用。

前端模块化的出现是为了解决前端开发中代码复杂度和可维护性的问题。在前端模块化的架构下，开发人员可以更加专注于各自的模块开发，提高了代码的复用性和可维护性。

在传统的前端开发中，所有的代码都是写在同一个文件中，这样做的问题在于:

全局 function 模式

将不同功能封装成不同的函数。

缺陷: 这个是将方法挂在 window 下，会污染全局命名空间，容易引起命名冲突且数据不安全等问题。

全局 namespace 模式

缺陷: 这个方案确实减少了全局变量，解决命名冲突的问题，但是外部可以直接修改模块内部的数据。

IIFE 模式，通过自执行函数创建闭包

缺陷: 这个方案下，数据是私有的，外部只能通过暴露的方法操作，但无法解决模块间相互依赖问题。

IIFE 模式增强，传入自定义依赖

我们可以通过传入依赖的方式来解决模块间引用的问题，但仍然有以下几个缺点:

经过以上过程的演进，我们确实可以实现前端模块化开发了，但是仍然有几个问题，一是请求过多，我们都是通过 script 标签来引入各个模块文件的，依赖多个模块，那样就会发送多个请求。二是依赖模糊，很容易因为不了解模块之间的依赖关系导致加载先后顺序出错，模块之间的依赖关系比较难以管理，也没有明确的接口和规范。因此模块化规范应运而生。

CommonJS

概述

CommonJS 是一个 JavaScript 模块化规范，它最初是为了解决 JavaScript 在服务器端的模块化问题而提出的。是 NodeJS 的默认模块饭规范，该规范定义了模块的基本结构、模块的加载方式以及模块的导出和导入方式等内容。

基本结构

在 CommonJS 规范中，一个模块就是一个文件。每个文件都是一个独立的模块，文件内部定义的变量、函数和类等只在该文件内部有效。

每个模块都有自己的作用域，模块内部的变量、函数和类等只在该模块内部有效。如果想在其他模块中使用该模块内部的变量、函数和类等，需要将其导出。

加载方式

在 CommonJS 规范中，模块的加载方式是的。也就是说，当一个模块被引入时，会立即执行该模块内部的代码，并将该模块导出的内容返回给引入该模块的代码。

模块可以多次加载，，再次加载时，会从缓存结果中直接读取模块输出结果。模块加载的顺序，按照其在代码中出现的顺序。。

这种同步加载方式可以保证模块内部的代码执行完毕后再执行外部代码，从而避免了异步加载所带来的一些问题。但同时也会影响页面加载速度，因此在浏览器端使用时需要注意。

导出和导入方式

在 CommonJS 规范中，一个模块可以通过 或者 对象来导出内容。。

一个模块可以导出多个内容，可以通过 module.exports 或者 exports 对象分别导出。例如:

在另一个模块中，可以通过 require 函数来引入其他模块，并访问其导出的内容。例如:

特点

ES6 模块化

概述

在 ES6 之前，JavaScript 并没有原生支持模块化，因此开发者们需要使用一些第三方库或者自己实现一些模块化方案来解决代码复用和管理问题。但是这些方案都有一些问题，比如命名冲突、依赖管理等。ES6 引入了 ESModule 模块化规范来解决这些问题。

ESModule 模块化规范是一种静态的模块化方案，它允许开发者将代码分割成小的、独立的模块，每个模块都有自己的作用域。ESModule 规范是基于文件的，每个文件都是一个独立的模块。

ESModule 的模块解析规则是基于 URL 解析规则的。当我们使用 import 语句导入一个模块时，模块加载器会根据 import 语句中指定的路径解析出对应的 URL，并将其作为唯一标识符来加载对应的模块文件。在浏览器中，URL 解析规则是基于当前页面的 URL 进行解析；在 Node.js 中，URL 解析规则是基于当前运行脚本的路径进行解析。

加载方式

ESModule 规范是基于文件的，每个文件都是一个独立的模块。在浏览器中，可以使用 标签来加载 ESModule 模块。在 Node.js 中，可以使用 import 关键字来加载 ESModule 模块。

导出和导入方式

在 ESModule 中，使用 export 关键字将变量或者函数导出，使用 import 关键字导入其他模块中导出的变量或者函数。导出和导入方式有以下几种:

命名导出和命名导入 命名导出和命名导入是最常见的一种方式。可以将多个变量或者函数命名导出，也可以将多个变量或者函数命名导入。

默认导出和默认导入 默认导出和默认导入是一种简单的方式，可以将一个变量或者函数作为默认导出，也可以将一个变量或者函数作为默认导入。

混合命名和默认导出 混合命名和默认导出也是一种常见的方式，可以将多个变量或者函数命名导出，同时将一个变量或者函数作为默认导出。

特点

AMD

概述

AMD 是 Asynchronous Module Definition 的缩写，即异步模块定义。它是由 RequireJS 的作者 James Burke 提出的一种模块化规范。AMD 规范的主要特点是: 、。

基本语法

在 AMD 规范中，一个模块通常由以下几个部分组成:

其中参数解释如下:

一个典型的 AMD 模块定义如下所示:

AMD 规范采用异步加载方式，它通过 函数来加载一个或多个模块。函数接受一个数组类型的参数，每个元素表示一个待加载的模块标识符。当所有依赖模块加载完成后，函数才会执行回调函数。

AMD 模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。

CMD

概述

CMD 是 Common Module Definition 的缩写，即通用模块定义。CMD 规范的主要特点是: 按需加载、延迟执行。

基本语法

CMD 规范专门用于浏览器端，模块的加载是的，模块使用时才会加载执行。CMD 规范整合了 CommonJS 和 AMD 规范的特点。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/19699.html