前端写代码真的有必要封装太好么?

news2024/11/22 16:36:24

前言

封装、代码复用、设计模式……

这些都是方法,业务才是目的。技术始终是为业务服务的。能够满足业务需求,并且用起来舒服的,都是好方法。

不存在一套适用于所有项目的最佳代码组织方法,你需要结合业务,去不断地演进。就像你不会用造汽车的方法,去造火箭,或是自行车。

这里分享一些我自己觉得比较舒服的方法。

1. 船到桥头自然直

不用非得等所有细节都想清楚了才开始动手。你只需要一个大致的方案,从第一个文件开始,先写起来。写着写着,你就会发现:

  • 这里用到的代码,别的地方也用到了
  • 某个函数已经长到超出显示器了
  • 自己经常在来回滚动屏幕找同一个东西
  • 某个变量名在同一个文件中被使用过了
  • 某个地方的逻辑已经复杂到自己都很难一眼就懂了

当这些情况累积到一定程度,你开始有些为之心烦了,你自然就知道,有些代码应该重新安排了。

如果你还没遇到这些情况,或是你觉得还能忍受。不用担心,这说明当前的代码组织方式没什么问题,你什么都不用做,继续就好。

就像打伞。雨小的时候,打不打都行,手里有伞也未必撑开;雨下大了,就都知道要打伞了。

有经验的开发者,尤其是经历过多人协作的大型项目的开发者,通常都会形成一套自己觉得最舒服的打法,可以从一开始就对项目的架构,以及代码的组织方式有一个比较合理的规划。他们在写下第一行代码之前,就清楚地知道项目接下来会变成什么样,自己需要做什么,敲键盘的过程只是把它们心里已经想好的内容进行输出而已。

但如果你只是想做个一个小而美的小工具,项目规模并不大;又或是你入行时间不长,还没有形成自己的一套打发。我建议你试试我这个方法,或许你就能找到适合你的方法。

2. 关注 IOR(投入产出比)

当你的代码超过 1 万行的时候,恭喜,你成功解锁了大中型项目的成就。

(不用太纠结于 1 万这个数字,它只是个数量级而已)

这个时候的项目肯定已经有了一定的组织方式,代码分门别类地存放在不同的目录中,各司其职。

从这个阶段开始,任何全局性的改动,都会附带比较大的成本。所以每一次的决策,除了关注能否解决问题外,还有另一个需要重点考虑的,那就是 IOR —— 投入产出比。说得直白一点:如果我要这么做,我需要投入多少资源?我能得到什么?这么做值得吗?

如果经过改造,代码的结构变得更加清晰、使用起来更加符合直觉、更加契合业务的需要,那么这样的投入就是值得的。反之如果结果并没有变得更好,或是为此需要投入巨大的成本,那么就要重新考虑一下,有没有更好的办法。

3. 合理的 SoC(关注点分离)

这也是题主真正纠结的点。

我们以题主给出的场景为例:同一个页面的业务代码,在不涉及通用组件以及工具函数的情况下,要不要拆成多个组件?

显然这不是一个绝对的要或者不要的问题,业务代码的内容,当然是要由业务来决定。前端的业务结构跟路由有很大的关系,因此一个路由对应一个文件,这本身是一个非常合理的安排。

如果页面组成相对简单,所有逻辑都放在一个文件里,阅读起来会更加方便,维护成本也比较低,那就完全可以不用拆。(应该没几个人会把一个关于页面拆的稀碎吧)

但如果业务复杂到一定程度,比如一个页面中包含了若干个相对独立的部分、单文件的行数开始过千,那么就可以考虑对它们进行拆分。(想象一下如果淘宝的首页只有一个组件)

拆分之后,每个组件关心的事情更少,单文件的行数也会显著下降,配合恰当的变量命名,大概率会使代码结构变得更加清晰。

如果结合 React 等具体技术栈来看,合理的拆分甚至还能减少 DOM 操作,优化性能,典型的像输入框的交互、列表的渲染等,它们的性能都是很容易受到其他组件影响的。

至于组件间的通信,Context、EventBus、RxJS、…… 解决办法有很多。

除了按业务拆,我们还可以按分工拆,典型的就是数据与行为分离,把数据模型从视图模型中剥离出来,分工更加明确一些,各自关注的事情也更加纯粹。

至于拆到什么粒度,可以参考第一条 —— 不让自己心烦了,就算到位了。

像 Redux 等状态管理方案,其存在的最大意义就是方便开发者进行关注点分离。同样的事情,React 自己都能做,但当业务复杂到一定程度,你就会想要把它们独立出来。即便你不引入 Redux,你或许不知不觉中也已经实现了一个简易版的 Redux。

类似的还有 React 的 Custom Hooks,本质是一种代码复用方式,通过把整段的逻辑抽取成单个函数,实现了关注点分离。

4. 模块化,减少冲突

在多人协作的项目中,开发者拆分代码还有一个重要的考虑因素,就是代码冲突。

