”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > React 模块化简介:AMD 和 CommonJS 模块化

React 模块化简介:AMD 和 CommonJS 模块化

发布于2024-11-11
浏览:792

Uvod u Modularizaciju u React-u: AMD i CommonJS modularizacija

模块化是现代应用程序开发的核心,尤其是在使用像 React 这样的库时。了解模块化和不同的模块化方法(例如 AMD 和 CommonJS)是开发高效、可维护和可扩展代码的关键。在这篇博文中,我们将探讨模块化在 React 应用程序中的工作原理、为什么它很重要,以及 AMD 和 CommonJS 的模块化方法如何提高 JavaScript 应用程序的效率。

为什么模块化是 React 应用程序的关键?

使用 React 时,模块化使我们能够将用户界面分解为更小的部分(组件),这些部分作为独立的单元运行。本质上,每个组件代表用户界面的一部分,具有自己的样式、功能和依赖关系,这使得应用程序更加透明,并有利于其开发和维护。

模块化还有助于降低不同代码之间发生冲突的风险,因为每个组件都可以使用自己的模块和资源独立运行。这让我们认识到 React 应用程序中模块化的重要性:每个组件都可以定义为单独的模块,这简化了依赖管理并允许团队合作顺利运行而不会分心。

React 中的模块结构

React 应用程序通常遵循对相关组件和资源进行分组的文件夹结构。假设我们正在构建一个简单的应用程序,其中包含“主页”、“关于”和“联系方式”等几个页面。我们可以将它们模块化,以便每个文件代表一个组件,而不是在一个文件中定义所有页面。下面是它的示例:

// Home.js
export default function Home() {
  return 

Home Page

; } // About.js export default function About() { return

About Page

; } // Contact.js export default function Contact() { return

Contact Page

; }

当应用程序的每个部分被划分为独立的模块(组件)时,我们可以轻松地在应用程序的其他部分中重用这些部分。这种方法有助于保持应用程序整洁、易于维护和可扩展。

JavaScript 中的 AMD 和 CommonJS 模块化

虽然 ES6 模块是现代 JavaScript 中的标准,并且经常在 React 应用程序中使用,但 JavaScript 世界中还有其他流行的标准,例如 AMD(异步模块定义) CommonJS 。尽管它们在 React 应用程序中并不同样常见,但了解它们之间的差异有助于处理不同的 JavaScript 项目,尤其是那些不依赖 React 的项目。

CommonJS

CommonJS 是为服务器端 JavaScript 环境(尤其是 Node.js)开发的模块化。该标准使用 module.exports 导出模块并要求加载它们。 CommonJS 的一个关键特性是同步性,这意味着模块按顺序加载,适用于服务器端环境,在服务器端环境中,同步(按顺序)加载模块通常更高效且更符合服务器需求。

CommonJS模块化示例:

// math.js
module.exports = {
  add: (a, b) => a   b,
  subtract: (a, b) => a - b,
};

// main.js
const math = require('./math');
console.log(math.add(2, 3)); // 5

在 CommonJS 中,我们使用 module.exports 定义模块所需的一切。当我们想要使用一个模块时,我们只需需要它。由于这种简单性,CommonJS 成为 Node.js 项目最常见的标准,并允许开发人员通过 Node Package Manager (NPM) 共享模块。

AMD(异步模块定义)

与 CommonJS 不同,AMD(异步模块定义)标准主要用于浏览器应用程序。它旨在启用异步模块加载,这对于优化浏览器性能至关重要。

采用异步加载,模块不是按顺序加载,而是并行下载,减少等待时间,实现更快的页面加载。 AMD使用define函数来定义模块,并使用require函数来加载它们。

AMD模块化示例:

// math.js
define([], function () {
  return {
    add: function (a, b) {
      return a   b;
    },
    subtract: function (a, b) {
      return a - b;
    },
  };
});

// main.js
require(['math'], function (math) {
  console.log(math.add(2, 3)); // 5
});

AMD 以一种非常适合性能和页面加载速度至关重要的环境的方式实现模块化。考虑到异步可以更有效地利用浏览器资源,AMD 在需要快速加载和交互性的大型 JavaScript 应用程序中很受欢迎。

