代码：

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

JavaScript 开闭原则OCP的更多相关文章

  1. 深入理解JavaScript系列（7）：S.O.L.I.D五大原则之开闭原则OCP

    前言 本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第2篇,开闭原则OCP(The Open/Closed Principle ). 开闭原则的描述是: Software ...

  2. C#软件设计——小话设计模式原则之：开闭原则OCP

    前言:这篇继续来看看开闭原则.废话少说,直接入正题. 软件设计原则系列文章索引 C#软件设计——小话设计模式原则之:依赖倒置原则DIP C#软件设计——小话设计模式原则之:单一职责原则SRP C#软件 ...

  3. 7.10 其他面向对象设计原则1: 开-闭原则OCP

    其他面向对象设计原则1: 开-闭原则OCP  Open-Closed Principle (OCP)5.1 设计变坏的前兆 Signs of Rotting Design  僵硬性 Rigidit ...

  4. 设计原则：开闭原则(OCP)

    1.什么是开闭原则 开闭原则的英文是Open Closed Principle,缩写就是OCP.其定义如下: 软件实体(模块.类.方法等)应该"对扩展开放.对修改关闭". 从定义上 ...

  5. 【设计模式】之开闭原则(OCP)

    开闭原则是面向对象设计的一个重要原则,其定义如下: 开闭原则(Open-Closed Principle, OCP):一个软件实体应当对扩展开放,对修改关闭.即软件实体应尽量在不修改原有代码的情况下进 ...

  6. 【面向对象设计原则】之开闭原则(OCP)

    开闭原则是面向对象设计的一个重要原则,其定义如下: 开闭原则(Open-Closed Principle, OCP):一个软件实体应当对扩展开放,对修改关闭.即软件实体应尽量在不修改原有代码的情况下进 ...

  7. 聊一聊开闭原则(OCP).

    目录 简述 最早提出(梅耶开闭原则) 重新定义(多态开闭原则) 深入探讨 OCP的两个特点 对外扩展开放(Open for extension) 对内修改关闭 抽象 关闭修改.对外扩展? 简述 在面向 ...

  8. 开放-封闭原则(OCP)开-闭原则 和 依赖倒转原则，单一职责原则

    单一职责原则 1.单一职责原则(SRP),就一个类而言,应该仅有一个引起它变化的原因 2.如果一个类承担的职责过多,就等于把这些职责耦合在一起,一个职责的变化可能会消弱或抑制这个类完成其他职责的能力. ...

  9. 设计模式笔记：开闭原则（OCP，The Open-Closed Principle）

    1. 开闭原则概述 开闭原则(OCP,The Open-Closed Principle)两个主要特征: (1)对扩展开放(open for extension):模块的行为的可以扩展的,当应用的需求 ...

随机推荐

  1. 解决重启服务器以后Nginx无法启动

    今天重启服务器以后发现nginx服务器启动失败. 这应该是因为把nginx进程杀死后pid丢失了,下一次再开启nginx -s reload时无法启动,重装可以解决这个问题,但是太麻烦了. 然后这样就 ...

  2. qt——常用的布局方法

    布局相关对象及简介 窗体上的所有的控件必须有一个合适的尺寸和位置.Qt提供了一些类负责排列窗体上的控件,主要有:QHBoxLayout,QVBoxLayout,QGridLayout,QStackLa ...

  3. linux mysql 统一字符编码

    强调:配置文件中的注释可以有中文,但是配置项中不能出现中文 mysql> show variables like '%char%'; +--------------------------+-- ...

  4. 1.如何修改oracle的密码

    在下图中的目录下面找到 PWDorcl.ora 文件,orcl是数据库的实例名  备份,将PWDorcl.ora 文件名称改为 PWDorcl_back.ora 以管理员身份打开cmd,执行 orap ...

  5. python输出测试报告测试成功

    import unittest # import HtmlTestRunner import HTMLTestRunner class DemoTest(unittest.TestCase): def ...

  6. XenServer：使用XenCenter开设VPS(多图完整版)

    打铁要趁热,咱们接着来玩XenServer.昨天赵容用机房提供的KVM给服务器装了XenServer,今天我们来玩更有意思的:开小鸡.装好XenServer之后,访问我们的服务器IP,就可以看到Xen ...

  7. Git 全局设置

    Git 全局设置: git config --global user.name "ASxx" git config --global user.email "123456 ...

  8. jsp02

    el表达式,jstl标签 1.el表达式是什么? sun制定的一种规范,主要是给标签的属性赋值,或者直接输出. <%=user.name%> java5版本以上支持jsp的el表达式和js ...

  9. QPixmap 显示大小

    size picSize(600,400); //将pixmap缩放成picSize大小然后保存在scaledPixmap中 按比例缩放: QPixmap scaledPixmap = pixmap. ...

  10. Docker深入浅出3-容器管理

    docker客户端非常简单,我们可以直接输入docker命令来查看Docker客户端所有的命令项 [root@admin-fxr ~]# docker Usage: docker COMMAND A ...