TODO:函数式编程

函数式代码复用性更高

纯函数

使用纯函数（给定的输入始终能得到相同的输出），没有外部依赖，优点：

• 结果可可控制，可推测，方便测试
• 无依赖，模块化方便复用
• 无副租用
• 代码可读性强

immutable 不可变数据(纯数据)

const obj = {
  name: 'lee'
}
Object.freeze(obj); // 浅层冻结

function deepFreeze(obj) {
  Object.freeze(obj);
  for(let i in obj) {
    if(typeof obj[i] === 'object') {
      deepFreeze(obj[i]);
    }
  }
}

TODO: 通过 getter setter 或则 # 新语法设置属性不可变

TODO: 纯数据复制映射

高阶函数

以函数作为输入或输出的函数，作用：

• 抽象
• 缓存，即闭包
• 惰性执行，防抖、节流

function once(fn) {
  let done = false;
  return function () {
    if(done) {
      return;
    }
    fu();
    done = true;
  }
}

柯里化

将多元函数转化为一元函数，讲一个接收多个参数的函数转化为接收一个参数返回一个函数的形式，以便再次调用。

bind 方法除了可以绑定 this 外还可以绑定允许参数，即柯里化

var setStyle = function (size, color){
  this.style.fontSize = size;
  this.style.color = color;
}

var title = document.getElementById('t1');
var setH1Style = setStyle.bind(title,'16px');

setH1Style('red');

function add() {
  const _args = [...arguments];
  function fn() {
    _args.push(...arguments);
    return fn;
  }
  fn.toString = function() {
    return _args.reduce((sum, cur) => sum + cur);
  }
  return fn;
}
console.log(add(1)(2)(3)(4).toString()) // 10
console.log(add(1)(1, 2, 3)(2).toString()) // 9

TODO:柯里化使用场景

我终于了解了函数柯里化 柯里化使用场景

1. 参数复用：简化参数输入，提升代码可读性
2. 兼容性代码
3. 延迟执行

// URI生成
function uriCurring (protocol) {
  return function (hostname, pathname) {
    return `${protocol}://${hostname}${pathname}`
  }
}
function uri_https = uriCurring('https');


// 正则验证
function checkByRegExp(regExp,string) {
  return regExp.test(string);
}
let _check = curry(checkByRegExp);

let checkCellPhone = _check(/^1\d{10}$/);
let checkEmail = _check(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/);

checkCellPhone('18642838455'); // 校验电话号码
checkEmail('test@163.com'); // 校验邮箱

``JS 兼容性 const withEvent = (function (){ if(window.addEventListener) { return function (element, type, listener, useCapture) { element.addEventListener(type, function (e) { listener.call(element, e); }, useCapture) } }else if (window.attachEvent) { return function (element, type, handler) { element.attachEvent(on${type}`, function (e) { handler.call(element, e) }) } } })();

```JS
function add () {
  this._cacheArgs = this._cacheArgs || (this._cacheArgs = []);
  if (arguments.length) {
    this._cacheArgs = [...this._cacheArgs, ...arguments];
    return arguments.callee;
  }else{
    const result = this._cacheArgs.reduce((current, item)=>{
      return current+item
    }, 0)
    this._cacheArgs = []
    return result
  }
}