代码:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" >
//不同的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[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());
}
}
};
//这里的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);
});
</script>
</head>
<body>
问题:
<div id="questions"></div>
</body>
</html>


界面:

 JavaScript 开闭原则OCP_javascript

html代码:

JavaScript 开闭原则OCP_xml_02

开始看以为是继承,类似简单工厂模式

其实是调用