<!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. CGAffineTransform 放射变换解析 即矩阵变换

    转载自;http://www.cocoachina.com/bbs/3g/read.php?tid=151136 矩阵乘法A B相乘要A的列数等于B的行数才有定义,结果是一个 A行B列的矩阵C,C的每 ...

  2. 删除DriverStore\FileRepository文件夹后，设备驱动无法安装，提示“没有为设备信息集或元素选择驱动程序（代码 28）”的解决办法

    前言: 我前几天手贱,整个FileRepository删除掉了,之后重启就出现了让人蛋疼的这个问题,因为出于各种原因不想重装系统,百度轮番换搜索词无果,虽然驱动装上了但新设备依然无法自动安装驱动等“一 ...

  3. POJ 2991 Crane

    线段树+计算几何,区间更新,区间求和,向量旋转. /* *********************************************** Author :Zhou Zhentao Ema ...

  4. base库--- 一个应用JS

    1 /** * Created by Administrator on 2014/6/3 0003. */ $(function () { //个人中心下拉 $('.js-hd-right').hov ...

  5. ural1126 Magnetic Storms

    Magnetic Storms Time limit: 0.5 secondMemory limit: 64 MB The directory of our kindergarten decided ...

  6. Python全栈【进程、线程】

    Python全栈[进程.线程] 本节内容: 进程 线程 协程 I/O多路复用 进程 1.进程就是一个程序在一个数据集上的一次动态执行过程,进程是资源分配的最小单元. 2.进程一般由程序.数据集.进程控 ...

  7. php 读取二进制文件

    $file_pointer = fopen($file, "r"); $file_read = fread($file_pointer, filesize($file)); //$ ...

  8. UITableView表格操作

    UITableView[表格视图] UITableView是表格视图,是UIScrollView的子类,非常重要. 一.表格视图常用属性 1.基本属性方法 创建一个tableView //    UI ...

  9. HttpServletRequest.getServletContext()一直提示找不到，而引出的问题

    开发j2ee项目的时候,需要用到servlet-api,如果使用了maven,web项目可以在pom.xml中手动加入所需jar包,达到与依赖j2ee libarary同样的功能.可问题来了: 1. ...

  10. Cocos2dx 学习笔记整理----在项目中使用图片（三）

    这节练习下DragonBones. 手机由于性能所限,需要特注意资源的使用. 游戏项目的话由于资源比较多,一般都会用到DragonBones来做动作,这个又称为龙骨. DragonBones传送点:h ...