清理组件的 3 种方法

简介: 清理组件的 3 种方法

原文链接: mp.weixin.qq.com

原文:michaelnthiessen.com

编写可维护的代码并不容易。这件事学起来难,教别人如何做更难。大多数时候,这是个熟能生巧的事情。但是历年来,我学习到的能让你快速掌握的参考资料还是比较少。

在你全面学习相关知识之前,至少记住这里列出的三个方面:

1. 减少副作用

副作用很糟糕……有时却是必不可少的。

它们造成了应用中大量的复杂性,所以减少它们刻不容缓。

但你又无法完全摆脱副作用,没有它们你的应用将做不了任何有意义的事情。

副作用(side effects)指的是任何能改变其直接作用域之外状态的东西。如果你有一个函数执行了某些计算并在内部跟踪计算结果的中间值,这并不算做副作用;但如果该函数更新了整个组件的状态,那就是有副作用了。

刚才我提到了复杂性,这就是其原因:如果到处都能更新你的状态,就难以追踪到底哪里发生了什么。当你发现了一个由此引发的bug,追根溯源真的难上加难。

更少的副作用 === 更易理解的代码。

2. 使用更多的 computed 属性

嗯痕……我最稀罕的特性就是 Vue 中的计算值了(译注:此处谈论的内容也是通用的,比如在 React 中可用 MobX 等实现)。

如果将组件中的一部分状态和属性转换为计算属性,你就已经施展了清洁组件的魔法。

当然,这不是真实的魔法,但或许你的组件里就真实的存在不恰当的状态和属性。每次将它们替换为派生出来的属性,也就是基于核心状态和属性计算出来,你就又少了一件需要操心的事情。

3. 考虑“组件接缝”

当我还是个孩子的时候,我和我最好的小伙伴花了大把时间在碎石游戏上。看着石头分裂成一小块一小块的让我们乐此不疲,那些石头似乎总是“想要”以某种特定方式碎开。

所有代码也有类似的趣味。有一些特定的接缝贯穿在代码的运行中,自然地确定了代码“想要”被分割的走向。就像一件衬衫是由若干片布料缝合起来的一样,你的组件也有这样的一些接缝。试着找到它们,以将一个大的组件拆分成若干小组件吧。

道理我都懂了,但是。。。读读下面这些吧!

相关文章
|
25天前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
50 4
|
3月前
|
缓存 UED
清除 Nuxt 状态缓存:clearNuxtState
【8月更文挑战第9天】在Nuxt.js中,适时清除状态缓存对保持数据准确性至关重要。当数据更新或需避免多用户间的数据冲突时,清除缓存可确保显示最新状态。可通过创建插件定义`clearNuxtState`方法实现,如用户操作后重置Vuex状态。组件内也可调用此方法。使用时应注意谨慎操作及考虑性能影响,避免不必要的缓存清除以优化用户体验。
|
4月前
|
存储 安全 数据安全/隐私保护
数据销毁,确保硬盘数据无法恢复
在数字时代,保护数据安全包括了如何安全销毁数据以防止泄露。常见的数据销毁方法包括:1) 物理破坏,如砸碎硬盘,确保数据绝对不可恢复,但成本高且无法再利用;2) 软件擦除,使用专业软件覆盖数据,适合保留硬盘的情况,但可能耗时;3) 慢速格式化,较彻底但仅限于单个分区,且时间较长;4) 数据加密,提供额外安全保障,但不删除数据,需要密钥管理。选择哪种方法取决于数据敏感度和设备再利用需求。
数据销毁,确保硬盘数据无法恢复
|
4月前
|
缓存 JavaScript API
vue3 生命周期(生命周期钩子 vs 生命周期选项 vs 缓存实例的生命周期)
vue3 生命周期(生命周期钩子 vs 生命周期选项 vs 缓存实例的生命周期)
85 0
|
6月前
|
程序员 iOS开发
页面的循环引用与监听事件的添加与删除,页面逻辑管理
页面的循环引用与监听事件的添加与删除,页面逻辑管理
36 0
|
6月前
|
JavaScript
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
149 2
|
6月前
|
缓存
自定义 Hook 钩子,实现实时化更新本地缓存
自定义 Hook 钩子,实现实时化更新本地缓存
|
6月前
|
Java Spring 容器
面试题:怎样为组件在创建的时候指定执行一个函数,在销毁的时候也先执行一个函数
面试题:怎样为组件在创建的时候指定执行一个函数,在销毁的时候也先执行一个函数
55 0
|
6月前
|
小程序 前端开发 API
小程序的生命周期以及页面生命周期
小程序的生命周期以及页面生命周期
60 0
|
消息中间件 架构师 数据处理
处理数据时点按钮,数据完数据时会自动执行的问题
处理数据时点按钮,数据完数据时会自动执行的问题