设计模式中的一些原则

对于一个类而言，应该只有一个引起它变化的原因。在JavaScript中，单一职责原则更多地是被运用在对象或者方法级别上。单一职责原则（SRP）的职责定义为“引起变化的原因”，如果我们有多个动机去改写一个方法，那这个方法就对应多个职责。如果一个方法承担了过多职责，在需求的变迁过程中，需要改写这个方法的可能性就越大。因此我们可以总结SRP原则：一个对象或者方法只做一件事。

设计模式中的SRP原则

var myImage = (function () {
  var imgNode = document.createElement('img')

  document.body.appendChild(imgNode)

  return {
    setSrc (src) {
      imgNode.src = src
    }
  }
})()
复制代码

proxyImage负责预加载图片，并加载完图片后把请求交给本体myImage:

var proxyImage = (function () {
  var img = new Image()

  img.onload = function () {
    myImage.setSrc(this.src)
  }

  return {
    setSrC (src) {
      myImage.setSrc('loading.gif') 
      img.src= src
    }
  }
})()

proxyImage.setSrc('http://xxx.com/01.jpg')
复制代码

Function.prototype.after = function (fn) {
  var self = this
  return function () {
    var ret = _self.apply(this, arguments)
    fn.apply(this, arguments)

    return ret
  }
} 

var showLogin = function () {
  console.log('打开登录弹窗')
}

var log = function () {
  console.log('上报数据')
}

document.getElementById('loginBtn').onclick = showLogin.after(log)
复制代码

何时分离职责

首先明确一点，并不是所有的职责都应该一一分离。

如果随着需求的变化，有两个职责总是同时变化，那就不分离他们。比如在ajax请求的时候，创建xhr对象和发送xhr请求几乎都是一起的，那么这两个职责就没有必要分离。

职责的变化轴线仅当它们确定会发生变化时才具有意义，即使两个职责已经被耦合在一起，但它们没有发生改变的预兆，也没有必要主动分离它们，等代码重构时分离也不迟。

违反SRP原则

在人的常规思维中，总是习惯性地把一组相关行为放到一起，如何正确地分离职责不是容易的一件事情。

一方面，我们接受SRP原则的指导，另一方面，我们也没有必要任何时候都一成不变地遵守规则。 在实际开发中，因为种种原因违反SRP原则的情况并不少见。比如jQuery的attr等方法，即负责赋值，又负责取值，这明显违反了SRP原则。对于jQuery维护者来说，会有一定困难，但是对用户来说，却简化了api的使用。

在方便性与稳定性之间要有一些取舍，具体是选择方便性还是稳定性，取决于具体的应用场景。

SRP原则的优缺点

SRP的优点是 降低了单个类或者对象的复杂度，按照职责把对象分解成更小的粒度，这有助于代码复用和进行单元测试 。

它最明显的缺点就是会 增加编写代码的难度 。其次，当我们按职责把对象分解成小的粒度之后，实际上也增加了对象之间互相联系的难度。

最小知识原则

定义

最少知识原则（LKP）说的是一个软件实体应当尽量减少与其它实体发生相互作用，在面向对象中，指的就是在程序设计的时候，应当尽量减少对象之间的交互。如果两个对象不必直接通信，那么这两个对象就不要发生直接的相互联系。

设计模式中的最小知识原则

开放-封闭原则

定义

在面向对象程序中， 开放-封闭原则是最重要的一条原则 。很多时候，一个程序具有良好的设计，它通常是符合开放-封闭原则的。开放封闭原则指的就是： 一个对象（类、函数、模块）等应该是可以扩展的，但是不可修改 。

扩展onload函数

假如我们在维护一个大型的web项目，这个项目已经有一定的历史，也有很多人维护，代码已经有十万行。这时候，你接到一个需求，需要在window.onload之后，上报一定的数据。这个对开发来说当然没什么难度，于是打开页面代码加上一行：

window.onload = function () {
  log('上报数据')
}
复制代码

在需求变更的过程中，我们经常是找到相关代码，然后修改它，这似乎是理所当然的。但是如果想象一下，目前的window.onload函数是一个有几百行代码的巨型函数，里面遍布着各种变量和业务逻辑，如果需求更复杂，就可能会改好一个bug，产生5个bug。于是，我们通过在AOP来动态地给window.onload增加新功能：

Function.prototype.after = function (fn) {
  var self = this
  return function () {
    var ret = _self.apply(this, arguments)
    fn.apply(this, arguments)

    return ret
  }
} 

window.onload = (window.onload || function () {}).after(function () {
  // 添加我们新的业务代码
})
复制代码

通过动态装饰函数的方式，我们完全不用理会从前window.onload函数的内部实现。

