JS每日一题:设计模式-如何理解工厂模式?

44次阅读

共计 2230 个字符,预计需要花费 6 分钟才能阅读完成。

20190408 期
设计模式 - 如何理解工厂模式?
定义: 创建对象的接口,让子类决定实例化哪个类。工厂方法将类的实例化延迟到子类, 而子类可以重写接口方法以便创建的时候指定自己的对象类型。
适用场景
需要根据不同参数产生不同实例,这些实例都有相同的行为, 这时候我们可以使用工厂模式,简化实现的过程,同时也可以减少每种对象所需的代码量。工厂模式有利于消除对象间的耦合,提供更大的灵活性
代码理解:
// 下方就是一个典型的工厂模式
// 首先创建对象的接口
const productManager = {};

productManager.createProductA = function () {
console.log(‘ProductA’);
}

productManager.createProductB = function () {
console.log(‘ProductB’);
}

productManager.factory = function (type) {
// 工厂方法将类的实例化延迟到子类
return new productManager[type];
}

// 让子类决定实例化哪个类
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);
熟悉的 jquery
jQuery 中的 $() 其实就是一个工厂函数,它根据传入参数的不同创建元素或者去寻找上下文中的元素,创建成相应的 jQuery 对象
// https://github.com/jquery/jquery/blob/master/src/core/init.js

init = jQuery.fn.init = function(selector, context, root) {
var match, elem;

// HANDLE: $(“”), $(null), $(undefined), $(false)
if (!selector) {
return this;
}

// Method init() accepts an alternate rootjQuery
// so migrate can support jQuery.sub (gh-2101)
root = root || rootjQuery;

// Handle HTML strings
if (typeof selector === “string”) {

//…

// HANDLE: $(DOMElement)
} else if (selector.nodeType) {

//….

// HANDLE: $(function)
// Shortcut for document ready
} else if (jQuery.isFunction( selector) ) {
//….
}

return jQuery.makeArray(selector, this);
};
总结
优点

工厂类含有必要的判断逻辑, 实现了对责任的分割,它提供了专门的工厂类用于创建对象
用户只需要关心所需产品对应的工厂,无须关心创建细节
在系统中加入新产品时,无须修改抽象工厂和抽象产品提供的接口, 符合“开闭原则”

缺点

添加新产品时,需要编写新的具体产品类, 一定程度上增加了系统的复杂度
考虑到系统的可扩展性,需要引入抽象层,在客户端代码中均使用抽象层进行定义,增加了系统的抽象性和理解难度

关于 JS 每日一题
JS 每日一题可以看成是一个语音答题社区 每天利用碎片时间采用 60 秒内的语音形式来完成当天的考题 群主在次日 0 点推送当天的参考答案
注 绝不仅限于完成当天任务,更多是查漏补缺,学习群内其它同学优秀的答题思路
点击加入答题

正文完
 0