JS与函数式编程(小程序实例)

编程范式(programming paradigm)是软件工程中开发者对于编写代码的构造思路。不同的范式基于不同的理念和原则。函数式编程便是一种基于编写纯函数的代码构造思路。该范式遵守四大原则:1. 函数需纯 2. 避免数据共享 3. 固定变量值 4. 副作用最小化。

1. 纯函数的特点是其针对某个参数固定返回相同的值,并且不产生任何副作用。

2. 共享数据是任何存在于执行环境的公共数据 (e.g. 任何在函数作用域外表示状态的变量)

3. 固定变量值是针对在操作数据的过程中不对变量的值做任何更改。

4. 副作用指的是在函数执行过程中除了对参数进行操作之外的数据操作。

Page({
  data: {
    collections: [] //共享数据
  },
  onLoad() {
    this.getCollections();
  },
  async getCollections() {
    let res = await app.http.promiseGet('/site/user/collections', {});

    //函数操作完成后返回新的collection
    let collections = res.result.map(merchant => {
      let modifiedMerch = Object.assign({
        dropTriangle: true //避免原数据被更改,所以复制对象
      }, merchant);
      return modifiedMerch;
    })

    this.setData({
      collections: collections,
    })
  }
})

上图的代码是小程序的代码结构。data变量内的数据便是共享数据,该数据用于页面渲染。在getCollections函数内,通过调用服务器api获取数据后,主要的业务逻辑是给获取的数据列表内的每一个对象添加dropTriange键。map函数会遍历列表并返回一个新的列表,而每个元素也会通过callback创建出一个新的元素。所以collections变量代表的是一个全新的队列,而res.result队列内的数据也没有发生任何改变。最后只要将collections通过this.setData赋值到data变量内即可。

在开发小程序的过程中产品经过一段时间的迭代,管理data对象内的数据会变得越来越困难。通过引用函数式编程可以对数据操作进行解耦,每个函数能保证不对任何外部状态和数据进行更改并专注于计算出对应参数的输出。函数式编程在该环境下提供了非常简洁的代码结构,提高了程序的可读性同时降低了对象之间的耦合度。每个函数只需要针对参数做处理并不需要考虑作用域外的任何状态变动。

 

 

你可能感兴趣的:(JS与函数式编程(小程序实例))