用对象的多态性消除分支语句

过多的条件分支是造成程序违反开放-封闭原则的一个常见原因，每当需要增加一个新的if语句时，都被迫要改动原函数。把if换成switch是没有用的，这是一种换汤不换药的做法。实际上，当我们看到大量的if或者switch语句时，就可以考虑使用对象的动态性来重构它们。

下面是一种反例的实现：

var makeSound = function (animal) {
  if (animal instanceof Duck) {
    console.log('嘎嘎嘎')
  } else if (animal instanceof Chicken) {
    console.log('咯咯咯')
  }
}

var Duck = function () {}
var Chicken = function () {}

makeSound(new Duck())      // 嘎嘎嘎
makeSound(new Chicken())   // 咯咯咯
复制代码

增加了一种狗的类型，必须修改代码:

var makeSound = function (animal) {
  if (animal instanceof Duck) {
    console.log('嘎嘎嘎')
  } else if (animal instanceof Chicken) {
    console.log('咯咯咯')
  } else if (animal instanceof Dog) {
    console.log('汪汪汪')
  }
}

const Dog = function () {}
makeSound(new Dog())   // 汪汪汪
复制代码

利用多态的实现，把程序中不变的部分隔离出来（动物会叫），然后把可变的部分封装起来（不同的动物发出不同的叫声），这样程序就有了扩展性：

var makeSound = function (animal) {
  animal.sound()
}

var Duck = function () {}
Duck.prototype.sound = function () {
  console.log('嘎嘎嘎')
}

var Chicken = function () {}
Chicken.prototype.sound = function () {
  console.log('咯咯咯')
}

var Dog = function () {}
Dog.prototype.sound = function () {
  console.log('汪汪汪')
}

makeSound(new Duck())      // 嘎嘎嘎
makeSound(new Chicken())   // 咯咯咯
makeSound(new Dog())       // 汪汪汪
复制代码

找出变化的地方

指导我们实现开放-封闭原则的规律就是：找出程序中经常发生变化的地方，然后把变化封装起来。

通过封装变化，我们可以把系统中稳定的部分和容易变化的部分隔离开来，在系统的演变过程中，我们只需要替换那些容易变化的部分，因为这部分已经封装好了，所以替换起来也相对容易。

除了利用对象的多态性之外，下面还有一些方式可以帮助我们编写遵守开放-封闭原则的代码：

• 放置挂钩（hook）
  放置挂钩也是一种分离变化的方式。我们在程序有可能变化的地方放置一个hook，根据hook返回的结果来决定程序下一步走向。这样一来，原本代码的执行路径上就出现了分叉路口，程序未来的执行方向有了多种可能。关于hook的应用，可以参考模板方法模式中hook的应用。
• 使用回调函数
  在JavaScript中，函数可以作为参数传递给另外一个函数，这也是高阶函数的应用之一。在这种情况下，我们通常把这个函数称为回调函数，在JavaScript中，命令模式和策略模式都可以使用回调函数轻松实现。
  回调函数是一种特殊的挂钩，我们可以把容易变化的逻辑封装在回调函数里，然后把回调函数当作参数传入一个稳定和封闭的函数中。当函数执行，程序就可以根据回调函数的内部逻辑不同，产生不同的结果。
  例如，在ajax异步请求用户信息之后要做一些事，请求用户信息的过程是不变的，但是获取到用户信息之后要做的操作，则是可能变化的：

var getUserInfo = function (callback) {
  $.ajax('http://xxx.com/getUserInfo', callback)
}

getUserInfo(function (data) {
  console.log('更新cookie')
})

getUserInfo(function (data) {
  console.log('更新个人主页信息')
})
复制代码

开放-封闭原则的相对性

在职责链模式中，也许会有人疑问：开放-封闭原则要求我们只能通过增加源码的方式来扩展程序的功能，而不允许修改源码。当我们往职责链增加一个新的订单100节点时，也必须要改动链条的代码：

order500.setNextSuccessor(order200).setNextSuccessor(orderNormal)
// 修改：

order500.setNextSuccessor(order200).setNextSuccessor(order100).setNextSuccessor(orderNormal)
复制代码

实际上，让程序保持完全封闭是很难做到的，就算能做到也需要花太多时间和精力。而且让程序符合开放-封闭原则的代价是引入更多抽象层次，这也会增加代码的复杂度。在有些情况下，我们无论如何都是做不到完全封闭的，这时候我们就要明白下面两点：

• 挑选出最容易发生变化的地方，然后构造抽象来封装这些变化。
• 在不可避免发生修改的时候，尽量修改那些相对容易修改的地方。拿开源库来说，修改它提供的配置文件，总比修改它的源码简单。