以 API 为例,把所有的 API 函数抽取到一个独立的文件已经是一个不错的实践,对于独立开发者而言,这往往已经够了。我自己有一些私人的小项目就是这么干的。即便是大型的项目,这么做也不是不可以。

但在多人协同的过程中,每个人负责不同的 Feature,可能同时有多个人都在编辑同一个文件,就很容易产生冲突。如果我们把每一个 API 都拆到一个单独的文件中去,或者按照一定的规则分个类(例如分成 user、product、comment 等 ),冲突的概率就会大大下降,因为和你编辑同一个文件的人变少了。

这本质上就是模块化的思想,每个模块之间相互独立互不干扰,只要结果正确,我并不关心你内部是怎么实现的。

5. 统一化,减少认知负担

团队管理中,一个不容忽视的成本,就是沟通成本。让所有人都步调一致,这可不是一件容易的事。

举个例子:在大型项目中,我们经常会看到这样的结构:一个组件 + 一个 Store,即便这个 Store 里的内容非常的少,完全可以由 State 来承载,甚至里面什么也没有,只是继承了一下父类,也依然会安排一个 Store。

当然,具体到这个组件来看,确实是没有必要。但当你面对几十个甚至几百个组件,你的团队也有差不多的规模的时候,问题就变了。

同一类的组件,有的有 Store 有的没有,这在一些场景下会形成认知负担,开发者需要花时间去熟悉它们的组合,可能还会需要为此编写一些容错代码。如果我们可以确保每一个组件都有一个 Store,即便它并不需要,但依然存在,问题就得到了简化。毕竟让计算机创建一个没用的对象并不会占用太多资源,但相比之下让人工来处理这个问题,成本就很高了。

这样的做法在大厂中比比皆是,有点算法复杂度中空间换时间的意思。

当然,也不排除有些是通过代码模板自动生成的。

总之

代码的管理也是一门艺术,就像写作,如何把你的文字整理成章节,需要慎重的思考。

没有人能告诉你什么是最正确的方法,勇敢去尝试,到时候了,你自然就会知道该怎么做。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1868926.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于PHP+MySQL组合开发家政预约服务小程序源码系统 带完整的安装代码包以及搭建教程

系统概述 在当今数字化时代,家政服务行业也逐渐融入了科技的力量。为了满足市场需求,我们开发了一款基于 PHPMySQL 组合的家政预约服务小程序源码系统。该系统不仅提供了便捷的家政服务预约功能,还具备完整的安装代码包和详细的搭建教程&…

海南云亿商务咨询有限公司怎么样?

在数字化浪潮汹涌的当下,电商行业正以前所未有的速度发展,而抖音作为新兴的电商平台,凭借其独特的短视频直播形式,吸引了无数商家和消费者的目光。海南云亿商务咨询有限公司,作为抖音电商服务的佼佼者,凭借…

苹果相册视频怎么提取音频,一个小工具就能轻松搞定

苹果相册视频怎么提取音频?我们时常捕捉到那些转瞬即逝的美好瞬间,无论是家人欢聚的温馨画面,还是朋友间开怀大笑的片段,每一帧都承载着满满的回忆。而藏匿于这些珍贵视频背后的,往往还有那首触动心弦的背景音乐&#…

