<!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. 总结自己的Git常用命令

    总结自己的Git常用命令 使用git也有一段时间了,把自己常用的命令用自己的描述记录起来,方便自己备忘也方便其他人参考. 目录: 最基本的命令: git clone 拷贝并跟踪远程的master分支. ...

  2. Android Fragment 真正的完全解析（下）---转

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37992017 上篇博客中已经介绍了Fragment产生原因,以及一些基本的用法和 ...

  3. CodeForces 591B Rebranding

    水题 #include<cstdio> #include<cstring> #include<cmath> #include<vector> #incl ...

  4. php运行机制初探

    对于这个结果我也很吃惊,但是事实就在眼前,没办法啊,那么到底为什么会有这样的效果呢,咱们继续一探究竟: *.php(php代码) -----Scanner(zend引擎逐行扫描变为zend可以识别的语 ...

  5. python的一些语法糖

    1   Python中if-else语句的多种写法 a, b, c = 1, 2, 3 1.常规 if a>b: c = a else: c = b 2.表达式 c = a if a>b  ...

  6. extJS4.2.0 Json数据解析,嵌套及非嵌套（二）

    Ext.data.reader.Reader Readers通常用于翻译数据,使其被加载为 Model 实例或Store, 该数据一般是一个AJAX请求的响应数据. 一般情况下不需要直接创建一个Rea ...

  7. USACO Section 1.1 Your Ride Is Here 解题报告

    题目 问题描述 将字符串转变为数字,字母A对应的值为1,依次对应,字母Z对应的值为26.现在有一个字符串,将其中的每个字符转变为数字之后进行累乘,最终的结果对47求余数. 题目给你两个字符串,其中的字 ...

  8. Selenium-Grid工作方式

    http://blog.csdn.net/five3/article/details/9428655 Selenium-Grid工作方式 标签: selenium-grid2webdriversele ...

  9. Windows Azure Table Storage 解决 Guid 查询问题

    在使用 Windows Azure Table Storage 的 CloudTableClient 对Azure 进行数据查询时,会发现在自定义类的Guid类型始终无法去成功查询出数据,对比发现 G ...

  10. 使用RGBa和Filter实现不影响子元素的CSS透明背景

    点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...