<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Factory方法模式--oop面向对象编程实例</title>
    
</head>
<body>
    <div id="container" style="border:3px solid red;width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
//针对oop编程增强版进行改造，oop增强版里面的各个基类都是分散开来写的，本demo中将统一写入工厂类的原型中统一管理，并增加安全模式

//学科工厂类
var JobFactory = function(type,content){
    //安全模式:加了安全模式后可以直接实例化对象，不用加new
    if (!(this instanceof JobFactory)) {
        return new JobFactory(type,content);
    }
}
    //工厂类原型中添加创建各个学科基类的方法
    JobFactory.prototype = {
        //java学科基类
        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学科基类
        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学科基类
        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学科基类
        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 data = [
{type:'java',content:'java是门后台语言'},
{type:'php',content:'php是门后台语言'},
{type:'javascript',content:'js是前端web开发语言'},
{type:'ui',content:'ui交互设计'},
];

//循环创建实例对象(省去了new操作)
var job = JobFactory();
for(var i=0;i<data.length;i++){
    var fn = data[i].type;//让字符串变方法名的写法，对象的方法名若是字符串数据，可将字符串写在中括号中实现对象方法的调用
    job[fn](data[i].content);
}

// job.Java(data[0].content);
// job.php(data[1].content);
// job.Javascript(data[2].content);
// job.UI(data[3].content);

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

js原生设计模式——4安全的工厂方法模式之Factory方法模式的更多相关文章

  1. js原生设计模式——4安全的工厂方法模式之oop编程增强版

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

  2. js原生设计模式——3简单工厂模式\简单工厂模式封装简单对象

    1.Factory基本写法 <!DOCTYPE html><html lang="en"><head>    <meta charset= ...

  3. js原生设计模式——3简单工厂模式\js面向对象编程实例

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

  4. js原生设计模式——10适配器模式之参数适配器

    原理:参数适配器说白了就是给出要带入数据字段的对应字段的默认值,一旦数据字段值不足,就取默认值补足. [写法一]:直接返回 <!DOCTYPE html><html lang=&qu ...

  5. js原生设计模式——2面向对象编程之继承—多继承

    1.单对象克隆 <!DOCTYPE html><html lang="en"><head>    <meta charset=" ...

  6. js原生设计模式——2面向对象编程之继承—call(this)构造函数式继承

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

  7. js原生设计模式——2面向对象编程之继承—new类式继承

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

  8. js原生设计模式——13桥接模式(相同业务逻辑抽象化处理的职责链模式)

    桥接模式之多元化类之间的实例化调用实例 <!DOCTYPE html><html lang="en"><head>    <meta ch ...

  9. js原生设计模式——12装饰者模式

    1.面向对象模式装饰者 <!DOCTYPE html><html lang="en"><head>    <meta charset=&q ...

随机推荐

  1. CentOS6.5 安装snort

    本机CentOS6.5最大化安装,以下安装所需组件也是最大化安装之后仍需自己安装的. 1.安装libpcap与libpcap-devel yum -y install libpcap* 2.安装lib ...

  2. 使用nginx负载平衡

    1. 介绍 在许多应用中,负载平衡是一种常用的技术来优化利用资源最大化吞吐量,减少等待时间,并确保容错. 可以使用nginx的作为一种非常高效的HTTP负载平衡器,将流量分配到多个应用服务器上提高性能 ...

  3. 【转载】彻底弄懂css中单位px和em,rem的区别

    原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...

  4. dotnet webservice处理数据量过大，ajax请求返回500错误解决方案

    ajax请求webservice返回json数据,数据规模过大时ajax请求会得到500的响应,webservice+ajax处理大规模的数据需要在web.config中进行如下配置: <sys ...

  5. do from a specific ip

    ping -S 192.168.240.1 sohu.com telnet -b 192.168.240.1 sohu.com 80

  6. CodeForces 510E Fox And Dinner

    网络流. 原点到偶数连边,容量为2, 奇数到汇点连边,容量为2, 偶数到与之能凑成素数的奇数连边,容量为1 如果奇数个数不等于偶数个数,输出不可能 如果原点到偶数的边不满流,输出不可能 剩下的情况有解 ...

  7. LVS详解

    v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...

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

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

  9. MySQL查询in操作 查询结果按in集合顺序显示_Mysql_脚本之家

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  10. java中关于编码的问题（字符转换流及字符缓冲流 ）

    上次我们使用的是字节流,还有一种方式就是字符流,上次说过如何分辨使用哪种流,如果记事本可以读懂则使用字符流,否则使用字节流.使用字符流就需要牵扯到编码的问题,下面给出一种转化流的格式. OutputS ...