代码：

<!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. 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...

  2. druid.io本地集群搭建 / 扩展集群搭建

    druid.io 是一个比较重型的数据库查询系统,分为5种节点 . 在此就不对数据库进行介绍了,如果有疑问请参考白皮书: http://pan.baidu.com/s/1eSFlIJS 单台机器的集群 ...

  3. 空类指针为什么可以调用类的成员函数 以及 A(){}和A();

    1. 代码及问题 #include <iostream> using namespace std; class A { public: A() {} //A *p = new A()时:此 ...

  4. [LeetCode] 312. Burst Balloons_hard tag: 区间Dynamic Programming

    Given n balloons, indexed from 0 to n-1. Each balloon is painted with a number on it represented by ...

  5. Jmeter接口测试自动化 （三）（数据驱动测试）

    本文转载至http://www.cnblogs.com/chengtch/p/6105532.html 当我研究要通过用例优先级控制用例是否执行时,我发现了用"如果(if)控制器" ...

  6. CSS选择器可以用数字开头吗

    最好是字母开头,后面用数字可以,直接用数字开头不符合官方规范,虽然浏览器牛逼点也能解析出来,但是最初就不要这么做,坏习惯养成很难改.而且如果团队合作,css的命名都需要有固定的格式,还要有可读性方便他 ...

  7. mysql主从数据库不同步的2种解决方法 （转载）

    今天发现Mysql的主从数据库没有同步 先上Master库: mysql>show processlist; 查看下进程是否Sleep太多.发现很正常. show master status; ...

  8. Firefox及我使用的firefox扩展

    什么数字安全浏览器,什么极速浏览器,现在都取代不了Firefox在我心中的位置.你想想,一款浏览器老是弹呀弹的,时不时问我换不换桌面,问我请不清理垃圾,真是的,这些关它浏览器鸟事. 喜欢Firefox ...

  9. mvc actionresult返回各种文件

    public ActionResult ReviewFile(string folderName, string fileBasename, string extendName) { //以后根据后缀 ...

  10. 搭建Linux-java web运行环境之一：安装jdk+tomcat

    环境 OS:Red Hat Enterprise Linux Server release 7.3 (Maipo) JDK:jdk-7u80-linux-x64.tar.gz Tomcat:apach ...