代码：

<!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. js-jquery-Validate校验【一】

    一.导入 js 库 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.j ...

  2. React Native开发之IDE（Atom+Nuclide）安装，运行，调试

    版权声明:本文为博主原创文章,如需转载请注明出处   目录(?)[-] 前言 MacWindowsLinux 准备工作 安装Atom 安装Nuclide 新建一个工程 自动补全 类型标注 语法检查 跳 ...

  3. Java后台通过jxl生成Excel表格

    这里封装了一个工具类,将对象的list集合解析生成表格,只要按照参数要求传参就好了. 工具类代码如下: package com.hd.erpreport.utils; import java.io.F ...

  4. mysql 用户授权命令

    mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'your_root_password' WITH GRANT OP ...

  5. pop to 特定的UIViewController

    1. 我们可以推出到特定的UIViewController 2. 有一个类没有navigationController,以前一般用delegate,我觉得我们可以把引用一个navigationCont ...

  6. Thinkpad机器BIOS下清除安全芯片和指纹数据的方法

    清除安全芯片: 首先在刚开机出现ThinkPad图标时,按F1进入BIOS界面,然后长按关机按钮关机(注意一定是断电的关机,不是重新启动)然后开机再按F1键进入BIOS设置.选择“Securiy”-〉 ...

  7. Linux系统——PXE高效能批量网络装机

    PXE:Pre-boot Excution Environment,预启动执行环境,石油Intel公司开发的网络引导技术,工作在Client.Server模式,允许客户机通过网络从远程服务器下载阴道镜 ...

  8. js之数组排序

    数组,大家都不陌生,只要是学编程的人都知道这个入门的数据结构,在js中也是有数组这个概念的,跟普通的数组一样只是定义的形式不同罢了.下面是一个数组的排序代码: <html> <hea ...

  9. c++多线程实例

    #include <windows.h> #include <stdio.h> #include <process.h> ; int g_thread_counte ...

  10. sql中 substring和charindex 的用法

    -- 第一个参数是要截取的字符串,第二个参数是从第几个字符开始截取,第三个参数是截取的长度 --例如:select SUBSTRING('12345678',1,4) 返回 1234 -- selec ...