JavaScript 开闭原则OCP

yadianna

　　代码：









//不同的question内相同的操作
//不同的question只覆盖my.renderInput
//被不同的具体question类调用
        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;
option.value = spec.choices;
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.render());
}
}
};
//这里的questions是一个方法数组
//其实这个方法组里面返回的也是对象
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?'
})];
$(function () {
var questionRegion = document.getElementById('questions');
view.render(questionRegion, questions);
});



问题：



　　界面：

　　html代码：

　　开始看以为是继承，类似简单工厂模式
　　其实是调用
　　
　　http://www.iyunv.com/TomXu/archive/2012/01/09/2306329.html