怎么理解组件化开发

组件化没有官方严格的定义,以下是对网络中一些说法的整理

1.    对组件的理解

原文

a)     UI组件

项目各个页面中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件。

b)     业务组件

而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的代码超过5000行的场景渐渐增多,这个时候页面的维护便会很有问题,牵一发而动全身的事情会经常发生,为了解决这个问题,便出现了前端组件化,这个组件化就不是UI组件了,而是包含具体业务的业务组件。

c)     组件化思想--分而治之

这种开发的思想其实也就是分而治之(最重要的架构思想),页面逻辑过于复杂,便将页面分为很多个业务组件模块分而治之,这样的话维护人员每次只需要改动对应的模块即可,以达到最大程度的降低开发难度与维护成本的效果,所以现在比较好的框架都会对组件化作一定程度的实现。

d)     数据

组件一般是与展示相关,视觉变更与交互优化是一个产品最容易产生的迭代,所以多数组件相关的框架核心都是View层的实现,比如Vue与React的就认为自己仅仅是“View”,虽然展示与交互不断的在改变,但是底层展示的数据却不常变化,而View是表象,数据是根本,所以如何能更好的将数据展示到View也是各个组件需要考虑的,从而衍生出了单向数据绑定与双向数据绑定等概念,组件与组件之间的通信往往也是数据为桥梁。

e)     复杂业务是关键

所以如果没有复杂的业务逻辑的话,根本不能体现出组件化编程解决的痛点

2.    组件化定义

作者:张立理

链接:https://www.zhihu.com/question/29735633/answer/90872147

我将“组件化”理解为以下几要素:

a)     组件是对逻辑的封装,不限于图形元素。

即我们可以把if做成组件、把一个倒计时做成组件、把一段动画做成组件、把路由做成组件、把数据架构做成组件,而这些并不能称为控件

b)     组件具备单个可移植性

即“随加载随用”,不需要为其准备复杂的基础条件(如引入样式、引入框架等)。然而这一点现有那些所谓组件库做得并不好,技术上也不大现实

c)     组件是声明式定义的,而非命令式。

这个不想多说,很大程度上是自己主观的一个想法而上面最重要的就是第一点,所以要问我什么是“组件化开发”,我的说法是:把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式。

这与传统开发框架的最大区别就是统一了图形元素与非图形元素,除此之外我再想不出其它真正体现区别的点了在这个概念下,包括router、ajax、module loader、timer、animation、interval等,都是组件,共享统一的生命周期管理和对外接口,且都是声明式地进行组合。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgzpjp.html