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

数据抽象与配置化

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

如何将应用抽象成数据?

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

将应用抽象成数据

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

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

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

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

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

将数据与应用抽离

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

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

可配置数据





参考教程:前端进阶教程

相关推荐
傻瓜搬砖人30 分钟前
SpringMVC的请求
java·前端·javascript·spring
爱上好庆祝44 分钟前
学习js的第六天(js基础的结束)
开发语言·前端·javascript·学习·ecmascript
IT_陈寒1 小时前
JavaScript的异步地狱,我差点没爬出来
前端·人工智能·后端
光影少年1 小时前
Webpack打包性能优化方面的经验
前端·webpack·性能优化
Das11 小时前
通过命令行下载kaggle数据
前端·chrome
剑神一笑1 小时前
CSS Animation Timeline 可视化动画编辑器:从关键帧到流畅动画
前端·css·编辑器
Dylan的码园1 小时前
springBoot与Web后端基础
前端·spring boot·后端
广州华水科技1 小时前
单北斗变形监测应用于水库的精准GNSS技术解析
前端
2401_878454532 小时前
HTML和CSS的复习2
前端·css·html
We་ct2 小时前
吃透现代CSS全技术体系
前端·css·css3·sass·postcss·预处理器