摘要：為了解決這個問題，我們可以使用工廠模式。框架中的工廠模式中的其實就是一個工廠函數，它根據傳入參數的不同創建元素或者去尋找上下文中的元素，創建成相應的對象。工廠模式有利于消除對象間的耦合，提供更大的靈活性。

本文首發于知乎專欄：前端指南

工廠模式定義創建對象的接口，但是讓子類決定實例化哪個類。工廠方法將類的實例化延遲到子類。

我們可以使用Object構造函數來創建單個對象，但是，使用同一個接口創建很多對象時，會產生大量重復的代碼。為了解決這個問題，我們可以使用工廠模式。

我們來看一個簡單的例子：

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.

在上邊這個例子中，我們定義了兩個employee，一個是Front End Engineer，另一個是UI designer，他們都有position屬性和tool屬性，也都有introduction方法。如果我們需要創建很多個類似employee的對象呢，那我們就需要重復很多類似的代碼。接下來，我們做一些簡單的修改：

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()中實現。這其實就是一個簡單工廠模式的例子，Employee是一個工廠，可以根據傳入的type的不同，創建不同的employee，每個employee有自己的職位和使用的工具，每個employee都可以介紹自己的這些信息。

jQuery中的$()其實就是一個工廠函數，它根據傳入參數的不同創建元素或者去尋找上下文中的元素，創建成相應的jQuery對象。
以下實例來自于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 );
};

同時，像Angular2、Node、Vue、React等等，很多開源框架中其實都用到了工廠模式，學會工廠模式，有助于你更好的理解和使用這些框架。

當需要根據不同參數產生不同實例，這些實例都有相同的行為，這時候我們可以使用工廠模式，簡化實現的過程，同時也可以減少每種對象所需的代碼量。工廠模式有利于消除對象間的耦合，提供更大的靈活性。

注：如果不需要另外一個類，或者不需要在運行期間判斷實例化的對象屬于哪個類，那就不需要使用工廠模式，大多數情況下使用new關鍵字和構造函數公開實例化對象，提高代碼可讀性。切勿濫用。