JavaScript 시리즈에 대한 심층적 이해 (7) S.O.L.I.D 열기 및 닫기 원리의 5가지 원칙 OCP_javascript 기술

서문
이 장에서 설명할 내용은 S.O.L.I.D의 5가지 원칙인 Open/Closed 원칙 OCP(The Open/Closed 원칙)의 JavaScript 언어 구현의 두 번째 부분입니다.
열기 및 닫기 원칙에 대한 설명은 다음과 같습니다.
소프트웨어 엔터티(클래스, 모듈, 기능 등)는 확장을 위해 열려야 하고 수정을 위해 닫혀야 합니다.
소프트웨어 엔터티(클래스, 모듈, 메서드, 등)은 확장을 위해 개방적이고 수정을 위해 폐쇄되어야 합니다. 즉, 소프트웨어 엔터티는 수정 없이 확장되어야 합니다.
코드 복사
확장 가능은 새로운 요구 사항이 발생할 때 기존 모델을 확장하여 목표를 달성할 수 있다는 의미입니다. 수정을 위해 닫는다는 것은 엔터티에 대한 수정이 허용되지 않음을 의미합니다. 직설적으로 말하면 다양한 동작을 수행해야 하는 이러한 엔터티는 수정 없이 다양한 변경을 달성하도록 설계되어야 하며 최소한의 프로젝트 유지 관리를 용이하게 하는 원칙입니다. 암호.
영문 원문 : http://freshbrewedcode.com/derekgreer/2011/12/19/solid-javascript-the-openclosed-principle/
문제 코드
직관적으로 설명하기 위해 예를 들어보겠습니다. 설명하자면, 하위 코드는 질문 목록을 동적으로 표시하는 코드입니다(열기 및 닫기 원칙은 사용되지 않음).

코드 복사 코드는 다음과 같습니다.

// 질문 유형
var AnswerType = {
선택: 0,
입력: 1
};
// 질문 엔터티
함수 질문(레이블, 응답 유형, 선택) {
return {
레이블: label,
answerType: AnswerType,
choices:Choices // 선택 매개변수는 선택적 매개변수입니다
}
}
var view = (function () {
// 질문 렌더링
function renderQuestion(target, 질문) {
var 질문Wrapper = document.createElement('div');
questionWrapper.className = 'question'
varquestionLabel = 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 = 질문.choices.length;
for (var i = 0; i < len; i )
var option = document.createElement('option');
option.text = 질문.choices[i];
option.value = 질문.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)
target.appendChild(questionWrapper); >}
return {
// 표시를 위해 모든 질문 목록 순회
render: function (target, questions) {
for (var i = 0; i < questions.length; i ) {
renderQuestion(target, questions[i]);
}
}
})()
var questions = [
question(' 지난 30일 동안 담배 제품을 사용하셨습니까?', AnswerType.Choice, ['Yes', 'No']),
question('현재 사용하고 있는 약은 무엇입니까?', AnswerType.Input)
];
varquestionRegion = document.getElementById('questions');
view.render(questionRegion, questions);


위 코드에서 뷰 객체에는 To 렌더링 메서드가 포함되어 있습니다. 질문 목록을 표시하려면 질문 유형에 따라 다른 표시 방법이 사용됩니다. 질문에는 레이블, 질문 유형 및 선택 옵션(선택 유형인 경우)이 포함됩니다. 질문 유형이 선택인 경우 옵션에 따라 드롭다운 메뉴를 생성하고 질문 유형이 입력인 경우 입력 입력 상자를 표시하면 됩니다.
이 코드에는 제한 사항이 있습니다. 즉, 다른 질문 유형을 추가하는 경우 renderQuestion의 조건문을 다시 수정해야 하는데 이는 명백히 열기 및 닫기 원칙을 위반하는 것입니다.

코드 리팩터링
새로운 질문 유형이 나타날 때 뷰 객체 내부의 코드를 수정하지 않고도 뷰 객체의 렌더링 기능을 확장할 수 있도록 이 코드를 리팩터링해 보겠습니다.
먼저 일반 질문 생성기 함수를 만듭니다.

코드 복사 코드는 다음과 같습니다.

