命令式和声明式

一·、命令式和声明式

从范式上来看，视图层框架通常分为命令式和声明式，他们各有优缺点。

概念：

早年间流行的jQuery就是典型的命令式框架。命令式框架的一大特点就是关注过程。

例子：把下面这段话翻译成对应的代码

　　获取id为app的div标签

　　它的文本内容为hello world

　　为其绑定点击事件

　　当点击时弹出提示：ok

对应的代码为

　　1.JQuery实现

        $('#app') // 获取div

　　　　.text('hello world') // 设置文本内容

　　　　.on('click', () => { alert('ok') }) // 绑定点击事件

　　2.Javascript实现

　　const div = document.querySelector('#app') // 获取div

　　div.innerText = 'hello world' // 设置文本内容

　　div.addEventListener('click', () => { alert('ok') }) // 绑定点击事件

可以看到，自然语言描述能够与代码产生一一对应的关系，代码本身描述的是“做事的过程”，这符合我们的逻辑直觉。

那么，什么是声明式框架呢？与命令式框架更加关注过程不同，声明式框架更加关注结果。结合Vue.js，实现上面自然语言描述的功能：

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

总结：命令式更加关注过程，而声明式更加关注结果。命令式在理论上可以做到极致优化，但是用户要承受巨大的心智负担；而声明式能够有效减轻用户的心智负担，但是在性能上有一定的牺牲。