代码：

<!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. 删除未加入svn版本控制的文件（包括文件夹）

    删除未加入svn版本控制的文件(包括文件夹) svn status | grep '^?' | awk '{print $2}' | xargs rm -rf

  2. 一句替换bbcode

    $message=preg_replace('/\[[^\[\]]{1,}\]/','',$message);

  3. swiper跳转制定页面

    haha(){ var that=this; that.$refs.mySwiper.swiper.slideTo(1, 1000, false); } //以上代码是  获取ref值为myswipe ...

  4. function $(id) {}表示什么函数

    function $(id) {}表示什么函数 一.总结 1.就是简写,不然每次打document.getElementById很烦 二.问题 function $(id) {return docum ...

  5. javaScript高级教程(十) iframe

    1.iframe的基础,深入理解frame是何物,属性该如何设置. iframe即内联框架.不同于frame,frame与frameset综合使用,成为帧,框架集.frame已经不大使用了.说白了,f ...

  6. Python安装及运行中可能遇到的问题。

    1.报错找不到Selenium. 解决办法: (1)可以调整工具中的以下两项 Setting: (2)Setting中设置此目录为Python安装目录,选择设置中的第一项后配置以下Python3.5的 ...

  7. 007-Redi-命令-脚本命令、链接命令、服务器命令、事务、HyperLogLog

    Redis 脚本命令 下表列出了 redis 脚本常用命令: 序号 命令及描述 1 EVAL script numkeys key [key ...] arg [arg ...] 执行 Lua 脚本. ...

  8. mysql 常用命令 常用SQL语句

    维护命令 数据库 ##创建数据库 mysql> create database test; Query OK, 1 row affected ##删除数据库 mysql> drop dat ...

  9. CentOS6.5安装Redis数据库

    1.以安装redis2.8.19为例 下载安装包:http://redis.io tar zxvf redis-2.8.19.tar.gz #解压 cd redis-2.8.19 #进入解压后的文件夹 ...

  10. c/c++的预处理定义 Stringizing Operator (#) Charizing Operator (#@) Token-Pasting Operator (##)

    c/c++的预处理定义:一.Stringizing Operator (#)在c和c++中数字标志符#被赋予了新的意义,即字符串化操作符.其作用是:将宏定义中的传入参数名转换成用一对双引号括起来参数名 ...