<!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. CentOS 6.5 开机启动指定服务

    gedit /etc/rc.d/rc.local #关闭防火墙 service iptables stop #开启samba服务 service smb start #开启ntopng 端口5000 ...

  2. mahout 查看kmeans结果的命令

    $mahout seqdumper -i  output/clusters-1/part-r-00000 直接在控制台上显示,要写入文件可以在后面加上-o <输出路径> mahout中的k ...

  3. mariadb cache1

    http://www.percona.com/blog/2006/07/27/mysql-query-cache/ MySQL Query Cache July 27, 2006 by Peter Z ...

  4. Modbus测试工具 ：Modbus Poll，Modbus Slave

    源:http://blog.sina.com.cn/s/blog_49352090010138e7.html Modbus测试工具 :Modbus Poll,Modbus Slave

  5. C#+QI的例子

    COM中,和我们打交道的是接口,也就是说类对我们是隐形的,那么我们要做开发,要使用这些功能,我们只能通过接口,通过接口暴露出来的方法,COM是一种服务器端/客户端架构,服务器端定义了操作的法,客户端通 ...

  6. -linux删除大量文件----rm,rsync

    要在linux下删除海量文件,比如有数十万个文件,此时常用的rm -rf * 就会等待时间很长.这时我们可以使用rsync快速删除大量文件. 1.建立一个空目录 mkdir -p /tmp/rsync ...

  7. mysql建表---级联删除

    CREATE TABLE `roottb` (  `id` INT(11) UNSIGNED AUTO_INCREMENT NOT NULL,  `data` VARCHAR(100) NOT NUL ...

  8. ARM架构解析

    ARM架构解析 (2014-11-23 21:56:53) 转载▼ 标签: francis_hao arm架构 arm核 soc 分类: MCU 先来谈一下ARM的发展史:1978年12月5日,物理学 ...

  9. Docker Swarm集群

    Docker Swarm集群 IP 10.6.17.11  管理节点 IP 10.6.17.12   节点A IP 10.6.17.13   节点B IP 10.6.17.14   节点C 安装 Sw ...

  10. OpenStack - liberty CentOS 7

    OpenStack私有云部署 Controller Node:       em1(10.6.17.11),em2() Computer Node:         em1(10.6.17.12),e ...