首页 web前端 js教程 从混乱到清晰:建筑的关键作用

从混乱到清晰:建筑的关键作用

Aug 22, 2024 pm 06:32 PM

在现代发展的快节奏世界中,架构通常决定一个项目是在其自身的复杂性下繁荣还是崩溃。虽然许多开发人员直观地理解架构很重要,但“为什么”和“如何”却很少被讨论。是什么让架构如此重要,如何确保您的选择带来清晰而不是混乱?

本文对 React、Vue、Svelte 和 Vanilla JS 开发人员很有帮助。它对于 Angular 开发人员来说可能没有多大帮助,因为 Angular 默认强制执行严格的架构模式,尽管它仍然可以提供价值。

在我看来,互联网上缺乏关于建筑的详细信息;我只找到了一些有用的资源。这就是为什么我决定创建一系列关于建筑的文章。

现在,让我们探讨什么是架构,为什么我们需要架构,介绍一些关键术语,并讨论不同类型的架构

问题

想象一下开始一个新项目而不规划其架构 - 只是深入研究代码。您开发第一个模块,其中包含子模块和组件之间的链接。然后,您创建第二个模块并将其链接到第一个模块。当您添加更多模块和连接时,这种模式会继续下去。

当您需要删除或编辑模块时就会出现问题。随着项目的增长,复杂性也会增加,模块、子模块无数,它们之间的联系也模糊。最终,这种错综复杂的网络让开发人员头疼,公司的维护成本也更高。

难度===时间===金钱

什么是建筑?

许多开发人员错误地认为架构相当于文件夹结构,但这是错误的。架构超越了文件组织。它描述了模块和组件如何在项目系统中交互。

架构包含项目的各种元素,指定模块和组件应如何开发以及它们应如何互连。

在前端,模块通常是利用业务逻辑的 UI 组件。这些范围可以从大型组件(如页面)到小型组件(如输入、按钮或版式)。

优秀的软件设计应该具备什么?

我们需要确保我们项目的模块具有:

  1. 高内聚 – 每个模块应该包含相关的业务逻辑。
  2. 低耦合 – 模块应尽可能相互独立。

内聚力指的是模块可以做什么。低凝聚力意味着班级会采取各种各样的行动——范围广泛,不专注于应该做的事情。高内聚意味着班级专注于它应该做的事情,即只关注与班级意图相关的方法。

耦合是指两个模块彼此之间的相关或依赖程度。对于低耦合模块,更改一个类中的主要内容不应影响另一个类。高耦合会使代码难以更改和维护。由于模块紧密结合在一起,因此进行更改可能需要对整个系统进行改造。

本质上,高内聚意味着将相关的代码片段保存在一个地方。同时,低耦合涉及尽可能分离代码库中不相关的部分。

From Chaos to Clarity: The Critical Role of Architecture

图片说明如下:

图像中的模块由不同的圆圈表示,很容易发现。模块中的每个圆圈代表负责执行特定任务的类或组件。模块内相同颜色的圆圈表示解决相同任务的元素。图中的箭头描绘了模块之间的连接,说明了它们如何相互交互。

高内聚、高耦合

让我们考虑一下上帝对象反模式。上帝对象是一个具有多个子模块和互连的模块,同时还尝试同时解决多个任务。

From Chaos to Clarity: The Critical Role of Architecture

这会导致高内聚,因为单个模块负责多个任务,以及高耦合,因为各个模块和子模块之间的连接模糊。

低内聚、低耦合

在这个场景中,模块划分得很好,但是里面的子模块解决了不同的任务(由图像中的不同颜色表示)。但各模块之间的联系仍不清楚。

From Chaos to Clarity: The Critical Role of Architecture

低内聚、高耦合

这是一个不同的情况。这里,模块划分清晰,模块之间的联系也很牢固。然而,在每个模块内部,内聚性较低,因为它们解决多个任务,导致不必要的复杂性。

From Chaos to Clarity: The Critical Role of Architecture

尽管如此,这仍然比前两个示例更好,因为您可以轻松删除或修改单个模块。

高内聚、低耦合——理想

在理想的架构中,模块之间的链接是“弱”的,使得删除或修改任何模块都很容易。在每个模块中,组件和类解决一项特定任务(如其统一颜色所示),并且与前面的示例不同,没有职责混合。

From Chaos to Clarity: The Critical Role of Architecture

虽然这种理想的架构在项目中很少见,因为它需要特定的知识和经验,但这是我们都应该努力的。

结论

架构是模块、组件以及它们之间的连接的结构。

成功架构的关键在于实施 DRY、KISS 和 SOLID 等开发原则。删除和修改模块应该很容易,尤其是删除部分——这是重点。