functionquestionCreator(spec, my) {
var that = {};
my = my || {}; renderInput = function () {
throw "notimplemented";
// 여기서 renderInput은 구현되지 않았습니다. 주요 목적은 해당 문제 유형의 구현 코드가 전체 메서드를 포괄하도록 하는 것입니다.
}; 🎜>that.render = 함수(대상) {
var 질문Wrapper = document.createElement('div');
questionWrapper.className = 'question'
varquestionLabel = document.createElement('div' );
questionLabel.className = 'question-label';
var label = document.createTextNode(spec.label)
questionLabel.appendChild(label); );
// 렌더링 방법은 대략적이고 합리적인 코드와 같습니다
// 유일한 차이점은 위 문장입니다 my.renderInput()
// 질문 유형마다 구현이 다르기 때문입니다
questionWrapper .appendChild(questionLabel );
questionWrapper.appendChild(답변);
return QuestionWrapper;
};
return that; 이 코드는 하나의 질문을 렌더링하는 동시에 다른 함수가 이를 재정의하여 다른 질문 유형을 사용할 수 있도록 구현되지 않은 renderInput 메소드를 제공합니다.




코드 복사

코드는 다음과 같습니다.

function choiceQuestionCreator(spec) { var my = {}, that = 질문Creator(spec, my); //선택 유형의 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]; value = spec.choices[i];
}
return input;
>}
function inputQuestionCreator( spec) {
var my = {},
that =questionCreator(spec, my)
//입력 유형의RenderInput 구현
my.renderInput = function () {
var input = document.createElement('input');
input.type = 'text';
return input;
return that;


choiceQuestionCreator 함수와 inputQuestionCreator 함수는 각각 드롭다운 메뉴와 입력 상자의 renderInput 구현에 해당합니다. 이들은 내부적으로 통합된 질문 생성기(spec, my)를 호출한 다음 해당 객체( 같은 종류).
뷰 객체의 코드가 매우 고정되어 있습니다.




코드 복사


코드는 다음과 같습니다.


var view = {

render: function(target , questions) {
for (var i = 0; i < questions.length; i ) {
target.appendChild(questions[i].render())
}

} }; 따라서 문제를 선언할 때 이렇게만 하면 됩니다.

코드 복사


코드는 다음과 같습니다:


var questions = [
choiceQuestionCreator({

label: '현재 담배 제품을 사용한 적이 있습니까? 지난 30일?',
choices: ['Yes', 'No']
　}),

inputQuestionCreator({ label: '현재 사용하고 있는 약은 무엇입니까?' 　} ) ]; 최종 사용 코드는 다음과 같습니다.

코드 복사


코드는 다음과 같습니다.


var QuestionRegion = document.getElementById('questions')
view.render(questionRegion, questions)

리팩토링 후 최종 코드코드 복사

코드는 다음과 같습니다

functionquestionCreator(spec, my) {
var that = {};
내 = 내 || {};
my.label = spec.label;
my.renderInput = function() {
throw "구현되지 않음";
};
that.render = function(target) {
var QuestionWrapper = document.createElement('div');
questionWrapper.className = '질문';
varquestionLabel = document.createElement('div');
questionLabel.className = '질문 라벨';
var label = document.createTextNode(spec.label);
questionLabel.appendChild(레이블);
var 답변 = my.renderInput();
questionWrapper.appendChild(questionLabel);
questionWrapper.appendChild(답변);
질문 반환Wrapper;
};
반품하세요.
}
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(옵션);
}
입력을 반환합니다.
};
반품하세요.
}
function inputQuestionCreator(spec) {
var my = {},
that =questionCreator(spec, my);
my.renderInput = function() {
var input = document.createElement('input');
input.type = '텍스트';
입력을 반환합니다.
};
반품하세요.
}
var view = {
render: function(target, questions) {
for (var i = 0; i < questions.length; i ) {
target.appendChild( 질문[i].render());
}
}
};
var questions = [
choiceQuestionCreator({
label: '지난 30일 이내에 담배 제품을 사용한 적이 있습니까?',
choices: ['Yes', 'No']
} ),
inputQuestionCreator({
label: '현재 사용하고 있는 약은 무엇입니까?'
})
];
varquestionRegion = document.getElementById('questions');
view.render(questionRegion, 질문);

상위 표면의 대리석은 了一些技术点,我们来逐一看一下：
首先,questionCreator방식으로 创建,可以让我们使用模板方法模式将处理问题的功能delegat给针对每个问题类型的扩大码renderInput上.
其次，我们次，我们换掉了前私属性替换掉了前私属性，因为我们封装了렌더 行为进行操作 不再需要把这些属性暴露给
第三,我们为每个问题类型创建一个对象进行各自的代码实现, 但每个实现里島必须包含renderInput방법便覆盖questionCreator방식으로 renderInput代码,这就是我们常说的.参数（之前的版本是一个可选参数）。
总结
중요한 전망이 매우 좋습니다.类型就行了，view对象本身不再修改任何改变，从而达到了开闭原则的要求。
另：懂C#的话，不知道看了上面的代码后是否多态的实现有些类似?其实上述的代码用原型也是可以实现的，大家可以自行研究一下。