代码：

<!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. kubernetes实战(二十)：k8s一键部署高可用Prometheus并实现邮件告警

    1.基本概念 本次部署使用的是CoreOS的prometheus-operator. 本次部署包含监控etcd集群. 本次部署适用于二进制和kubeadm安装方式. 本次部署适用于k8s v1.10版 ...

  2. 理解CopyOnWriteArrayList

    CopyOnWriteArrayList,顾名思义,Write的时候总是要Copy,也就是说对于任何可变的操作(add.set.remove)都是伴随复制这个动作的 A thread-safe var ...

  3. 几种常见web攻击手段及其防御方式

    XSS(跨站脚本攻击) CSRF(跨站请求伪造) SQL注入 DDOS web安全系列目录 总结几种常见web攻击手段极其防御方式 总结几种常见的安全算法 XSS 概念 全称是跨站脚本攻击(Cross ...

  4. wordpress注册后重定向到自定义页面

    wordpress注册后重定向到自定义页面怎么操作?将下面的代码添加到当前主题的 functions.php 文件中即可 add_filter( 'registration_redirect', 'w ...

  5. PAT A+B for Polynomials[简单]

    1002 A+B for Polynomials (25)(25 分) This time, you are supposed to find A+B where A and B are two po ...

  6. QC质量管理七大手法

    1.层别法 层别法就是将大量有关某一特定主题的观点.意见或想法按组分类,将收集到的大量的数据或资料按相互关系进行分组,加以层别.层别法一般和柏拉图.直方图等其它七大手法结合使用,也可单独使用. 2.查 ...

  7. javascript 获取元素样式的方法

    javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle  1 .对于元素的内联CSS样式(<div s ...

  8. MVC5 新建项目里不包含jquery.unobtrusive-ajax.js（MVC5异步表单的问题）解决方法

    Asp.NET MVC 5 高级编程第5版.pdf 中有解决方法: 用NUGET程序包管理器控制台安装下面这两个文件 Install-Package jQuery –version 1.10.2 In ...

  9. Input消除自动记忆功能

    在html里就可以直接清除了<input type="text" autocomplete="off"> input 的autocomplete属性 ...

  10. NPOI 导出excel 分表

    /// <summary> /// 由DataTable导出Excel[超出65536自动分表] /// </summary> /// <param name=" ...