设计模式总结

• 使用create方法，实现原型的继承,创建prototype和对象之间的关联关系

Object.create = function (obj) {
  var function A() {}  
  A.prototype = obj
  return new A()
}

• 体现多态

function makeSound (animal) {
  animal.sound()
}  
function Dog() {}
Dof.prototype.sound = () => {}
makeSound(new Dog())

• 最常用的原型继承方式

let obj = {}
function A () {}
A.prototype = obj

function B () {}
B.prototype.getName = () => {}

functin C() {}
C.prototype = new B()
let c = new C()
c.getName

• es6 的类

class Animal {
  constructor (name) { this.name = name }
  getName () { console.log(this.name) }
}

class Dog extends Animal {
  constructor (name) {
    super(name)
  }
  speak () { console.log('speak') }
}

let dog = new Dog('xiao bai')
dog.getName()
dog.speak()

• 使用apply和call 实现bind

Function.prototype.bind = function (context) {
  return (...args) => {
    return this.apply(context, args)
  }
}

Function.prototype.bind = function (context) {
  return (...args) => {
    return this.call(context, ...args)
  }
}

Function.prototype.bind = (conext, ...bindArgs) {
  return (...args) => {
    this.apply(context, [...bindArgs, ...args])
  }
}

• 借用其他对象的方法,通过借用构造函数的方法实现继承

function A (name) {
  this.name = name
}

function B (...args) {
  A.apply(this, args)
  this.age = args[0]
}

B.prototype.getName = function () {
  console.log(this.name)
  console.log(this.age, 'age')
}

let b = new B('name1')
b.getName()

• 借用构造函数的方法实现将类数组中的一个值添加到数组中

(() => {
  Array.prototype.push.apply(arguments, 3)
})(1, 2)

• 判断数据类型的函数封装

fucntion isType (type) {
  return (value) => {
      return Object.prototype.tostring.call(value) == `[object ${type}]`
  }
}

• 利用闭包实现单例模式的最简单实现

let getSingle = (fn) => {
  let ret;
  return (x) => {
    return ret || (ret = fn())
  }
}

• 使用高阶函数实现AOP

Function.prototype.before = function (fn) {
  return (...args) => {
    fn (...args)
    return this(...args)
  }
}

Function.prototype.after = function (afterFn) {
  return  (...args) => {
    const ret = this(...args)
    afterFn(...args)
    return ret
  }
}

• curry 将参数存储，最后一次执行调用，如何将一个函数转化为curry

const cost = (function() {
  const args = []
  return (...argus) => {
    if (argus.length === 0)
      let moneys = 0
      args.forEach(money => moneys +=  money)
      return moneys
    } else {
      args.push(...argus)
    }
  }
})()

let cost = (() =>{ 
  let money = 0;
  return (...args) => {
     args.forEach(v => money+=v)
     return money
  }
})()

// 将某个函数变为curry函数
let curry = function (fn) {
  let inArgs = []
  return (...args) => {
    if (args.length === 0) {
      fn (...inArgs)
    } else {
      inArgs.push(...args)
      
    }
  }
}

• 节流函数

let throttle = (fn, interval) {
  let firsttime = true;
  let timer;
  return (...args) => {
    if (firsttime) {
        fn(...args)
        return firsttime = false
    }
    if (timer) return false
    timer = setTimeout(() => {
      clearTimeout(timer)
      timer = null
      fn(...args)
    }, interval || 500)
  }
}

单例模式

function C () {}
let single = (() => {
  let instance;
  return () => {
      if (!instance) {
          instance = new C()
      }
      return C
  }
})()

发布订阅模式又叫观察者模式

• 如何实现发布订阅模式

1. 指定发布者
2. 给发布者一个缓存队列，用于存放回调函数以便通知订阅者
3. 发布消息的时候，遍历这个缓存列表，依次触发存放的订阅者的回调函数

let sales = {
  clientList: [], // 缓存列表，存放所有的订阅事件
  listen: function(fn) {
    this.clientLIst.push(fn)
  },
  trigger: function (...args) {
    this.clientList.forEach(fn => fn.apply(this, args))
  }
}

• 发布订阅多个事件的实现方式

let event = {
  clientList: {}, 
  listen: function (key, fn) {
    if (!this.clientList[key]) {
      this.clientList[key] = []
    }
    this.clientLIst[key].push(fn)
  },
  trigger: function (key, ...args) {
       let list = this.clientList[key]
       list.forEach(fn => fn.apply(this, args))
  },
  remove: function (key, fn) {
    let fns = this.clientList[key]
    if (!fns) { return false } else {
      if (!fn) { fns.length = 0; }
      else {
         fns.forEach((f,i) => {
            if (f === fn) { fns.splice(i, 1) }
          })            
      }
    }
  }
}
let installEvent = fucntion(obj) {
  for (let name in event) {
    obj[name] = event[name]
  }
}