## 前言
本章我們要講解的是S.O.L.I.D五大原則JavaScript語言實現的第2篇，開閉原則OCP（The Open/Closed Principle ）。
開閉原則的描述是：
> Software entities (classes, modules, functions, etc.) should be open for extension but closed for modification.
> 軟件實體（類，模塊，方法等等）應當對擴展開放，對修改關閉，即軟件實體應當在不修改的前提下擴展。
open for extension（對擴展開放）的意思是說當新需求出現的時候，可以通過擴展現有模型達到目的。而Close for modification（對修改關閉）的意思是說不允許對該實體做任何修改，說白了，就是這些需要執行多樣行為的實體應該設計成不需要修改就可以實現各種的變化，堅持開閉原則有利于用最少的代碼進行項目維護。
英文原文：[http://freshbrewedcode.com/derekgreer/2011/12/19/solid-javascript-the-openclosed-principle/](http://freshbrewedcode.com/derekgreer/2011/12/19/solid-javascript-the-openclosed-principle/)
## 問題代碼
為了直觀地描述，我們來舉個例子演示一下，下屬代碼是動態展示question列表的代碼（沒有使用開閉原則）。
~~~
// 問題類型
var AnswerType = {
Choice: 0,
Input: 1
};
// 問題實體
function question(label, answerType, choices) {
return {
label: label,
answerType: answerType,
choices: choices // 這里的choices是可選參數
};
}
var view = (function () {
// render一個問題
function renderQuestion(target, question) {
var questionWrapper = document.createElement('div');
questionWrapper.className = 'question';
var questionLabel = document.createElement('div');
questionLabel.className = 'question-label';
var label = document.createTextNode(question.label);
questionLabel.appendChild(label);
var answer = document.createElement('div');
answer.className = 'question-input';
// 根據不同的類型展示不同的代碼：分別是下拉菜單和輸入框兩種
if (question.answerType === AnswerType.Choice) {
var input = document.createElement('select');
var len = question.choices.length;
for (var i = 0; i < len; i++) {
var option = document.createElement('option');
option.text = question.choices[i];
option.value = question.choices[i];
input.appendChild(option);
}
}
else if (question.answerType === AnswerType.Input) {
var input = document.createElement('input');
input.type = 'text';
}
answer.appendChild(input);
questionWrapper.appendChild(questionLabel);
questionWrapper.appendChild(answer);
target.appendChild(questionWrapper);
}
return {
// 遍歷所有的問題列表進行展示
render: function (target, questions) {
for (var i = 0; i < questions.length; i++) {
renderQuestion(target, questions[i]);
};
}
};
})();
var questions = [
question('Have you used tobacco products within the last 30 days?', AnswerType.Choice, ['Yes', 'No']),
question('What medications are you currently using?', AnswerType.Input)
];
var questionRegion = document.getElementById('questions');
view.render(questionRegion, questions);
~~~
上面的代碼，view對象里包含一個render方法用來展示question列表，展示的時候根據不同的question類型使用不同的展示方式，一個question包含一個label和一個問題類型以及choices的選項（如果是選擇類型的話）。如果問題類型是Choice那就根據選項生產一個下拉菜單，如果類型是Input，那就簡單地展示input輸入框。
該代碼有一個限制，就是如果再增加一個question類型的話，那就需要再次修改renderQuestion里的條件語句，這明顯違反了開閉原則。
## 重構代碼
讓我們來重構一下這個代碼，以便在出現新question類型的情況下允許擴展view對象的render能力，而不需要修改view對象內部的代碼。
先來創建一個通用的questionCreator函數：
~~~
function questionCreator(spec, my) {
var that = {};
my = my || {};
my.label = spec.label;
my.renderInput = function () {
throw "not implemented";
// 這里renderInput沒有實現，主要目的是讓各自問題類型的實現代碼去覆蓋整個方法
};
that.render = function (target) {
var questionWrapper = document.createElement('div');
questionWrapper.className = 'question';
var questionLabel = document.createElement('div');
questionLabel.className = 'question-label';
var label = document.createTextNode(spec.label);
questionLabel.appendChild(label);
var answer = my.renderInput();
// 該render方法是同樣的粗合理代碼
// 唯一的不同就是上面的一句my.renderInput()
// 因為不同的問題類型有不同的實現
questionWrapper.appendChild(questionLabel);
questionWrapper.appendChild(answer);
return questionWrapper;
};
return that;
}
~~~
該代碼的作用組合要是render一個問題，同時提供一個未實現的renderInput方法以便其他function可以覆蓋，以使用不同的問題類型，我們繼續看一下每個問題類型的實現代碼：
~~~
function choiceQuestionCreator(spec) {
var my = {},
that = questionCreator(spec, my);
// choice類型的renderInput實現
my.renderInput = function () {
var input = document.createElement('select');
var len = spec.choices.length;
for (var i = 0; i < len; i++) {
var option = document.createElement('option');
option.text = spec.choices[i];
option.value = spec.choices[i];
input.appendChild(option);
}
return input;
};
return that;
}
function inputQuestionCreator(spec) {
var my = {},
that = questionCreator(spec, my);
// input類型的renderInput實現
my.renderInput = function () {
var input = document.createElement('input');
input.type = 'text';
return input;
};
return that;
}
~~~
choiceQuestionCreator函數和inputQuestionCreator函數分別對應下拉菜單和input輸入框的renderInput實現，通過內部調用統一的questionCreator(spec, my)然后返回that對象（同一類型哦）。
view對象的代碼就很固定了。
~~~
var view = {
render: function(target, questions) {
for (var i = 0; i < questions.length; i++) {
target.appendChild(questions[i].render());
}
}
};
~~~
所以我們聲明問題的時候只需要這樣做，就OK了：
~~~
var questions = [
choiceQuestionCreator({
label: 'Have you used tobacco products within the last 30 days?',
choices: ['Yes', 'No']
}),
inputQuestionCreator({
label: 'What medications are you currently using?'
})
];
~~~
最終的使用代碼，我們可以這樣來用：
~~~
var questionRegion = document.getElementById('questions');
view.render(questionRegion, questions);
~~~
最后重構的代碼如下：
~~~
function questionCreator(spec, my) {
var that = {};
my = my || {};
my.label = spec.label;
my.renderInput = function() {
throw "not implemented";
};
that.render = function(target) {
var questionWrapper = document.createElement('div');
questionWrapper.className = 'question';
var questionLabel = document.createElement('div');
questionLabel.className = 'question-label';
var label = document.createTextNode(spec.label);
questionLabel.appendChild(label);
var answer = my.renderInput();
questionWrapper.appendChild(questionLabel);
questionWrapper.appendChild(answer);
return questionWrapper;
};
return that;
}
function choiceQuestionCreator(spec) {
var my = {},
that = questionCreator(spec, my);
my.renderInput = function() {
var input = document.createElement('select');
var len = spec.choices.length;
for (var i = 0; i < len; i++) {
var option = document.createElement('option');
option.text = spec.choices[i];
option.value = spec.choices[i];
input.appendChild(option);
}
return input;
};
return that;
}
function inputQuestionCreator(spec) {
var my = {},
that = questionCreator(spec, my);
my.renderInput = function() {
var input = document.createElement('input');
input.type = 'text';
return input;
};
return that;
}
var view = {
render: function(target, questions) {
for (var i = 0; i < questions.length; i++) {
target.appendChild(questions[i].render());
}
}
};
var questions = [
choiceQuestionCreator({
label: 'Have you used tobacco products within the last 30 days?',
choices: ['Yes', 'No']
}),
inputQuestionCreator({
label: 'What medications are you currently using?'
})
];
var questionRegion = document.getElementById('questions');
view.render(questionRegion, questions);
~~~
上面的代碼里應用了一些技術點，我們來逐一看一下：
1. 首先，questionCreator方法的創建，可以讓我們使用[模板方法模式](http://en.wikipedia.org/wiki/Template_method_pattern)將處理問題的功能delegat給針對每個問題類型的擴展代碼renderInput上。
2. 其次，我們用一個私有的spec屬性替換掉了前面question方法的構造函數屬性，因為我們封裝了render行為進行操作，不再需要把這些屬性暴露給外部代碼了。
3. 第三，我們為每個問題類型創建一個對象進行各自的代碼實現，但每個實現里都必須包含renderInput方法以便覆蓋questionCreator方法里的renderInput代碼，這就是我們常說的[策略模式](http://en.wikipedia.org/wiki/Strategy_pattern)。
通過重構，我們可以去除不必要的問題類型的枚舉AnswerType，而且可以讓choices作為choiceQuestionCreator函數的必選參數（之前的版本是一個可選參數）。
## 總結
重構以后的版本的view對象可以很清晰地進行新的擴展了，為不同的問題類型擴展新的對象，然后聲明questions集合的時候再里面指定類型就行了，view對象本身不再修改任何改變，從而達到了開閉原則的要求。
> 另：懂C#的話，不知道看了上面的代碼后是否和多態的實現有些類似？其實上述的代碼用原型也是可以實現的，大家可以自行研究一下。
- （1）編寫高質量JavaScript代碼的基本要點
- （2）揭秘命名函數表達式
- （3）全面解析Module模式
- （4）立即調用的函數表達式
- （5）強大的原型和原型鏈
- （6）S.O.L.I.D五大原則之單一職責SRP
- （7）S.O.L.I.D五大原則之開閉原則OCP
- （8）S.O.L.I.D五大原則之里氏替換原則LSP
- （9）根本沒有“JSON對象”這回事！
- （10）JavaScript核心（晉級高手必讀篇）
- （11）執行上下文（Execution Contexts）
- （12）變量對象（Variable Object）
- （13）This? Yes, this!
- （14）作用域鏈(Scope Chain)
- （15）函數（Functions）
- （16）閉包（Closures）
- （17）面向對象編程之一般理論
- （18）面向對象編程之ECMAScript實現
- （19）求值策略
- （20）《你真懂JavaScript嗎？》答案詳解
- （21）S.O.L.I.D五大原則之接口隔離原則ISP
- （22）S.O.L.I.D五大原則之依賴倒置原則DIP
- （23）JavaScript與DOM（上）——也適用于新手
- （24）JavaScript與DOM（下）
- （25）設計模式之單例模式
- （26）設計模式之構造函數模式
- （27）設計模式之建造者模式
- （28）設計模式之工廠模式
- （29）設計模式之裝飾者模式
- （30）設計模式之外觀模式
- （31）設計模式之代理模式
- （32）設計模式之觀察者模式
- （33）設計模式之策略模式
- （34）設計模式之命令模式
- （35）設計模式之迭代器模式
- （36）設計模式之中介者模式
- （37）設計模式之享元模式
- （38）設計模式之職責鏈模式
- （39）設計模式之適配器模式
- （40）設計模式之組合模式
- （41）設計模式之模板方法
- （42）設計模式之原型模式
- （43）設計模式之狀態模式
- （44）設計模式之橋接模式
- （45）代碼復用模式（避免篇）
- （46）代碼復用模式（推薦篇）
- （47）對象創建模式（上篇）
- （48）對象創建模式（下篇）
- （49）Function模式（上篇）
- （50）Function模式（下篇）
- （結局篇）