代码：
<!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>
界面：
html代码：
开始看以为是继承，类似简单工厂模式
其实是调用
http://www.cnblogs.com/TomXu/archive/2012/01/09/2306329.html