Rumah > hujung hadapan web > tutorial js > JS设计模式之工厂模式详解

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

php中世界最好的语言
Lepaskan: 2018-03-14 14:18:01
asal
1707 orang telah melayarinya

这次给大家带来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");
Salin selepas log masuk

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

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);
    };
};
Salin selepas log masuk

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

page.dom.factory = function (type) {
    return new page.dom[type];}
Salin selepas log masuk

使用方式如下:

var o = page.dom.factory('Link');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);
Salin selepas log masuk

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

推荐阅读:

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

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

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

Atas ialah kandungan terperinci JS设计模式之工厂模式详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan