zoukankan html css js c++ java

JavaScript 开闭原则OCP

代码：

<!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

查看全文

相关阅读:
控制内插表达式的格式
 MySQL查看实时执行的SQL语句
 测试开源.net 混淆器ConfuserEx
nginx 目录自动加斜线”/”
兼职程序员一般可以从什么平台接私活？
.NET之Hangfire快速入门和使用
 c#通过操作mongodb gridfs实现文件的数据库存储
 c# .net core + .net framework mongodb nuget 包
 asp.net core ModelState 模型状态验证扩展类
 Linux查看系统基本信息，版本信息（最全版）

原文地址：https://www.cnblogs.com/hongdada/p/3291080.html