<!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. (转)C++中返回对象的情形及RVO

    http://www.cnblogs.com/xkfz007/archive/2012/07/21/2602110.html 之前有文章介绍过临时对象和返回值优化RVO方面的问题.见此处. 在C++中 ...

  2. cc2530串口通信流程

    //串口发送接收流程 main: //主函数 ->osal_init_system(); //操作系统初始化 ->osalInitTasks(); //任务初始化 -->ZDApp_ ...

  3. Eclipse开发Maven项目提示：程序包org.junit不存在解决方案

    原因: 个人考虑产生此错误的原因是因为Eclipse中对于测试和开发的鉴定不明?Intellij中没有错误,因为Intellij对项目的管理就是同Maven结构的. 解决方案: 原来的junit的sc ...

  4. centos常用配置收集

    配置ntp服务器: # vi /etc/ntp.conf driftfile /var/lib/ntp/driftrestrict -4 default kod notrap nomodifyrest ...

  5. 使用Bootstrap建立网站微金所——头部

    1.微金所链接:http://www.weijinsuo.com/ 2.头部分为:topbar和nav上下两个部分 (1)topbar详解 topbar使用bootstrap的栅格系统 (2)nav分 ...

  6. css3选择器总结--强大如jquery

    最近发现,阿里的笔试考了许多css3的知识,像query media.box-flex等等.主要是移动浏览器的开发,让html5和css3如虎添翼,再也不用担心兼容了.so总结一下css3的选择器: ...

  7. JVM线程安全

    一.线程的调度方式 线程调度分为两种方式: 协同式调度和抢占式调度.协同式调度:线程的执行时间由线程本身控制,线程将工作执行完之后,通知操作系统切换到其他线程上.缺点:时间不可控,就算出问题,也不会通 ...

  8. 9、手把手教你Extjs5（九）使用MVVM特性控制菜单样式

    菜单的样式多了,怎么可以灵活的切换是个问题. 在使用标准菜单的时候,在菜单最前面有二个按钮,可以切换到树状菜单和按钮菜单. 在树状菜单的显示区,可以切换换到标准菜单,以及折叠式菜单. 切换到按钮菜单之 ...

  9. 7、手把手教你Extjs5（七）自定义菜单1

    顶部和底部区域已经作好,在顶部区域有一个菜单的按钮,这一节我们设计一个菜单的数据结构,使其可以展示出不同样式的菜单.由于准备搭建的是一个系统模块自定义的系统,因此菜单也是自定义的,在操作员系统登录的时 ...

  10. iOS开发——离线缓存

    先搭好架子,有时间了再填充.