从表单验证窥视函数式的一隅

 
// 比如：Ant Design Pro 中的 Form 内置方法
function getFieldValues() {
  return {} // 假设而已
}
 
function validator(_, value) {
  const formStore = getFieldValues()
  checkIsTimeout(formStore)
  checkTime(formStore)
  checkIsBeyondTimeLimit(value)
}
 
function checkIsBeyondTimeLimit(value) {
  return new Promise((res, rej) => {
    if (!value) rej(new Error('xxx'))
    if (value.format("HH:mm").replace(/:/g, '') > 2000) rej(new Error('最早预约时间应该早于最晚预约时间'))
    res('success')
  })
}
 
function checkTime(store) {
  return new Promise((res, rej) => {
    if (store.earliestTakeoutDay > ) rej(new Error('最早预约时间应该早于最晚预约时间'))
    res('success')
  })
}
 
function checkIsTimeout(store) {
  return new Promise((res, rej) => {
    if (store.earliestTakeoutDay > store.latestTakeoutDay) rej(new Error('最早预约时间应该早于最晚预约时间'))
    res('success')
  })
}
 
 

/* 
 *  首先我们声明一些工具函数，
 *  这里我们不去纠结一些边界的处理，
 *  或是工具的不同实现方式了哈，
 *  因为我们的重点是窥视函数式编程的一隅，
 *  
 */
 
/**
 * 这里先介绍一下管道函数，他把传入的函数按顺序组合在一起，
 * 上一个函数的执行结果作为下一个函数的入参，下面会用到
 *  */
function pipeline(...fnArr) {
  return (...args) => fnArr.reduce((acc, fn) => [fn(...acc)], args)[0]
}
 
const splitStr = (str) => str.split(',')
const reverseArr = (arr) => arr.reverse()
const joinArr = (arr) => arr.join(',')
 
const reverseStringFunc = pipeline(splitStr, reverseArr, joinArr)
console.log(reverseStringFunc('1,2,3,4,5,6,7,8,9'))
// '9,8,7,6,5,4,3,2,1'

// 函数式有时候像是把一件复杂事情拆成很多单一的简单事情
// 就像是把分子拆成原子，甚至更小
const findMax = (...rest) => Math.max(...rest.map(Number))
const findMin = (...rest) => Math.min(...rest.map(Number))
const isBiggerOrEqual = (judge) => (val) => val >= Number(judge)
const isSmallerOrEqual = (judge) => (val) => val <= Number(judge)
const rejectByError = (errMsg) => (isPass) => isPass ? isPass : Promise.reject(new Error(errMsg))
 
/**
 *  比如一个业务是：检测传入的参数中是否是最后一个最大
 *  我们可以用上面 5 个简单函数合并出来 N 个复杂函数
 *  通过合成出来的复杂函数，可以直接应用到表单的 validator 中去
 *  */
const checkIsLastOneBiggest = (...args) => pipeline(findMax, isBiggerOrEqual(args.at(-1)), rejectByError('所选值必须小于等于最后一个值'))(...args)
const checkIsFirstOneBiggest = (...args) => pipeline(findMax, isBiggerOrEqual(args.at(0)), rejectByError('所选值必须小于等于第一个值'))(...args)
const notLessThan2000 = pipeline(findMin, isBiggerOrEqual(2000), rejectByError('所选值不能小于2000'))
const sholdLessThan2000 = pipeline(findMax, isSmallerOrEqual(2000), rejectByError('所选值不能大于2000'))