跳到主要内容

JS Paradigm

· 阅读需 3 分钟
DK

命令式和声明式

从范式上来看,视图层框架通常分为命令式和声明式,它们各有优缺点。作为框架设计者,应该对两种范式都有足够的认知,这样才能做出正确的选择,甚至想办法汲取两者的优点并将其捏合。

命令式和声明式各有优缺点,在框架设计方面,则体现在性能与可维护性之间的权衡。这里我们先抛出一个结论:声明式代码的性能不优于命令式代码的性能。 命令式。

早年间流行的 jQuery 就是典型的命令式框架。命令式框架的一大特点就是关注过程。例如,我们把下面这段话翻译成对应的代码:

01 - 获取 id 为 app 的 div 标签
02 - 它的文本内容为 hello world
03 - 为其绑定点击事件
04 - 当点击时弹出提示:ok

对应的代码为:

01 $('#app') // 获取 div
02 .text('hello world') // 设置文本内容
03 .on('click', () => { alert('ok') }) // 绑定点击事件

可以看到,自然语言描述能够与代码产生一一对应的关系,代码本身描述的是“做事的过程”,这符合我们的逻辑直觉。 声明式 与命令式框架更加关注过程不同,声明式框架更加关注结果。结合 Vue.js,我们来看看如何实现上面自然语言描述的功能:

01 <div @click="() => alert('ok')">hello world</div>

看到没,我要的就是一个 div,文本内容是 hello world,它有个事件绑定,你帮我搞定吧。

总结

命令式更加关注过程,而声明式更加关注结果。命令式在理论上可以做到极致优化,但是用户要承受巨大的心智负担;而声明式能够有效减轻用户的心智负担,但是性能上有一定的牺牲,框架设计者要想办法尽量使性能损耗最小化。