前言
因为写vue比较多,vue的核心功能之一就是声明式渲染,所以到声明式和命令式编程这还是需要稍微了解一下啥是声明式编程,啥是命令式编程。
命令式编程
命令式编程(英语:Imperative programming),是一种描述计算机所需作出的行为的编程典范。几乎所有计算机的硬件工作都是命令式的;几乎所有计算机的硬件都是设计来运行机器码,使用命令式的风格来写的。较高阶的命令式编程语言使用变量和更复杂的语句,但仍依从相同的典范。虽非计算机程序,但与命令式编程有相似的风格:每步都是指令,有形的世界控制情况。因为命令式编程的基础观念,不但概念上比较熟悉,而且较容易具体表现于硬件,所以大部分的编程语言都是命令式的
接下来通过示例来看看命令式代码是如何编写的的 示例:
- 获取一个id名为app的div标签
- 它的文本内容为hello wordld
- 为其绑定事件
- 点击弹框时弹出提示: ok
const div = document.querySelector('#app')
div.innerText = 'hello wordld'
div.addEventListener('click',() => { alert('ok') })
由代码可以很明显的看到如何获取dom实例,然后通过dom实例去改变div呈现的内容以及绑定点击事件。所以我们可以理解为命令式编程更加关注的是过程。
声明式编程
声明式这个词可太熟悉了,vue的核心功能之一就是声明式渲染,Vue 基于标准 HTML 拓展了一套模板语法,使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
接下来通过示例来看看声明式代码是如何编写的的 示例:
- 生成一个id为app的div标签
- 它的文本内容为hello wordld
- 为其绑定事件
- 点击弹框时弹出提示: ok
<div id="app" @click="() => alert('ok')">hello wordld</div>
如果我们熟悉上面的语法,我们很容易的就能知道这个模板呈现的效果是什么样的,但是我们并不知道过程是如何的。所以声明式框架更关注的是结果,而不是过程。
性能以及可维护性
那么两种编程所带来的性能消耗以及可维护性如何
性能
看的书上描述的比较严谨谦虚,声明式代码性能不优于命令式代码。正好从前面对框架的思考传送门对得上,就是框架的核心是封装,封装用的底层代码的是命令式代码,那么声明式代码最终也会转化成命令式代码,这个转化的过程肯定是需要消耗性能的。所以性能上来说声明式代码性能不优于命令式代码。
可维护性
命令式代码使得我们需要去关注整个过程,包括DOM的创建、更新、删除等。而声明式代码的展示让我们的代码看上去更直观,并且我们不需要关注DOM的创建、更新、删除等过程。所以从可维护性的角度来说,声明式代码的可维护性优于命令式代码。