从混乱到清晰:建筑的关键作用
在现代发展的快节奏世界中,架构通常决定一个项目是在其自身的复杂性下繁荣还是崩溃。虽然许多开发人员直观地理解架构很重要,但“为什么”和“如何”却很少被讨论。是什么让架构如此重要,如何确保您的选择带来清晰而不是混乱?
本文对 React、Vue、Svelte 和 Vanilla JS 开发人员很有帮助。它对于 Angular 开发人员来说可能没有多大帮助,因为 Angular 默认强制执行严格的架构模式,尽管它仍然可以提供价值。
在我看来,互联网上缺乏关于建筑的详细信息;我只找到了一些有用的资源。这就是为什么我决定创建一系列关于建筑的文章。
现在,让我们探讨什么是架构,为什么我们需要架构,介绍一些关键术语,并讨论不同类型的架构
问题
想象一下开始一个新项目而不规划其架构 - 只是深入研究代码。您开发第一个模块,其中包含子模块和组件之间的链接。然后,您创建第二个模块并将其链接到第一个模块。当您添加更多模块和连接时,这种模式会继续下去。
当您需要删除或编辑模块时就会出现问题。随着项目的增长,复杂性也会增加,模块、子模块无数,它们之间的联系也模糊。最终,这种错综复杂的网络让开发人员头疼,公司的维护成本也更高。
难度===时间===金钱
什么是建筑?
许多开发人员错误地认为架构相当于文件夹结构,但这是错误的。架构超越了文件组织。它描述了模块和组件如何在项目系统中交互。
架构包含项目的各种元素,指定模块和组件应如何开发以及它们应如何互连。
在前端,模块通常是利用业务逻辑的 UI 组件。这些范围可以从大型组件(如页面)到小型组件(如输入、按钮或版式)。
优秀的软件设计应该具备什么?
我们需要确保我们项目的模块具有:
- 高内聚 – 每个模块应该包含相关的业务逻辑。
- 低耦合 – 模块应尽可能相互独立。
内聚力指的是模块可以做什么。低凝聚力意味着班级会采取各种各样的行动——范围广泛,不专注于应该做的事情。高内聚意味着班级专注于它应该做的事情,即只关注与班级意图相关的方法。
耦合是指两个模块彼此之间的相关或依赖程度。对于低耦合模块,更改一个类中的主要内容不应影响另一个类。高耦合会使代码难以更改和维护。由于模块紧密结合在一起,因此进行更改可能需要对整个系统进行改造。
本质上,高内聚意味着将相关的代码片段保存在一个地方。同时,低耦合涉及尽可能分离代码库中不相关的部分。
图片说明如下:
图像中的模块由不同的圆圈表示,很容易发现。模块中的每个圆圈代表负责执行特定任务的类或组件。模块内相同颜色的圆圈表示解决相同任务的元素。图中的箭头描绘了模块之间的连接,说明了它们如何相互交互。
高内聚、高耦合
让我们考虑一下上帝对象反模式。上帝对象是一个具有多个子模块和互连的模块,同时还尝试同时解决多个任务。
这会导致高内聚,因为单个模块负责多个任务,以及高耦合,因为各个模块和子模块之间的连接模糊。
低内聚、低耦合
在这个场景中,模块划分得很好,但是里面的子模块解决了不同的任务(由图像中的不同颜色表示)。但各模块之间的联系仍不清楚。
低内聚、高耦合
这是一个不同的情况。这里,模块划分清晰,模块之间的联系也很牢固。然而,在每个模块内部,内聚性较低,因为它们解决多个任务,导致不必要的复杂性。
尽管如此,这仍然比前两个示例更好,因为您可以轻松删除或修改单个模块。
高内聚、低耦合——理想
在理想的架构中,模块之间的链接是“弱”的,使得删除或修改任何模块都很容易。在每个模块中,组件和类解决一项特定任务(如其统一颜色所示),并且与前面的示例不同,没有职责混合。
虽然这种理想的架构在项目中很少见,因为它需要特定的知识和经验,但这是我们都应该努力的。
结论
架构是模块、组件以及它们之间的连接的结构。
成功架构的关键在于实施 DRY、KISS 和 SOLID 等开发原则。删除和修改模块应该很容易,尤其是删除部分——这是重点。
如果您有任何疑问或想了解更多关于哪种架构的信息,请在评论中告诉我!
以上是从混乱到清晰:建筑的关键作用的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undress AI Tool
免费脱衣服图片

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

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

Clothoff.io
AI脱衣机

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

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

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

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

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

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

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

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

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

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