16 フラグメントの操作
webアプリケーションを設計すると、ページによっては、急速に大きくなりにくくなる場合があります。 複合ページの作成および維持プロセスを簡素化する方法の1つは、フラグメントを使用することです。
大きな複雑なページを複数の小さなフラグメントに分割すると、簡単に保守できます。 たとえば、ページが複数のパネルを含む折りたたみレイアウトを使用する場合や、複数のタブが含まれている場合は、各パネルまたはタブの内容をフラグメントに簡単に保持できます。 このようにして、アプリケーション・ロジックをモジュール化し、各パネルまたはタブを個別に保守できます。
これは、フローで実現するものと類似している場合がありますが、フローとフラグメントは根本的に異なります。 フローは、ビジネス機能別にページをグループ化し、フロー内またはフロー間のページ間のナビゲーションを許可します。 一方、簡単に編成してコードを管理できるように、ページを個別のセクションに分割し、ページ・テンプレート全体として使用することもできます。 フローとは異なり、同じページに何度も使用でき、フラグメントを使用する最も魅力的な理由である再利用性を実現します。
フラグメントは、ページの一部を独自のHTML、JSONおよびJavaScriptファイルにカプセル化するため、アプリケーション内のページ、フロー、その他のフラグメント間で共有できます。 たとえば、複数のページの異なるセクションが同じフォームを使用しているとします。そのフォームを含むフラグメントを作成してから、それらのフラグメントを他の複数のページで再利用できます。
再利用の利点の他に、フラグメントによってパフォーマンスが向上します。 通常、ページのレンダリング時にページで使用されるすべてのリソース(コンポーネント、モジュールなど)がロードされます。 ただし、すべてのコンポーネントと関連モデル(特にUIイベントによってトリガーされたコンポーネントや他のUIコンポーネントの背後に非表示にされたもの)をすぐにロードする必要がない場合があります。 たとえば、ユーザーが編集アイコンをクリックするまで、パネル編集バージョンのコンポーネントを表示する必要はありません。 フラグメントで編集パネルを定義した場合、実際にフラグメントを表示してページのレンダリングにかかる時間を改善するまで、レンダリングを遅延させることができます。
次に、フラグメントの概要とサンプルを説明するビデオを示します: Visual Builderのフラグメント。