🛀 🏆 👴🏽 MPAのウィジェットファクトリ 🐛 ✝️ 👃🏻

ウィジェットファクトリは、マルチページアプリケーション（MPA）アーキテクチャにうまく適合するクライアントコードを整理する方法です。

この記事では、スクリプトの読み込みを最適化し、コードをウィジェットに分割し、ページからクライアントへのデータの転送を簡素化する（サーバーレンダリング）アーキテクチャソリューションを検討します。

ウィジェットはコンポーネント（またはコンポーネントコンテナ）と呼ばれ、その初期化ポイントはDOMです。そして、そこからテンプレートからデータを転送することが可能になります。

そして今、すべての順番について。

コンセプト

このページには、呼び出されたウィジェットに関する情報（ウィジェット名、データ）が含まれています。

実装ロジックは、以下で構成されるメインの唯一のプラグインバンドルになります。

アプリケーションのほとんどのページで実行されるスクリプト
すべての一般的なウィジェットのコード

以下では、 一般的なウィジェットとは、ナビゲーション、検索など、アプリケーションで最も頻繁に必要とされるウィジェットを意味します。
すべての遅延ウィジェットのハッシュリスト*名前と実装パスを含む

以下、遅延ウィジェットとは、めったに必要とされないウィジェットを意味します。将来的には、そのようなウィジェットは動的に読み込まれます。たとえば、ギャラリー、マーケティングウィンドウ。
ウィジェットファクトリコード自体

概念をよりよく理解するために、実装例を分析します。

実装

アーキテクチャ自体の実装は非常に単純で、そのバージョンはgithubにあります。 Webpackとその動的インポートに基づいていました。

次に、主要な論理ポイントを調べます。

ページには、ウィジェットの名前、JSON形式のデータを含むスクリプトタグが含まれています

<script type="application/widget+json"> { "widget": "TesLazyWidget", "data": { "1": 1 } } </script>

entry.jsの接続
コーナースクリプトが実行されます。

Widget FactoryがすべてのScriptタグを検索

 initWidgets($('script[type="application/widget+json"]'));

JSON解析

 data = $.parseJSON(script.innerHTML);

共通のウィジェットの場合、初期化して記憶します

 widget = new Widget(data);

これが遅延ウィジェットの場合、それをロードします

 loaderWidget().then(createWidget);

記憶されたすべての共通ウィジェットが起動します

 for (let i = 0; i < this.widgets.length; i++) { this.widgets[i].start(); }

ロードされた遅延ウィジェットを初期化して開始します

 const widget = new Widget(data); widget.start();

実装は概略図です。

このアーキテクチャの主な利点

ページの読み込み速度を上げる

メインバンドルには、主要機能である重要なスクリプトのみが含まれています。追加のロジックが動的にロードされます。このバンドルは、コードカバレッジの割合が高くなります。これにより、ページサイズが縮小され、結果としてパフォーマンスが向上します。

たとえば、ユーザーに関するメニューと情報がすぐに読み込まれ、広告提案、画像ギャラリー、追加の視覚効果が動的に読み込まれます。

これはルーティングに代わる優れた方法です。

ルートを作成および構成し、URLまたはテンプレートに応じて必要なスクリプトをロードする必要はありません。複雑な依存関係を維持する必要がないため、エラーのリスクが軽減されます。

クライアントにデータを転送する簡単な方法

すでに解析段階でページにJSONをレンダリングするだけで、追加のAJAX要求を必要とせずにデータがクライアントに送られます。

  <script type="application/widget+json"> { "widget": "ActionBar" , "data": { "isPublic": true, "id": "{{ id }}", "items" : [{ "title": "Edit", "iconLeft": "edit" }] } } </script>

コードの重複を削減

ウィジェットを再利用しますか？簡単！たとえば、ページでは、フィルター、読み込み、その他のインタラクティブロジックを備えた複数のニュースリストを実装する必要があります。 NewsListウィジェットは、この機能の実装を担当します。 htmlタグのように、このウィジェットの呼び出しを、必要な数のリストと必要なすべての場所にあるテンプレートに挿入するだけです。

  <script type="application/widget+json"> { "widget": "NewsList", "data": { "contentId": "business" } } </script> <script type="application/widget+json"> { "widget": "NewsList", "data": { "contentId": "policy" } } </script>

コードは読みやすく、理解しやすいです。

ウィジェットファクトリは、コードを記述するためのルールを形式化し、スクリプトを初期化して実行するための明確な構造を作成します。このアプローチでは、ウィジェットの呼び出しチェーンは線形です。それぞれのロジックはカプセル化されているため、コードの変更による予期しない結果が少なくなり、プロジェクトの混乱が少なくなり、システムの柔軟性が高まります。

「古い」プロジェクトのコードを整理する素晴らしい方法

アプリケーションにすべてがすでに書き込まれているが、特別なアイデアがない場合。混乱の絶え間ない感覚は去りません。そして、プロジェクトでは、インラインスクリプト

  <script> require(['jquery', 'selectBoxIt'], function ($) { $('#itemId_selector').selectBoxIt(); var $form = $('#savepost'); …….. $('#skip').click(function () { $form.submit(); }); }); </script>

ウィジェットを作成し、このコードをウィジェットに転送するだけです。したがって、ウィジェットファクトリは、コンポーネントアプローチに切り替える優れた方法です。

さらに、たとえばここにあるように、ウィジェットのリストを自動的に生成できます。これにより、ウィジェットの作成が簡素化され、名前付きのディレクトリと実装付きのファイルが作成されますが、実際には自動化も可能です。

結論の代わりに

その結果、ウィジェットファクトリはMPAアーキテクチャに完全に適合します。コードを形式化し、読み込みを最適化し、明確で便利な使用規則を提供します。

MPAのウィジェットファクトリ