摘要：為了解決這個(gè)問(wèn)題，我們可以使用工廠模式。框架中的工廠模式中的其實(shí)就是一個(gè)工廠函數(shù)，它根據(jù)傳入?yún)?shù)的不同創(chuàng)建元素或者去尋找上下文中的元素，創(chuàng)建成相應(yīng)的對(duì)象。工廠模式有利于消除對(duì)象間的耦合，提供更大的靈活性。

本文首發(fā)于知乎專(zhuān)欄：前端指南

工廠模式定義創(chuàng)建對(duì)象的接口，但是讓子類(lèi)決定實(shí)例化哪個(gè)類(lèi)。工廠方法將類(lèi)的實(shí)例化延遲到子類(lèi)。

我們可以使用Object構(gòu)造函數(shù)來(lái)創(chuàng)建單個(gè)對(duì)象，但是，使用同一個(gè)接口創(chuàng)建很多對(duì)象時(shí)，會(huì)產(chǎn)生大量重復(fù)的代碼。為了解決這個(gè)問(wèn)題，我們可以使用工廠模式。

我們來(lái)看一個(gè)簡(jiǎn)單的例子：

var employee1 = new Object();
employee1.position = "Front end engineer";
employee1.tool = "I love vscode.";
employee1.introduction = function () {
    console.log("I am a " + this.position + ", and " + this.tool);
}
var employee2 = new Object();
employee2.position = "UI designer";
employee2.tool = "I love photoshop.";
employee2.introduction = function () {
    console.log("I am a " + this.position + ", and " + this.tool);
}
employee1.introduction();//I am a Front end engineer, and I love vscode.
employee2.introduction();//I am a UI designer, and I love photoshop.

在上邊這個(gè)例子中，我們定義了兩個(gè)employee，一個(gè)是Front End Engineer，另一個(gè)是UI designer，他們都有position屬性和tool屬性，也都有introduction方法。如果我們需要?jiǎng)?chuàng)建很多個(gè)類(lèi)似employee的對(duì)象呢，那我們就需要重復(fù)很多類(lèi)似的代碼。接下來(lái)，我們做一些簡(jiǎn)單的修改：

function Employee(type) {
    var employee;
    if (type == "programmer") {
        employee = new Programmer();
    } else if (type == "designer") {
        employee = new Designer();
    }
    employee.introduction = function () {
        console.log("I am a " + this.position + ", and " + this.tool);
    }
    return employee;

}

function Programmer() {
    this.position = "Front end engineer";
    this.tool = "I love vscode.";
}
function Designer() {
    this.position = "UI designer";
    this.tool = "I love photoshop.";
}

var employee1 = Employee("programmer");
employee1.introduction();//I am a Front end engineer, and I love vscode.
var employee2 = Employee("designer");
employee2.introduction();//I am a UI designer, and I love photoshop.

在上邊這段代碼中，我們將employee的初始化分別放到了Programmer()和Designer()中實(shí)現(xiàn)。這其實(shí)就是一個(gè)簡(jiǎn)單工廠模式的例子，Employee是一個(gè)工廠，可以根據(jù)傳入的type的不同，創(chuàng)建不同的employee，每個(gè)employee有自己的職位和使用的工具，每個(gè)employee都可以介紹自己的這些信息。

jQuery中的$()其實(shí)就是一個(gè)工廠函數(shù)，它根據(jù)傳入?yún)?shù)的不同創(chuàng)建元素或者去尋找上下文中的元素，創(chuàng)建成相應(yīng)的jQuery對(duì)象。
以下實(shí)例來(lái)自于https://github.com/jquery/jqu...

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 );
};

同時(shí)，像Angular2、Node、Vue、React等等，很多開(kāi)源框架中其實(shí)都用到了工廠模式，學(xué)會(huì)工廠模式，有助于你更好的理解和使用這些框架。

當(dāng)需要根據(jù)不同參數(shù)產(chǎn)生不同實(shí)例，這些實(shí)例都有相同的行為，這時(shí)候我們可以使用工廠模式，簡(jiǎn)化實(shí)現(xiàn)的過(guò)程，同時(shí)也可以減少每種對(duì)象所需的代碼量。工廠模式有利于消除對(duì)象間的耦合，提供更大的靈活性。

注：如果不需要另外一個(gè)類(lèi)，或者不需要在運(yùn)行期間判斷實(shí)例化的對(duì)象屬于哪個(gè)類(lèi)，那就不需要使用工廠模式，大多數(shù)情況下使用new關(guān)鍵字和構(gòu)造函數(shù)公開(kāi)實(shí)例化對(duì)象，提高代碼可讀性。切勿濫用。