在面向對象的程序設計中，開放封閉原則(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設計模式與開發實踐》最全知識點匯總大全

總結

以上是生活随笔為你收集整理的《JavaScript设计模式与开发实践》原则篇（3）—— 开放-封闭原则的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。