JavaScriptプラグインシステムの設計

多くの人気のあるライブラリとフレームワークは、WordPress、JQuery、Gatsby、Eleventy、Vueなどのプラグインシステムを使用しています。プラグインシステムにより、開発者は安全でスケーラブルな方法で機能を追加し、コアプロジェクトの価値を高め、コミュニティを構築しながらメンテナンスの負担を軽減できます。この記事では、JavaScriptプラグインシステムを構築することにより、その設計コンセプトについて説明します。

他の開発者が「ボタン」機能を追加できるようにすることを目的として、Betacalcと呼ばれる簡単なJavaScript計算機の例を挙げます。

初期計算コード：

 // calculator const betaCalc = {
    currentValue：0、

    setValue（newValue）{
        this.currentValue = newValue;
        console.log（this.currentValue）;
    }、

    プラス（addend）{
        this.setValue（this.currentValue addend）;
    }、

    マイナス（subrathend）{
        this.setValue（this.currentValue -subtrahend）;
    }
};

//計算機Betacalc.setValue（3）を使用します。 // => 3
betacalc.plus（3）; // => 6
betacalc.minus（2）; // => 4

この計算機は機能が制限されており、 console.logを介して結果のみを表示できます。次に、プラグインシステムを追加します。

最も単純なプラグインシステム：

最初に、開発者がプラグインを登録できるようにするregisterメソッドを作成します。この方法は、プラグインを取り、 exec機能を取得し、新しい方法として計算機に添付します。

 // calculator const betaCalc = {
    // ...その他の電卓コードレジスタ（プラグイン）{
        const {name、exec} = plugin;
        この[name] = exec;
    }
};

単純な「正方形」ボタンプラグインの例：

 //プラグインを定義const squaredplugin = {
    名前：「四角」、
    exec：function（）{
        this.setValue（this.currentValue * this.currentValue）;
    }
};

//プラグインbetacalc.register（squaredplugin）を登録します。

プラグインには通常、コードとメタデータ（名前、説明、バージョン番号、依存関係など）の2つの部分が含まれています。この例では、 exec関数にコードが含まれ、 nameメタデータです。登録後、 exec関数はメソッドとしてbetaCalcオブジェクトに直接接続されます。

今、ベタカルクには新しい「四角」ボタンがあります。

 betacalc.setValue（3）; // => 3
betacalc.plus（2）; // => 5
betacalc.squared（）; // => 25
betacalc.squared（）; // => 625

この方法はシンプルで使いやすく、プラグインをNPMを通じて簡単に配布およびインポートできます。しかし、それには欠陥もあります。プラグインは、 betaCalcでthis直接アクセスし、すべてのコードを読み書きする許可を持ち、開閉の原則に違反します。さらに、 squared関数は副作用を通じて動作し、理想的ではありません。

改善されたプラグインアーキテクチャ：

これらの問題を解決するために、プラグインアーキテクチャを改善します。

 // calculator const betaCalc = {
    currentValue：0、

    setValue（value）{
        this.currentValue = value;
        console.log（this.currentValue）;
    }、

    コア：{
        'Plus' '：（ currentVal、addend）=> currentVal addend、
        'minus' ：（ currentVal、subtrahend）=> currentVal -subtrahend
    }、

    プラグイン：{}、

    press（buttonname、newval）{
        const func = this.core [buttonname] || this.plugins [buttonname];
        this.setValue（func（this.currentvalue、newval））;
    }、

    登録（プラグイン）{
        const {name、exec} = plugin;
        this.plugins [name] = exec;
    }
};

//プラグインconst squaredplugin = {
    名前：「四角」、
    exec：function（currentValue）{
        currentValue * currentValueを返します。
    }
};

betacalc.register（squaredplugin）;

//計算機Betacalc.setValue（3）を使用します。 // => 3
Betacalc.press（ 'Plus'、2）; // => 5
betacalc.press（ 'Squared'）; // => 25
betacalc.press（ 'Squared'）; // => 625

改善：

1. プラグインをコアメソッドから分離し、 pluginsオブジェクトに保存してセキュリティを向上させます。
2. pressメソッドを使用して関数を見つけて名前で呼び出し、ボタンを純粋な関数に変換し、APIの簡素化、便利なテスト、およびカップリングの削減を行います。

このアーキテクチャはより限られていますが、より安全で信頼性が高くなります。プラグインの機能拡張機能を制限することは、厳しすぎるかもしれません。プラグインの著者の許可は慎重に計量する必要があります。これにより、プロジェクトの安定性が保証されるだけでなく、問題を解決できるようになります。

さらなる改善：

さらに改善することができます。エラー処理の追加、プラグイン機能（登録ライフサイクルコールバック、ストレージステータスなど）の拡張、プラグイン登録メカニズム（バッチ登録、構成設定などをサポート）を改善します。

要約：

優れたプラグインシステムを構築するのは簡単ではなく、さまざまな要因を慎重に検討する必要があります。既存のプロジェクト（JQuery、Gatsbyなど）やJavaScriptの設計パターンのプラグインシステムを参照し、ソフトウェア開発原則（オープンおよびシャットダウン原則、ゆるいカップリング、ディミッタールール、依存噴射など）に従うことにより、長期的にすべてのユーザーニーズを満たすプラグインシステムを構築できます。優れたプラグインシステムは、開発者コミュニティの繁栄を促進し、双方にとって有利な状況を達成できます。

以上がJavaScriptプラグインシステムの設計の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。