如果您有任何疑问或想了解更多关于哪种架构的信息,请在评论中告诉我!

以上是从混乱到清晰:建筑的关键作用的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Vercel SPA路由与资源加载:解决深层URL访问问题 Vercel SPA路由与资源加载:解决深层URL访问问题 Aug 13, 2025 am 10:18 AM

本文旨在解决在Vercel上部署单页应用(SPA)时,深层URL刷新或直接访问导致页面资源加载失败的问题。核心在于理解Vercel的路由重写机制与浏览器解析相对路径的差异。通过配置vercel.json实现所有路径重定向至index.html,并修正HTML中静态资源的引用方式,将相对路径改为绝对路径,确保应用在任何URL下都能正确加载所有资源。

Vercel 单页应用 (SPA) 部署指南:解决深度 URL 资产加载问题 Vercel 单页应用 (SPA) 部署指南:解决深度 URL 资产加载问题 Aug 13, 2025 pm 01:03 PM

本教程旨在解决 Vercel 上部署单页应用 (SPA) 时,在访问多层级 URL(如 /projects/home)时遇到的资产(CSS、JS、图片等)加载失败问题。核心在于理解 Vercel 的路由重写机制与 HTML 中相对/绝对路径的差异。通过正确配置 vercel.json 确保所有非文件请求重定向至 index.html,并修正 HTML 中资产引用为绝对路径,从而实现 SPA 在任意深度 URL 下的稳定运行。

Qwik:用于即时加载Web应用程序的可重新框架 Qwik:用于即时加载Web应用程序的可重新框架 Aug 15, 2025 am 08:25 AM

Qwikachievesinstantloadingbydefaultthroughresumability,nothydration:1)TheserverrendersHTMLwithserializedstateandpre-mappedeventlisteners;2)Norehydrationisneeded,enablingimmediateinteractivity;3)JavaScriptloadson-demand,onlywhenuserinteractionoccurs;4

js添加元素到数组的开始 js添加元素到数组的开始 Aug 14, 2025 am 11:51 AM

在JavaScript中,向数组开头添加元素最常用的方法是使用unshift()方法;1.使用unshift()会直接修改原数组,可添加一个或多个元素,返回添加后的数组新长度;2.若不想修改原数组,推荐使用扩展运算符(如[newElement,...arr])创建新数组;3.也可使用concat()方法,将新元素数组与原数组合并,返回新数组且不改变原数组;综上,修改原数组时用unshift(),保持原数组不变时推荐扩展运算符。

如何使用JavaScript懒负载图像 如何使用JavaScript懒负载图像 Aug 14, 2025 pm 06:43 PM

Usetheloading="lazy"attributefornativelazyloadinginmodernbrowserswithoutJavaScript.2.Formorecontrolorolderbrowsersupport,implementlazyloadingwiththeIntersectionObserverAPIbysettingdata-srcfortheactualimageURLandusingaplaceholderinsrc.3.Obse

深入解析JavaScript XSS防御函数的常见漏洞与改进策略 深入解析JavaScript XSS防御函数的常见漏洞与改进策略 Aug 14, 2025 pm 10:06 PM

本文深入探讨了自定义JavaScript XSS防御函数中常见的安全漏洞,特别是字符转义不完整和基于关键字的过滤易被绕过的问题。通过分析一个示例函数,揭示了引号、反引号等关键字符未处理的风险,以及代码混淆技术如何规避简单关键词检测。文章强调了上下文敏感转义的重要性,并建议采用成熟的库和多层防御策略,以构建更健壮的安全防护。

如何使用JavaScript中的DOM访问和修改HTML元素 如何使用JavaScript中的DOM访问和修改HTML元素 Aug 16, 2025 am 11:25 AM

toaccessandModifyHtmlelementsIsjavaScript,firstSelectThelementIsedmethodslikedocument.getElementbyId,document.querySelector,ordocument.queryselector.clearselectorall,thenAlterItsContent,thenAlteritScontent,attributes,artibutes,orstyles,orstyles; orstyles; orstyles;

JavaScript多条件过滤:实现基于AND/OR逻辑的动态产品筛选 JavaScript多条件过滤:实现基于AND/OR逻辑的动态产品筛选 Aug 22, 2025 am 10:00 AM

本教程详细介绍了如何使用JavaScript实现多条件动态筛选功能,允许用户根据颜色、尺寸等多个属性进行产品过滤。文章通过清晰的HTML结构和JavaScript代码示例,演示了如何灵活处理AND和OR逻辑,以满足复杂的用户筛选需求,并提供优化建议。

See all articles