<!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. FACE++学习二、获得face属性

    http://blog.csdn.net/lyq8479/article/details/17362685 为了防止网页丢失还是自己保存一份安全一点 人脸检测API介绍 在Face++网站的“API文 ...

  2. CentOS 单用户登录&命令行、图像界面

    如何单用户登录: 这是一个很简单的问题,以前没重视,每次linux服务器无法正常启动时,都找应急盘,想偷懒,反而浪费了时间. 今天备忘如下: 1.系统启动时,按光标键调出GRUB引导菜单. 2.选定一 ...

  3. VIEWCONTROLLER的启动流程

    转载自:http://sunnyyoung.net/post/ios/2015-04-22-viewcontrollerde-qi-dong-liu-cheng-yu-jie-xi VIEWCONTR ...

  4. STM8不用手动复位进入自带Bootloader方法（串口下载）

    源:STM8不用手动复位进入自带Bootloader方法(串口下载) STM8不用手动复位进入自带Bootloader方法(串口下载)除非STM8片子的空的,如果复位运行的是自带Bootloader, ...

  5. 关于 CentOS 7 里面 普通用户 Ulimit max user processes 值的问题

    最近在对tomcat 的一个 项目进行 压测, 普通用户 启动 tomcat 的时候 压力上去以后就会报 java.lang.OutOfMemoryError 的错误, 这种错误 按道理来说都是 系统 ...

  6. arduino pro mini不能下载

    刚毕业时就知道arduino,但当时崇拜技术极致,喜欢把单片机的性能用到尽,觉得操作寄存器运行效率高,对arduino 这种高效模式贬为投机取巧,不过其中也一直对arduino 有关注. 随着芯片技术 ...

  7. JSON-lib框架，转换JSON、XML不再困难

    Json-lib可以将Java对象转成json格式的字符串,也可以将Java对象转换成xml格式的文档,同样可以将json字符串转换成Java对象或是将xml字符串转换成Java对象. 一. 准备工作 ...

  8. 25、手把手教你Extjs5（二十五）Extjs5常用组件--form的基本用法

    Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. Form和Form Ba ...

  9. LPC1788的spi使用

    #ifndef __SPI_H_ #define __SPI_H_ #include "common.h" #include "delay.h" // cs p ...

  10. python遍历字典元素

    a={'a':{'b':{'c':{'d':'e'}},'f':'g'},'h':'i'} def show(myMap): for str in myMap.keys(): secondDict=m ...