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

数据抽象与配置化

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

如何将应用抽象成数据?

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

将应用抽象成数据

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

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

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

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

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

将数据与应用抽离

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

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

可配置数据





参考教程:前端进阶教程

相关推荐
勾勾圈圈蛋蛋14 分钟前
Vue2 与 Vue3 响应式数据原理详解
前端
用户693717500138415 分钟前
深夜炸场!DeepSeek 没发新模型,却重构了整个 Agent 生态
前端·后端·github
岁月留痕16816 分钟前
16 实战项目一:实现暗黑模式
前端
岁月留痕16816 分钟前
7 Flutter 篇:玩转组件(一)
前端
码农阿豪18 分钟前
Ubuntu部署GodoOS:Docker搭建Web办公桌面并实现远程访问
前端·ubuntu·docker
郑州光合科技余经理22 分钟前
餐饮预定系统架构拆解:订单链路、权限组织与私有化源码交付
java·开发语言·前端·数据库·人工智能·系统架构·php
满栀5851 小时前
vue3动态路由详细效果
前端·javascript·vue.js·typescript·前端框架
使用小功能大师1 小时前
从零搭建高可用Web应用:全栈架构实战与成本优化完全指南
前端·阿里云·架构·服务搭建
IT_陈寒1 小时前
SpringBoot这个特性差点让我加班到凌晨
前端·人工智能·后端
qq_267612891 小时前
Gitee DevOps的度量驱动持续改进:从构建数据到交付效率的量化管理与优化路径
前端·gitee·自动化