<!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. NSTimer相关方法

    - (void)fire; //立即触发定时器 - (NSDate *)fireDate;//开始时间 - (void)setFireDate:(NSDate *)date;//设置fireData, ...

  2. msf常用命令

    msf > search -r great -t exploits search命令查找rank为great的exploit msf > setg RHOST 192.168.1.102 ...

  3. 【knockoutjs】 Computed VS Pure Computed 区别

    Pure Computed只有当有其他subscriber的时候才会有这个对象,所对应的DOM对象 不激活的时候不存在,这样可以防止内存泄露,在Component等场景下不用担心dispose的问题. ...

  4. 对于使用了SSH造成的中文乱码问题，4大解决方法

    修改struts2.xml struts2.xml 中添加 <constant name="struts.i18n.encoding" value="UTF-8&q ...

  5. thinkphp5.0 架构

    1.0 MVC的意义:MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC应用程序被分成三个核心部件:模型(M).视图(V).控制器(C),它们各自处理自己的任务. 2.0入口 ...

  6. POJ Sudoku 数独填数 DFS

    题目链接:Sudoku Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 18105   Accepted: 8772   Sp ...

  7. w3school之JavaScript学习笔记

    在前端测试过程中,少不了听到开发说到JS,JS在webJavaScript 是浏览器脚本语言(简称JS),主要用来向HTML页面添加交互行为. 学习网址:http://www.w3school.com ...

  8. MySQL 导出命令

    mysqldump --no-defaults -u root -p dbname > c:\www\test.sql windows 下使用.

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

    多对一是在多的类上存在一的对象 一对多是在一的类上存在多的集合. 多的类 user.java: package com.bjsxt.hibernate; import javax.persistenc ...

  10. Tasks and Back stack 详解

    原文地址:http://developer.android.com/guide/components/tasks-and-back-stack.html 一个应用往往包含很多activities．每个 ...