<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oop编程增强版写法——js面向对象编程实例</title>
    
</head>
<body>
    <div id="container" style="border:3px solid red;width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
//Java学科基类
var Java = function(content){
    //将文本内容保存在属性content里
    this.content = content;
    //创建对象时，通过自调用函数直接执行
    (function(content){//自调用函数的形参content
        var div = document.createElement('div');
        div.innerHTML = content;
        div.style.color = 'green';
        div.style.width = 200+'px';
        div.style.height = 200+'px';
        div.style.background = 'white';
        div.style.border = '1px solid olive';
        // alert(div.style.background);
        //获取父容器container(注：这里获取DOM元素必须在DOM建立形成之后获取，否则报错),并将div添加到container中
        document.getElementById('container').appendChild(div);
    })(content);//自调用函数的实参content
}

//php学科基类
var Php = function(content){
    this.content = content;
    (function(content){
        var div = document.createElement('div');
        div.innerHTML = content;
        div.style.color = 'green';
        div.style.width = 200+'px';
        div.style.height = 200+'px';
        div.style.background = 'white';
        div.style.border = '1px solid olive';
        document.getElementById('container').appendChild(div);
    })(content);
}

//Javascript学科基类
var Javascript = function(content){
    this.content = content;
    (function(content){
        var div = document.createElement('div');
        div.innerHTML = content;
        div.style.color = 'green';
        div.style.width = 200+'px';
        div.style.height = 200+'px';
        div.style.background = 'white';
        div.style.border = '1px solid olive';
        document.getElementById('container').appendChild(div);
    })(content);
}

//UI学科基类
var Ui = function(content){
    this.content = content;
    (function(content){
        var div = document.createElement('div');
        div.innerHTML = content;
        div.style.color = 'green';
        div.style.width = 200+'px';
        div.style.height = 200+'px';
        div.style.background = 'white';
        div.style.border = '1px solid olive';
        document.getElementById('container').appendChild(div);
    })(content);
}

//学科工厂类
var JobFactory = function(type,content){
    switch(type){
        case 'java':
          return new Java(content);
        case 'php':
          return new Php(content);
        case 'js':
          return new Javascript(content);
        case 'ui':
          return new Ui(content);
    }
}
//测试用例
var java = JobFactory('java','java是门后台语言');
console.log(java);
console.log(java.content);

var php = JobFactory('php','php是门后台语言');
console.log(php);
console.log(php.content);

var js = JobFactory('js','js是前端web开发语言');
console.log(js);
console.log(js.content);

var ui = JobFactory('ui','ui交互设计');
console.log(ui);
console.log(ui.content);

//本例已经通过验证
</script>
</html>

js原生设计模式——4安全的工厂方法模式之oop编程增强版的更多相关文章

  1. js原生设计模式——4安全的工厂方法模式之Factory方法模式

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. 设计模式（三）工厂方法模式（Factory Pattern）

    一.引言 在简单工厂模式中讲到简单工厂模式的缺点,有一点是——简单工厂模式系统难以扩展,一旦添加新产品就不得不修改简单工厂方法,这样就会造成简单工厂的实现逻辑过于复杂,然而本专题介绍的工厂方法模式可以 ...

  3. Java设计模式（二） 工厂方法模式

    本文介绍了工厂方法模式的概念,优缺点,实现方式,UML类图,并介绍了工厂方法(未)遵循的OOP原则 原创文章.同步自作者个人博客 http://www.jasongj.com/design_patte ...

  4. 设计模式（2）工厂方法模式（Factory Method）

    设计模式(0)简单工厂模式 设计模式(1)单例模式(Singleton) 源码地址 0 工厂方法模式简介 0.0 工厂方法模式定义 工厂方法模式是在简单工厂模式基础上,为解决更复杂的对象创建问题而衍生 ...

  5. Java设计模式学习笔记(三) 工厂方法模式

    前言 本篇是设计模式学习笔记的其中一篇文章,如对其他模式有兴趣,可从该地址查找设计模式学习笔记汇总地址 1. 简介 上一篇博客介绍了简单工厂模式,简单工厂模式存在一个很严重的问题: 就是当系统需要引入 ...

  6. 【python设计模式-创建型】工厂方法模式

    工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻 ...

  7. 设计模式C#合集--工厂方法模式

    简单工厂,代码: public interface ISpeak { public void Say(); } public class Hello : ISpeak { public void Sa ...

  8. PHP设计模式（二）工厂方法模式（Factory Method For PHP）

    简单工厂简述: 简单工厂模式实现了生产产品类的代码跟客户端代码分离,在工厂类中你可以添加需要生成长跑的逻辑代码(new 产品类),但是问题来了,优秀的代码是符合"开闭原则"如果你要 ...

  9. Java设计模式菜鸟系列(四)工厂方法模式建模与实现

    转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/39760895 工厂方法模式(Factory Method) 工厂方法:顾名思义,就是调用工 ...

随机推荐

  1. CASpringAnimation

    iOS9新出现的 /** Subclass for mass-spring animations. */ @interface CASpringAnimation : CABasicAnimation ...

  2. 利用Openssl进行RSA加密签名算法

    加密(签名)的过程是(M的e次方)mod n,在这里我们把消息M假定为一个数字,但实际上消息一般为字符串,所以必须有一个将字符串转化为数字的规则,并且要让这个数字的大小和n相当(也不能比 n大).这样 ...

  3. 定时且周期性的任务研究II--ScheduledThreadPoolExecutor

    http://victorzhzh.iteye.com/blog/1011635 上一篇中我们看到了Timer的不足之处,本篇我们将围绕这些不足之处看看ScheduledThreadPoolExecu ...

  4. Highcharts一些属性

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. Smali文件语法解析

    大家都应该知道APK文件其实就是一个MIME为ZIP的压缩包,我们修改ZIP后缀名方式可以看到内部的文件结构,例如修改后缀后用RAR打开鳄鱼小顽皮APK能看到的是(Google Play下载的完整版版 ...

  6. DEDECMS整站复制

    1. 登录你的网站(织梦系统DedeCMS)后台,到“系统”–“系统设置”–“数据库备份/还原”,点击“数据备份选择”下面的“提交”: 2.拷贝备份的数据库文件到根目录/data/backupdata ...

  7. hibernate--多对多单向关联 (重点!!!)

    老师和学生的关系, 一个老师对多个学生, 一个学生也对应多个老师. 数据库会需要3个表, 一个老师表, 一个学生表, 一个老师对应学生表. 单向: 老师知道自己有多少学生, 但是学生不知道自己有多少个 ...

  8. Lua学习系列（三）

    Ubuntu14.04 上源码编译安装lua5.3 原文:http://blog.csdn.net/abclixu123/article/details/46676991

  9. POJ 2686 Traveling by Stagecoach

    状压DP dp[s][p]用了哪几张票,到哪个节点的最小费用. 注意:G++ %.3lf输出会WA,但C++能过:改成%.3f,C++,G++都能AC #include<cstdio> # ...

  10. 内置Web Server

    在终端输入命令:php -S localhost:8000 -t xxx(某个目录或文件) 这个内置的Web服务器主要用于本地开发使用,不可用于线上产品环境. URI请求会被发送到PHP所在的的工作目 ...