首页 > web前端 > js教程 > JS设计模式之工厂模式详解

JS设计模式之工厂模式详解

php中世界最好的语言
发布: 2018-03-14 14:18:01
原创
1679 人浏览过

这次给大家带来JS设计模式工厂模式详解,使用JS工厂模式的注意事项有哪些,下面就是实战案例,一起来看一下。

概念:工厂模式定义了一个用于创建对象的接口,这个接口由子类决定实例化哪一个类,该模式是一个类的实例化延迟到了子类。而子类可以重写接口的方法以便创建的时候指定自己的对象类型(抽象工厂)

作用和注意事项 
作用:对象构建十分复杂。

需要依赖具体的环境创建不同的实例

处理大量的具有相同属性的小对象

注意事项:不能滥用工厂,有时候仅仅是给代码增加复杂度

使用方法 
我们通过一个例子来演示这个问题,就像我们这个工厂里要生产不同类型的产品一样,我们每个类型写在一个方法,这样我们在生产的时候直接调用这个办法就行了。 那请看这段代码:

var productManager = {};
productManager.createProductA = function () {
    console.log('ProductA');
}
productManager.createProductB = function () {
    console.log('ProductB');
}
productManager.factory = function (typeType) {
    return new productManager[typeType];
}
productManager.factory("createProductA");
登录后复制

我们在详细一点,假如我们想要在网页中插入一些元素,而这些元素的类型不固定,可能是图片可能是链接,甚至可能是文本,根据工行模式的定义我们需要定义相应的子类

var page = page || {};
page.dom = page.dom || {};//子函数1:处理文本page.dom.Text = function () {
    this.insert = function (where) {
        var txt = document.createTextNode(this.url);
        where.appendChild(txt);
    };
};//子函数2:处理链接page.dom.Link = function () {
    this.insert = function (where) {
        var link = document.createElement('a');
        link.href = this.url;
        link.appendChild(document.createTextNode(this.url));
        where.appendChild(link);
    };
};//子函数3:处理图片page.dom.Image = function () {
    this.insert = function (where) {
        var im = document.createElement('img');
        im.src = this.url;
        where.appendChild(im);
    };
};
登录后复制

那我们如何定义工厂模式呢?其实很简单

page.dom.factory = function (type) {
    return new page.dom[type];}
登录后复制

使用方式如下:

var o = page.dom.factory('Link');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS设计模式之建造者模式详解

JS的设计模式之构造函数模式详解

js设计模式之-单例模式的使用

以上是JS设计模式之工厂模式详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板