CommonJS 和 AMD 模块化之间的主要区别是什么?

  1. 应用程序:CommonJS 非常适合服务器端 JavaScript 应用程序(例如 Node.js),而 AMD 专为异步可以提高性能的浏览器内应用程序而设计。

  2. 同步:CommonJS模块是同步加载的,意味着每个模块依次加载。另一方面,AMD 使用异步加载,允许浏览器内应用程序加载速度更快并更有效地使用资源。

  3. 复杂性:CommonJS 使用 require 加载模块,使用 module.exports 导出,非常简单。 AMD使用define来定义和require加载模块,这可能需要更多代码,但在浏览器中提供了更大的灵活性。

  4. 兼容性:CommonJS 在 Node.js 环境中运行良好,而 AMD 由于异步加载,在浏览器中提供了更大的灵活性。这使得它们适合不同的目的。

React 中的 AMD 和 CommonJS

在 React 中,AMD 和 CommonJS 并不经常使用,因为 ES6 模块(导入和导出)已经成为模块化的标准方式。但是,在处理不依赖 React 的项目(例如一些旧版 JavaScript 应用程序或基于 Node.js 的项目)时,熟悉 AMD 和 CommonJS 模块可能会很有用。

结论

代码模块化可以构建可扩展、有组织且高效的应用程序。尽管 ES6 模块主要用于 React,但在使用不同的 JavaScript 项目和工具时,了解 AMD 和 CommonJS 模块化会很有用。 CommonJS 由于其同步加载而非常适合服务器端应用程序,而 AMD 可以在浏览器中更快地加载模块,使其成为浏览器应用程序的绝佳选择。

无论选择哪种方法,模块化都是现代 JavaScript 编程的基本实践,并为应用程序的组织、维护和性能带来了许多改进。

