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

数据抽象与配置化

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

如何将应用抽象成数据?

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

将应用抽象成数据

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

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

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

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

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

将数据与应用抽离

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

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

可配置数据





参考教程:前端进阶教程

相关推荐
子兮曰2 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰2 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万2 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝2 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋2 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁2 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95272 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大2 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师2 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学2 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端