<!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. The Wall (medium)

    The Wall (medium) Heidi the Cow is aghast: cracks in the northern Wall? Zombies gathering outside, f ...

  2. 【转】SSL/TLS/WTLS协议原理

    1 SSL(Secure Socket Layer)是netscape公司设计的主要用于web的安全传输协议.这种协议在WEB上获得了广泛的应用.2 IETF(www.ietf.org )将SSL作了 ...

  3. windows编程:创建DLL

    创建DLL Dll是动态链接库的缩写,可以作为附加代码动态映射到进程的地址空间中. 动态库的一般创建方法如下 方法1.使用 __declspec(dllexport)  方式导出 一般的框架如下 // ...

  4. 16级第一周寒假作业F题

    Subsequence TimeLimit:1000MS  MemoryLimit:65536K 64-bit integer IO format:%lld Problem Description A ...

  5. 一道题看懂OC的文件管理：NSFileManager，计算文件包含内存大小

    计算文件夹下所有文件的大小 // 查看错误信息 __autoreleasing NSError *error; // 文件管理对象 NSFileManager *manager = [NSFileMa ...

  6. Spring mvc 返回json格式 - 龙企阁 - 博客频道 - CSDN.NET

    第一次使用spring mvc ,在此也算是记录一下以防忘记,希望有经验的朋友指出不足的地方 一.使用maven管理jar. <dependency> <groupId>org ...

  7. Linux安装php的Redis扩展

    1.安装redis 下载:https://github.com/nicolasff/phpredis/archive/2.2.4.tar.gz 上传phpredis-2.2.4.tar.gz到/usr ...

  8. Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

    前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script ...

  9. curl讲解第一篇---入门和基本使用

    概念 它支持很多协议:FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE 以及 LDAP. curl同样支持HTTPS认证,HTTP POST方法, ...

  10. Spring--Bean scope

    singleton, prototype,request, session, global session bean.xml: <?xml version="1.0" enc ...