函数组合

2018-09-01

摘要：冴羽的博客学习函数组合

需求

现在需要一个函数，输入’world’，返回 ‘HELLO WORLD’
实现思路: 将输入的字符串小写转大写，再拼接字符串

var toUpperCase = function(x) {
  return x.toUpperCase();
}
var addHello = function(x) {
  return 'HELLO ' + x;
}
var greet = function(x) {
  return addHello(toUpperCase(x))
}
greet('world');

如果有更多的需求，greet 中就会有更多的嵌套，嵌套函数由内而外运行，过多的嵌套不利于维护

函数组合

函数组合就是将多个函数组合成一个函数，让代码从右向左运行，而不是由内而外运行，可读性大大提升
underscore的compose实现：

function compose() {
  var args = arguments;
  var start = args.length - 1;
  return function () {
    var i = start;
    var result = args[start].apply(this, arguments);
    while (i--) result = args[i].call(this, result);
    return result;
  };
};

用ES6实现：

const compose = (...fns) =>
  fns.reduce((f, g) =>
    (...args) =>
      f(g(...args))
  );

有了函数组合，我们就可以更明了的理解程序的执行过程

var greet = compose(addHello, toUpperCase);
greet('world');
// 如果有更多的步骤
// compose(d, c, b, a)

pointfree

Pointfree 的本质就是使用一些通用的函数，组合出各种复杂运算。上层运算不要直接操作数据，而是通过底层函数去处理。这就要求，将一些常用的操作封装成函数。简单说，Pointfree 就是运算过程抽象化，处理一个值，但是不提到这个值。这样做有很多好处，它能够让代码更清晰和简练，更符合语义，更容易复用，测试也变得轻而易举

实战

假设我们从服务器获取这样的数据：

var data = {
  result: "SUCCESS",
  tasks: [
    {
      id: 104, complete: false, priority: "high",
      dueDate: "2013-11-29", username: "Scott",
      title: "Do something", created: "9/22/2013"
    },
    {
      id: 105, complete: false, priority: "medium",
      dueDate: "2013-11-22", username: "Lena",
      title: "Do something else", created: "9/22/2013"
    },
    {
      id: 107, complete: true, priority: "high",
      dueDate: "2013-11-22", username: "Mike",
      title: "Fix the foo", created: "9/22/2013"
    },
    {
      id: 108, complete: false, priority: "low",
      dueDate: "2013-11-15", username: "Punam",
      title: "Adjust the bar", created: "9/25/2013"
    },
    {
      id: 110, complete: false, priority: "medium",
      dueDate: "2013-11-15", username: "Scott",
      title: "Rename everything", created: "10/2/2013"
    },
    {
      id: 112, complete: true, priority: "high",
      dueDate: "2013-11-27", username: "Lena",
      title: "Alter all quuxes", created: "10/5/2013"
    }
  ]
};

现在我们需要写一个名为getIncompleteTaskSummaries的函数，接收一个username作为参数，从服务器获取数据（上面的data），然后筛选出这个用户的未完成的任务的ids、priorities、titles、和dueDate数据，并且按照日期升序排序
过程式编程：

var fetchData = function() {
  return Promise.resolve(data)
}

var getIncompleteTaskSummaries = function(name) {
  // 获取数据后依次筛选出该用户所有数据、未完成的数据、需要显示的数据、按照日期升序排序
  return fetchData()
    .then(function(data) {
      return data.tasks;
    })
    .then(function(tasks) {
      return tasks.filter(function(task) {
        return task.username === name;
      })
    })
    .then(function(tasks) {
      return tasks.filter(function(task) {
        return !task.complete
      })
    })
    .then(function(tasks) {
      return tasks.map(function(task) {
        return {
          id: task.id,
          dueDate: task.dueDate,
          title: task.title,
          priority: task.priority
        };
      })
    })
    .then(function(tasks) {
      return tasks.sort(function(prev, next) {
        var a = prev.dueDate, b = next.dueDate;
        return a < b ? -1 : a > b ? 1 : 0;
      })
    })
    .then(function(tasks) {
      console.log(tasks)
    })
}
getIncompleteTaskSummaries('Scott')
// [
//   {
//     id: 110,
//     dueDate: '2013-11-15',
//     title: 'Rename everything',
//     priority: 'medium'
//   },
//   {
//     id: 104,
//     dueDate: '2013-11-29',
//     title: 'Do something',
//     priority: 'high'
//   }
// ]

利用柯里化（curry）和函数组合(compose) 非常有助于实现pointfree
利用柯里化，先确定处理函数，只剩最后需要处理的数据
pointfree模式：

var fetchData = function() {
  return Promise.resolve(data)
};

// 封装基本函数
// 获取对象的某个属性值
var prop = curry(function(name, obj) {
  return obj[name];
});

// 判断名字是否相等
var propEq = curry(function (name, val, obj) {
  return obj[name] === val;
});

var filter = curry(function (fn, arr) {
  return arr.filter(fn)
});

var map = curry(function (fn, arr) {
  return arr.map(fn)
});

// 筛选要显示的属性
var pick = curry(function (args, obj) {
  var result = {};
  for (var i = 0; i < args.length; i++) {
    result[args[i]] = obj[args[i]]
  }
  return result;
});

// 排序
var sortBy = curry(function (fn, arr) {
  return arr.sort(function (a, b) {
    var a = fn(a),
      b = fn(b);
    return a < b ? -1 : a > b ? 1 : 0;
  })
});

var getIncompleteTaskSummaries = function(name) {
  return fetchData()
    .then(prop('tasks'))
    .then(filter(propEq('username', name)))
    .then(filter(propEq('complete', false)))
    .then(map(pick(['id', 'dueDate', 'title', 'priority'])))
    .then(sortBy(prop('dueDate')))
    .then(console.log)
}

直接使用ramda.js，可以省去编写基本函数（详细介绍Ramda 函数库参考教程）

var getIncompleteTaskSummaries = function (membername) {
  return fetchData()
    .then(R.prop('tasks'))
    .then(R.filter(R.propEq('username', membername)))
    .then(R.filter(R.propEq('complete', false)))
    .then(R.map(R.pick(['id', 'dueDate', 'title', 'priority'])))
    .then(R.sortBy(R.prop('dueDate')))
    .then(console.log)
};

利用compose（ramda.js提供的compose从右向左执行，pipe从右向左执行）

var getIncompleteTaskSummaries = function (membername) {
  return fetchData()
    .then(R.compose(
      console.log,
      R.sortBy(R.prop('dueDate')),
      R.map(R.pick(['id', 'dueDate', 'title', 'priority'])),
      R.filter(R.propEq('complete', false)),
      R.filter(R.propEq('username', membername)),
      R.prop('tasks')
    ))
};

想了解更多请参考Pointfree 编程风格指南