[leetcode]squares-of-a-sorted-array. 有序数组的平方

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:vector<int> sortedSquares(vector<int>& nums) {int n nums.size();vector<int> ans(n);for (int i 0, j n - 1, pos n - 1; i < j;) {if (nums[i] * nums[i] > nums[j] *…

Java的lambda表达式使用方式,lambda表达式到底为了做什么

感觉从狭义的使用目的来说&#xff0c;lambda表达式就是为了简化某些匿名内部类&#xff0c;当然不是所有的匿名内部类都能被简写。也就是你想要某些返回值作为参数不用去显示的写调用方法或者传参&#xff0c;具体来看看下面的例子。 // Java7及以前假设想要排序List的方式&a…

吴恩达LangChain教程:Embedding与文档解析

当前有很多应用想要实现根据文档或者文本内容实现用户问答&#xff0c;或者实现多轮会话能力&#xff0c;这时候就会使用到Embedding的能力。 01 | 使用类介绍 想要依据Embedding实现文本检索&#xff0c;需要引入如下的依赖。 其中&#xff0c;RetrievalQA的作用是对一些文档…

开发、测试、产品、运营绩效考核表(Excel原件)

1、产品&运营绩效考核表 2、开发绩效考核表 3、测试绩效考核表 4、CPI指标库 软件资料清单列表部分文档&#xff1a; 工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&#xff0c;产品需求规格说明书&#xff0c;需求调研计划&#xff0c;用户需求调…

鸿蒙开发Ability Kit(程序框架服务):【FA模型切换Stage模型指导】 module的切换

module的切换 从FA模型切换到Stage模型时&#xff0c;开发者需要将config.json文件module标签下的配置迁移到module.json5配置文件module标签下&#xff0c;具体差异见下列表格。 表1 FA模型module标签与Stage模型module标签差异对比 FA标签标签说明对应的Stage标签差异说明…

博尔捷业绩双降:近2000万赔偿80宗案件未了,旗下公司多次沦为被执行人

《港湾商业观察》廖紫雯 日前&#xff0c;BridgeHR Tech Group Inc.&#xff08;博尔捷&#xff09;递表港交所&#xff0c;保荐机构为华泰国际。博尔捷国内运营主体为上海博尔捷数字科技集团有限公司、上海杰而博科技&#xff08;集团&#xff09;有限公司、博尔捷管理咨询&a…

自媒体入门:利用ChatGPT快速制作高点击率的文章和视频

前言 在当今信息爆炸的时代&#xff0c;自媒体已经成为许多人展示自己、分享知识以及赚取收入的重要渠道。对于刚入门的自媒体新人来说&#xff0c;内容创作往往是最大的挑战之一。然而&#xff0c;随着人工智能技术的迅猛发展&#xff0c;ChatGPT 这样的工具为我们提供了高效…

AI在落地企业应用时的“数据幻觉”缘何这么难解决一谈LORA微调与数据质量处理之争

开篇 近年来&#xff0c;随着人工智能技术的飞速发展&#xff0c;越来越多的企业开始将AI落地应用于业务中。然而&#xff0c;不可忽视的是&#xff0c;企业在落地LLM RAG系统时&#xff0c;常常面临一个令人头痛的问题——数据幻觉。 就像透过雾霭的眼睛,看到了一片迷人的景…

Node.js 个人博客

关于该博客 这是一个自己搭建的简易的博客&#xff0c;用于记录一些学习笔记和技术分享。在大四毕业时完成了第一个版本&#xff0c;后续会不断完善和更新。欢迎大家提出宝贵意见和建议。 详细介绍在 blog/posts/博客/博客搭建.md 中: https://github.com/ximingx/blog/blob/m…

Java使用网易邮箱发送邮件

Java使用网易邮箱发送邮件 准备工作&#xff1a;开启 网易邮箱 STMP 模式 弄一个测试案例大家试一下吧&#xff01; public static void sendMail(String email, String emailMsg)throws AddressException, MessagingException {// 配置邮箱服务器String host "smtp.…

视频监控管理平台LntonCVS智能视频监控平台系统详细介绍

安防视频监控平台LntonCVS以其卓越的灵活性和便捷的部署特性在众多同类产品中脱颖而出。它不仅支持多种主流标准协议&#xff0c;如国标GB28181、RTSP/Onvif、RTMP等&#xff0c;还兼容了海康Ehome、海大宇等厂家的私有协议和SDK接入&#xff0c;为用户提供了更加丰富的选择。 …

[leetcode]number-of-longest-increasing-subsequence

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int findNumberOfLIS(vector<int> &nums) {int n nums.size(), maxLen 0, ans 0;vector<int> dp(n), cnt(n);for (int i 0; i < n; i) {dp[i] 1;cnt[i] 1;for (int j 0; j < i…

Mozilla Firefox正在尝试集成ChatGPT等帮助用户总结或改写网页内容

Mozilla基金会开启了一项新计划&#xff1a;在接下来几个月里尝试在Firefox浏览器里集成 ChatGPT 等 AI 服务&#xff0c;帮助用户在网页上总结内容或者改写内容等。Firefox浏览器集成的 AI 服务包括但不限于 ChatGPT、Google Gemini、HuggingChat 等&#xff0c;当然这并不是把…

Python 语法基础二

7.常用内置函数 执行这个命令可以查看所有内置函数和内置对象&#xff08;两个下划线&#xff09; >>>dir(__builtins__) [__class__, __contains__, __delattr__, __delitem__, __dir__, __doc__, __eq__, __format__, __ge__, __getattribute__, __getitem__, __gt…

抖音分销商城小程序源码系统 附带完整的源代码包以及搭建教程

系统概述 在当今数字化时代&#xff0c;电子商务蓬勃发展&#xff0c;各种创新的商业模式不断涌现。抖音分销商城小程序源码系统作为一种具有前瞻性的解决方案&#xff0c;为企业和创业者提供了巨大的机遇。本文将深入探讨这一系统&#xff0c;包括其附带的完整源代码包和搭建…

现货黄金如何操作:黄金技术性止损的运用

止损是现货黄金如何操作中不得不提及的方法。在现货黄金投资过程中&#xff0c;风险是存在的&#xff0c;重要的是如何将风险把控好。这里的一个重要概念就是&#xff0c;要对每一笔交易设定好止损&#xff0c;可以讲&#xff0c;这就是现货黄金如何操作的方法中最重要的一种。…

RestTemplate修改默认转换器,使用FastJsonConverter

问题描述&#xff1a; 在使用RestTemplate发送POST请求时&#xff0c;发现发送的数据并未按配置的JSONField转换&#xff0c;导致服务方一直收不到参数 排查过程&#xff1a; 将itemList改成Items传输即可 原因分析&#xff1a; RestTemplate有默认的转换器&#xff0c;所以…