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

数据抽象与配置化

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

如何将应用抽象成数据?

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

将应用抽象成数据

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

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

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

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

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

将数据与应用抽离

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

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

可配置数据





参考教程:前端进阶教程

相关推荐
我叫张小白。6 分钟前
Vue3 Hooks:逻辑复用的解决方案
前端·javascript·vue.js·前端框架·vue
S***t7149 分钟前
前端物联网开发
前端·物联网
我叫张小白。17 分钟前
Vue3 Props 的使用:组件间数据传递的桥梁
前端·javascript·vue.js·vue3
r***869818 分钟前
Nginx解决前端跨域问题
运维·前端·nginx
广州华水科技25 分钟前
单北斗GNSS在桥梁变形监测中的关键应用与技术优势分析
前端
IT_陈寒26 分钟前
Python 3.12新特性实战:10个让你效率翻倍的代码优化技巧
前端·人工智能·后端
z***948426 分钟前
Redis 6.2.7安装配置
前端·数据库·redis
2301_8072886328 分钟前
MPRPC项目制作(第四天)
java·服务器·前端
J***793929 分钟前
前端在移动端中的React Native Windows
前端·react native·react.js
阿雄不会写代码29 分钟前
PPTX报错AttributeError: module ‘collections‘ has no attribute ‘Container‘
前端