Software entities (classes, modules, functions, etc.) should be open for extension but closed for modification.
软件实体（类，模块，方法等等）应当对扩展开放，对修改关闭，即软件实体应当在不修改的前提下扩展。

// 问题类型
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);

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;
}

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;
}

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);