《JavaScript设计模式与开发实践》原则篇（3）—

在面向对象的程序设计中，开放封闭原则(OCP)是最重要的一条原则。很多时候，一个程序具有良好的设计，往往说明它是符合开放封闭原则的。当需要改变一个程序的功能或者给这个程序增加新功能的时候，可以使用增加代码的方式，但是不允许改动程序的源代码。

故事背景

假设我们是一个大型 Web 项目的维护人员，在接手这个项目时，发现它已经拥有10万行以上的JavaScript代码和数百个 JS 文件。不久后接到了一个新的需求，即在 window.onload 函数中打印出页面中的所有节点数量。这当然难不倒我们了。于是我们打开文本编辑器，搜索window.onload函数在文件中的位置，在函数内部添加以下代码

window.onload = function(){ // 原有代码略console.log( document.getElementsByTagName( '*' ).length );
};
复制代码

应用OCP原则

Function.prototype.after = function( afterfn ){ var __self = this;return function(){var ret = __self.apply( this, arguments ); afterfn.apply( this, arguments );return ret;}
};
window.onload = ( window.onload || function(){} ).after(function(){ console.log( document.getElementsByTagName( '*' ).length );
});
复制代码

通过动态装饰函数的方式，我们完全不用理会从前 window.onload 函数的内部实现，就算拿到的是一份混淆压缩过的代码也没有关系。只要它从前是个稳定运行的函数，那么以后也不会因为我们的新增需求而产生错误。新增的代码和原有的代码可以互不影响。

编写符合OCP代码的方法

过多的条件分支语句是造成程序违反开放封闭原则的一个常见原因。每当需要增加一个新的 if 语句时，都要被迫改动原函数。实际上，每当我们看到一大片的 if 或者 swtich-case 语句时，第一时间就应该考虑，能否利用对象的多态性来重构它们。

利用多态的思想

利用对象的多态性来让程序遵守开放封闭原则，是一个常用的技巧。

不符合OCP

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() );//动物世界里增加一只狗之后，makeSound 函数必须改成:
var makeSound = function( animal ){ if ( animal instanceof Duck ){console.log( '嘎嘎嘎' ); } else if ( animal instanceof Chicken ) {console.log( '咯咯咯' ); } else if ( animal instanceof Dog ) {console.log('汪汪汪' ); }
};
var Dog = function(){};
// 增加跟狗叫声相关的代码makeSound( new Dog() ); // 增加一只狗
复制代码

利用多态的思想，我们把程序中不变的部分隔离出来(动物都会叫)，然后把可变的部分封装起来(不同类型的动物发出不同的叫声)，这样一来程序就具有了可扩展性。当我们想让一只狗发出叫声时，只需增加一段代码即可，而不用去改动原有的 makeSound函数

var makeSound = function( animal ){ animal.sound();
};
var Duck = function(){};
Duck.prototype.sound = function(){ console.log( '嘎嘎嘎' );
};
var Chicken = function(){};
Chicken.prototype.sound = function(){ console.log( '咯咯咯' );
};
makeSound( new Duck() ); // 嘎嘎嘎
makeSound( new Chicken() ); // 咯咯咯
/********* 增加动物狗，不用改动原有的 makeSound 函数 ****************/
var Dog = function(){}; Dog.prototype.sound = function(){
console.log( '汪汪汪' ); };
makeSound( new Dog() ); // 汪汪汪
复制代码

放置挂钩

放置挂钩(hook)也是分离变化的一种方式。我们在程序有可能发生变化的地方放置一个挂钩，挂钩的返回结果决定了程序的下一步走向。这样一来，原本的代码执行路径上就出现了一个分叉路口，程序未来的执行方向被预埋下多种可能性。

使用回调函数

在 JavaScript 中，函数可以作为参数传递给另外一个函数，这是高阶函数的意义之一。在这种情况下，我们通常会把这个函数称为回调函数。在 JavaScript版本的设计模式中，策略模式和命令模式等都可以用回调函数轻松实现。回调函数是一种特殊的挂钩。我们可以把一部分易于变化的逻辑封装在回调函数里，然后把回调函数当作参数传入一个稳定和封闭的函数中。当回调函数被执行的时候，程序就可以因为回调函数的内部逻辑不同，而产生不同的结果。

总结

开放封闭原则是一个看起来比较虚幻的原则，但我们还是能找到一些让程序尽量遵守开放封闭原则的规律，最明显的就是找出程序中将要发生变化的地方，然后把变化封装起来。通过封装变化的方式，可以把系统中稳定不变的部分和容易变化的部分隔离开来。在系统的演变过程中，我们只需要替换那些容易变化的部分，如果这些部分是已经被封装好的，那么替换起来也相对容易。而变化部分之外的就是稳定的部分。在系统的演变过程中，稳定的部分是不需要改变的。

系列文章：

《JavaScript设计模式与开发实践》最全知识点汇总大全