声明式和命令式的权衡与选择

275 阅读1分钟

命令式是原生js和JQuery的编程模式,符合我们的逻辑直觉。让代码从上到下一行行、一步步的,按顺序执行,而达成目标。
声明式是Vue和Reacte的使用模式,操作简单,代码简洁。当然了,Vue内部实现一定是命令式的,但是暴露给用户的已经是封装过的声明式了。
举例:点击按钮改变颜色。
这个行为用命令式实现:按钮点击后,判断状态,然后addClass或者removeClass。
用声明式:color = this.data.color; className = color ? !color : color;
声明式我们不关注细节,只确定规则。

在框架设计的时候,首先,我们需要在性能和可维护性之间权衡。
使用便捷和代码简洁方面,更偏好声明式。但是,“声明式代码的性能不优于命令式代码”。证明如下:
举例:修改标签内的文本内容。

命令式原生js:
div.textContent = 'hello vue3' // 直接修改

而声明式因为修改这个行为是根据结果的不同,来推断需要修改的内容,所以步骤反而更多:

1.先判断old代码与新代码的区别
2.确定需要修改的内容
3.使用div.textContent = 'hello vue3'修改一内容

那么,命令式与声明式消耗的性能为:
我们首先定义,修改文本消耗性能A,判断前后代码的不同消耗性能为B:
命令式:A
声明式:B+A 可见,声明式的性能消耗更大,但同时使用便捷且可维护好。这就是为什么说框架设计时要权衡利弊,在保证易使用和可维护的同时,尽量减少性能的消耗。