权衡

51 阅读3分钟

权衡

高内聚低耦合

相较于函数,类是更广泛的概念的集合。

下面站在面向对象使用JavaScript的时候,考虑问题。

在前端编程中,貌似使用一个类代表一个组件比较合适。经过前端领域模型的构建,设计出对应的类,对应到页面的组件,提前考虑类之间的继承,多态等关系,可以设计出符合高内聚、低耦合、可扩展等特征的优秀的类。

But

老板给你的时间&压力,你有这么多精力去经历OOA-OOD-OOP的阶段进而设计出一个优秀的类吗?

大部分公司是不会给员工这么多时间去这样做的。那么我们把主要矛盾给抽象出来。我们目前将问题集中在编辑代码实现功能,方便后期修改上。至于实现的功能有没有bug,性能如何,先放一放。(比如bug可以等到遇到再处理,性能的提升来自于程序员对该语言本身的了解)

So

我们的问题就变成了:

  • 怎样快速实现功能?
  • 怎样快速修改需求?

关于怎样快速实现功能呢?最好是框架提供丰富的API,我们去调用就行了。

经过前文的铺垫,这里才是我们想要引出的点。怎么快速修改需求呢?

前文说过,我们的代码大部分情况下是没有经历过严格的设计的,所以编辑了一段时间后很容易出现一个类里面包含了几千行代码,甚至更过分。并不是说类里面不可以包含这么多代码,但是这些代码是没有经过设计的。比如,你确定goToSchool方法应该包含在Person类里面吗?你怎样界定Person类的边界呢?为了解决这种问题,我们往下看。

下面站在将面向对象和面向过程结合的角度使用JavaScript,考虑问题。

为了实现一个复杂功能,我们需要用到函数的链式调用。该链条上的基本单元是函数。采用类的时候,领域边界不明很容易导致我们的代码调用链条最后就像毛线团一样杂揉在一起。耦合程度异常高。最后编辑出来的代码符合高耦合,低内聚的特点。

思考一下,如果我们不使用类来组织前端代码,是否有更好的方式呢?

这就是函数式组件的由来。框架提供部分数据结构和过程,我们通过编辑Function,实现自定义的数据结构和过程。

将函数作为编程的基本单元,根据SRP原则,程序员的关注点不需要像之前编辑类的时候那样广泛,减轻了思考负担。

目前,无论是Vue还是React都提倡大家使用函数式组件。

声明周期

others

命令式、声明式、函数式

命令式:命令式代码提供实现命令的数据结构,编程人员需要关心实现的过程。eg:JQuery中提供了$数据结构。

声明式:声明式代码提供了数据结构和匹配该数据结构的过程,编程人员只需要按照固定的用法将标签放在指定的位置即可。eg:Vue中提供了<KeepAlive>标签。

函数式:需要程序员利用函数实现过程和数据结构。函数语法的{}部分封装了过程和数据结构。

每种方式都有自己的好处,每个框架在编写的时候都是取长补短,不断权衡,站在不同的角度取舍,最后呈现的样貌才是艺术的结晶。

Vue和React都引入了Hooks,偏重于函数式编程的思想。


参考文档