深入理解JavaScript系列(7) S.O.L.I.D五大原則之開閉原則OCP
2024-05-06 14:22:38
供稿：網(wǎng)友
前言
本章我們要講解的是S.O.L.I.D五大原則JavaScript語言實現(xiàn)的第2篇，開閉原則OCP（The Open/Closed Principle ）。
開閉原則的描述是：
Software entities (classes, modules, functions, etc.) should be open for extension but closed for modification.
軟件實體（類，模塊，方法等等）應(yīng)當(dāng)對擴展開放，對修改關(guān)閉，即軟件實體應(yīng)當(dāng)在不修改的前提下擴展。
復(fù)制代碼
open for extension（對擴展開放）的意思是說當(dāng)新需求出現(xiàn)的時候，可以通過擴展現(xiàn)有模型達到目的。而Close for modification（對修改關(guān)閉）的意思是說不允許對該實體做任何修改，說白了，就是這些需要執(zhí)行多樣行為的實體應(yīng)該設(shè)計成不需要修改就可以實現(xiàn)各種的變化，堅持開閉原則有利于用最少的代碼進行項目維護。
英文原文：http://freshbrewedcode.com/derekgreer/2011/12/19/solid-javascript-the-openclosed-principle/
問題代碼
為了直觀地描述，我們來舉個例子演示一下，下屬代碼是動態(tài)展示question列表的代碼（沒有使用開閉原則）。
代碼如下:
// 問題類型
var AnswerType = {
Choice: 0,
Input: 1
};
// 問題實體
function question(label, answerType, choices) {
return {
label: label,
answerType: answerType,
choices: choices // 這里的choices是可選參數(shù)
};
}
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';
// 根據(jù)不同的類型展示不同的代碼：分別是下拉菜單和輸入框兩種
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)
