还在用命令式编程吗？优化成声明式编程吧~

声明式编程和命令式编程是两种不同的编写逻辑的方式。声明式编程关注的是实现目标，不在乎过程。命令式编程关注的是实现的具体过程。

不容易理解？来看几个例子。

例子

例子1: 办年会

年底了，公司准备举办年会。

命令式的做法：老板和HR说，

年会订在某某酒店。
搞个抽奖。一等奖 1 个，Mac pro。二等奖 3 个， ipad pro…

命令式的做法，老板和 HR 说的是年会的具体过程。

声明式的做法：老板和HR说，

给你 10万预算，办一个让员工满意的年会。

声明式的做法：老板和 HR 说的是年会的目标。

例子2: 对满足条件的数组内容求和

实现这样的功能：将数组中的正数做平方，然后再求和。

命令式的做法:

const arr = [-1, -2, 1, 2, 3]
let sum = 0
arr.forEach(item => {
  if(item > 0) {
    sum += item * item
  }
})

命令式做的是具体过程：循环数组，将正数找出来，用 sum 变量存当前的和，不断地加正数的平方。

声明式的做法：

const arr = [-1, -2, 1, 2, 3]

const sum = arr
    .filter(item => item > 0)
    .map(item => item * item)
    .reduce((prev, current) => prev + current, 0)

声明式定义了目标：筛选正数，做平方，求和。不关注过程：如何传入过滤条件就能获得结果，如何做映射，如何将数组收敛成一个值。过程是数组的 filter, map, reduce 方法实现的。

在这个例子中，我们发现，声明式的代码比命令式代码逻辑清晰，可读性强。

例子3: 实现 TODO List

有一个列表。实现这样的功能：当新增，修改，删除子项目后，列表做对应的变化。

命令式的做法：给新增按钮，修改按钮，删除按钮绑点击事件。在点击事件回调里对 DOM 做对应的修改：新增元素，修改元素内容，删除元素。

声明式的做法：声明了列表数据和 DOM 的映射关系和事件绑定关系。当新增按钮，修改按钮，删除按钮被点击时，只修改列表数据。列表对应的 DOM 会被用自动更新。React，Vue 等框架都实现了声明数据和 DOM 的关系，当数据变化时，根据声明更新对应的 DOM。

试想，如果列表的 DOM 结构发生变化，使用命令式的要改 DOM 变化导致的选择器的变化。而声明式的代码不需要改。如果这个列表运行在没有 DOM 的环境（小程序，APP），使用命令式的代码就完全不能用了。而声明式的代码只要改用支持当前环境的跨端框架即可，比如 Taro^[1] 等。

在这个例子中，我们发现，在环境发生变化时，声明式的代码比命令式代码改动小。

将命令式代码转化声明式代码

上面的 3 个例子，介绍了 命令式编程 和 声明式编程 的区别。以及声明式编程的优点。那么，如何将命令式代码转化声明式代码呢？

将命令式代码转化成声明式代码，就是要分离过程和目标。对过程做封装，就目标传入封装的过程中。举个例子：实现将对象的所有属性值乘2。

命令式代码这么写：

const obj = { a: 1, b: 2, c: 3 }
const res = {}
Object.keys(obj)
    .forEach(key => {
        res[key] = obj[key] * 2
    })

上面的代码中，遍历 key，做 map 是过程。我们来该过程封装成函数：

function mapObjValue(obj, fn) => {
  const res = {}
  Object.keys(obj).forEach(key => {
    res[key] = fn(obj[key])
  });
  return res
}

目标是属性值乘 2：

function mapFn = item => item * 2

组合起来，声明式代码这么写：

const obj = { a: 1, b: 2, c: 3 }
const res = mapObjValue(obj, mapFn)

总结

参考资料

[1]

Taro: http://taro-docs.jd.com/taro/docs/README

原文始发于微信公众号（前端GoGoGo）：还在用命令式编程吗？优化成声明式编程吧~

文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/45606.html