<!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. ural1147 Shaping Regions

    Shaping Regions Time limit: 0.5 secondMemory limit: 64 MB N opaque rectangles (1 ≤ N ≤ 1000) of vari ...

  2. Friends and Subsequences

    Friends and Subsequences Mike and !Mike are old childhood rivals, they are opposite in everything th ...

  3. ubuntu配置openvpn

    http://www.zhixing123.cn/ubuntu/ubuntu-openvpn-settings-tutorial.html 本文介绍Ubuntu连接使用OpenVPN方法教程,Ubun ...

  4. mac地址静态捆绑，防止arp欺骗

    arp -s 192.168.1.101 00-21-CC-D3-D5-FF 缺点,每次关机就还原,所以一般创建批处理文件,开机启动. ping 192.168.1.100 -l 65500 多台肉鸡 ...

  5. mysql----快速删除数据表（drop,truncate.delete）

    概念: 三者均可删除数据表 TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 DELETE 速度快 ...

  6. Mysql 技巧

    order by条件: SELECT * FROM tablename WHERE id_one=27 OR id_two=27 ORDER BY CASE WHEN id_one=27 THEN t ...

  7. 卷积神经网络在tenserflow的实现

    卷积神经网络的理论基础看这篇:http://blog.csdn.net/stdcoutzyx/article/details/41596663/ 卷积神经网络的tenserflow教程看这里:http ...

  8. vs2008安装opencv2.4.6

    最近安装opencv2.4.6,发现犯了一个很愚蠢的错误,在此记录一下. opencv的头文件包含应该位于build文件夹内,而我误将opencv文件夹下的include包含了进去,造成无法找到头文件 ...

  9. form2js的使用（续BootstrapTable）

    通过收集表单数据,并且转换为json格式,实现表格的查询. 引入插件:不要忘记引入jquery. <script src="${ctx}/assets/plugins/form2js/ ...

  10. Jetty实战之 嵌入式Jetty运行Servlet

    http://blog.csdn.net/kongxx/article/details/7230080 Jetty实战之 嵌入式Jetty运行Servlet 分类:JettyJava (19530)  ...