JavaScriptにおける工場モデルの簡単な説明

この文章は初めて知乎コラムで発表した.
定義
工場モードでは、作成対象のインターフェースを定義しますが、どのクラスを実装するかをサブクラスに決めさせます.工場の方法はクラスの実用化をサブクラスに延期します.
概要
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 Eginerで、もう一つはUI designerです.彼らはposition属性とtool属性を持っています.もし私たちが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の初期化をProgramer()と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 );
};

同時に、Anglar 2、Node、Vue、Reactなどのように、多くのオープンソースフレームの中で実際には工場モデルを使用して、工場モデルを習得して、これらのフレームをより良い理解と使用するのに役立ちます.
締め括りをつける
異なるパラメータに従って異なるインスタンスを生成する必要がある場合、これらのインスタンスは同じ挙動をしています.この場合、工場モードを使用して、実装プロセスを簡略化することができます.また、各オブジェクトに必要なコード量を低減することもできます.工場モードはオブジェクト間の結合を除去し、より大きな柔軟性を提供することに有利である.
注:別のクラスが必要でない場合、または実行中に実用化されたオブジェクトがどのクラスに属するかを判断する必要がない場合は、工場モードを使用する必要はなく、newキーワードと構造関数を使用して実装対象を公開し、コードの読み取り可能性を高めることが多いです.悪用しないでください.