JS逐日一题:设想形式-怎样明白工场形式?

2024年3月27日 170次阅读 来源: febobo

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点推送当天的参考答案

  • 注 毫不仅限于完成当天使命，更多是查漏补缺，进修群内别的同砚优异的答题思绪

点击到场答题

    原文作者：febobo
    原文地址: https://segmentfault.com/a/1190000018810458
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