版本声明 本文转载于:https://dev.to/jelena_petkovic/uvod-u-modularizaciju-u-react-u-amd-i-commonjs-modularizacija-28h3?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • eval()vs. ast.literal_eval():对于用户输入,哪个Python函数更安全?
    eval()vs. ast.literal_eval():对于用户输入,哪个Python函数更安全?
    称量()和ast.literal_eval()中的Python Security 在使用用户输入时,必须优先确保安全性。强大的Python功能Eval()通常是作为潜在解决方案而出现的,但担心其潜在风险。 This article delves into the differences betwee...
    编程 发布于2025-04-30
  • 您如何在Laravel Blade模板中定义变量?
    您如何在Laravel Blade模板中定义变量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配变量对于存储以后使用的数据至关重要。在使用“ {{}}”分配变量的同时,它可能并不总是最优雅的解决方案。幸运的是,Blade通过@php Directive提供了更优雅的方法: $ old_section =“...
    编程 发布于2025-04-30
  • 如何从Google API中检索最新的jQuery库?
    如何从Google API中检索最新的jQuery库?
    从Google APIS 问题中提供的jQuery URL是版本1.2.6。对于检索最新版本,以前有一种使用特定版本编号的替代方法,它是使用以下语法:获取最新版本:未压缩)While these legacy URLs still remain in use, it is recommended ...
    编程 发布于2025-04-30
  • 为什么PHP的DateTime :: Modify('+1个月')会产生意外的结果?
    为什么PHP的DateTime :: Modify('+1个月')会产生意外的结果?
    使用php dateTime修改月份:发现预期的行为在使用PHP的DateTime类时,添加或减去几个月可能并不总是会产生预期的结果。正如文档所警告的那样,“当心”这些操作的“不像看起来那样直观。 ; $ date->修改('1个月'); //前进1个月 echo $ date->...
    编程 发布于2025-04-30
  • 如何在Java中正确显示“ DD/MM/YYYY HH:MM:SS.SS”格式的当前日期和时间?
    如何在Java中正确显示“ DD/MM/YYYY HH:MM:SS.SS”格式的当前日期和时间?
    如何在“ dd/mm/yyyy hh:mm:mm:ss.ss”格式“ gormat 解决方案:的,请访问量很大,并应为procectiquiestate的,并在整个代码上正确格式不多: java.text.simpledateformat; 导入java.util.calendar; 导入java...
    编程 发布于2025-04-30
  • 为什么HTML无法打印页码及解决方案
    为什么HTML无法打印页码及解决方案
    无法在html页面上打印页码? @page规则在@Media内部和外部都无济于事。 HTML:Customization:@page { margin: 10%; @top-center { font-family: sans-serif; font-weight: bo...
    编程 发布于2025-04-30
  • HTML格式标签
    HTML格式标签
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    编程 发布于2025-04-30
  • 组件驱动CSS框架:开发者的新选择
    组件驱动CSS框架:开发者的新选择
    核心要点 Web Components日益流行,对能够处理这种开发类型的CSS框架的需求也日益增长。传统的CSS框架(如Bootstrap或Foundation)由于其广泛的内置样式和代码,可能会限制开发人员使用Web Components。 组件驱动型CSS框架(如Pattern Lab、SUI...
    编程 发布于2025-04-30
  • 如何在Chrome中居中选择框文本?
    如何在Chrome中居中选择框文本?
    选择框的文本对齐:局部chrome-inly-ly-ly-lyly solument 您可能希望将文本中心集中在选择框中,以获取优化的原因或提高可访问性。但是,在CSS中的选择元素中手动添加一个文本 - 对属性可能无法正常工作。初始尝试 state)</option> < op...
    编程 发布于2025-04-30
  • 在Java中使用for-to-loop和迭代器进行收集遍历之间是否存在性能差异?
    在Java中使用for-to-loop和迭代器进行收集遍历之间是否存在性能差异?
    For Each Loop vs. Iterator: Efficiency in Collection TraversalIntroductionWhen traversing a collection in Java, the choice arises between using a for-...
    编程 发布于2025-04-30
  • 如何高效地在一个事务中插入数据到多个MySQL表?
    如何高效地在一个事务中插入数据到多个MySQL表?
    mySQL插入到多个表中,该数据可能会产生意外的结果。虽然似乎有多个查询可以解决问题,但将从用户表的自动信息ID与配置文件表的手动用户ID相关联提出了挑战。使用Transactions和last_insert_id() 插入用户(用户名,密码)值('test','test...
    编程 发布于2025-04-30
  • `ConfigurationManager.AppSettings.Set`为何不保存App.Config更改?
    `ConfigurationManager.AppSettings.Set`为何不保存App.Config更改?
    app.config值修改quandary 在提供的代码片段中,尝试修改app.config文件中的值。但是,这种修改并不像预期的那样持续。要识别此问题的来源,让我们深入研究提供的代码并探索潜在问题。代码段: lang =“ Russian”; 私有void main_formclosing(对象...
    编程 发布于2025-04-30
  • 如何避免Go语言切片时的内存泄漏?
    如何避免Go语言切片时的内存泄漏?
    ,a [j:] ...虽然通常有效,但如果使用指针,可能会导致内存泄漏。这是因为原始的备份阵列保持完整,这意味着新切片外部指针引用的任何对象仍然可能占据内存。 copy(a [i:] 对于k,n:= len(a)-j i,len(a); k
    编程 发布于2025-04-30
  • C++20 Consteval函数中模板参数能否依赖于函数参数?
    C++20 Consteval函数中模板参数能否依赖于函数参数?
    [ consteval函数和模板参数依赖于函数参数在C 17中,模板参数不能依赖一个函数参数,因为编译器仍然需要对非contexexpr futcoriations contim at contexpr function进行评估。 compile time。 C 20引入恒定函数,必须在编译时进行...
    编程 发布于2025-04-30
  • Java开发者如何保护数据库凭证免受反编译?
    Java开发者如何保护数据库凭证免受反编译?
    在java 在单独的配置文件保护数据库凭证的最有效方法中存储凭据是将它们存储在单独的配置文件中。该文件可以在运行时加载,从而使登录数据从编译的二进制文件中远离。使用prevereness class import java.util.prefs.preferences; 公共类示例{ 首选项...
    编程 发布于2025-04-30

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3