【前端进阶】15 提升开发效率 数据抽象与配置化

数据抽象与配置化

在业务开发过程中,在很多地方会使用到抽象的能力,比如:将页面内容抽象为数据展示,将页面的呈现方式抽象为状态。通过抽象的方式我们可以将整个前端应用使用数据的方式来进行表达,还可以配合配置化来减少硬编码,提升功能的灵活性。

如何将应用抽象成数据?

怎么配合配置化来提升代码的可维护性?

将应用抽象成数据

  • 将页面划分成模块和组件

  • 将模块和组件抽象成数据

    根据数据的来源可以分成内部数据(状态数据)和外部数据(动态数据):

  • 内部数据(状态数据):部分组件的状态会相互影响,所有状态的结合便是应用最终的整体状态,这些状态维护在应用内部,可以通过数据的方式来表达,称之为内部数据(状态数据)

  • 外部数据(动态数据):除了应用本身的状态数据,还有很多不属于应用状态的数据,需要从外部获取,用于页面展示或是影响展示的一些数据,称作外部数据(动态数据)

将数据与应用抽离

当我们将模块和组件的状态和内容抽象成数据后,就可以将这些数据独立出来进行管理,也可以更好地解决模块/组件间耦合、依赖、通信等问题

配置化的思想不仅仅存在于前端或者某个领域,大多数的系统和功能设计都可以用领域抽象、数据抽离、配置化等方式减少开发和维护的成本

可配置数据





参考教程:前端进阶教程

相关推荐
lihaozecq1 分钟前
继 Web Coding Agent 后,我做了一个本地优先的桌面 AI Agent
前端·agent
用户298698530148 分钟前
在 React 中使用 JavaScript 将 Excel 转换为 SVG
前端·javascript·react.js
CodingSpace21 分钟前
ESLint
前端
Csvn28 分钟前
异步错误捕获的六大陷阱:await 裹着 try-catch 就一定稳了吗?
前端
用户0595401744631 分钟前
向量库静默丢数据踩坑实录:Playwright 端到端测试让我排查了72小时
前端·css
星栈36 分钟前
SPA 写累了?试试 LiveView:服务端管状态,前端不写 JS
前端·前端框架·elixir
labixiong40 分钟前
手写Promise--微任务、静态方法、async/await 全搞懂(三)
前端·javascript
Asize1 小时前
CSS 3D:从布局到立方体
前端
梨子同志1 小时前
React
前端
万少1 小时前
22 点后,我靠这个 AI 工具成了"夜间天才程序员"
前端·后端