コンポーネントベースのフロントエンド開発プロセスの詳細な説明

背景 フロントエンドを担当する学生は、ページが多すぎると煩雑になるため、開発プロセスを統一する必要があることを知っています。開発プロセスの品質は、ページ開発の効率に直接影響し、間接的にゲームの期間に影響します。

開発プロセスの目標 ページを迅速に完成できます。
コンポーネント化により、コードの再利用が保証され、作業の重複を回避できます。
ページがオンラインになった後も効率的に実行できることを確認します。

開発プロセスの範囲 ファイル保存標準。
コードの組織構造とコーディング標準。
リリース戦略。
プロセス全体をサポートするために必要な開発ツール。
各チームには独自の開発プロセス仕様があります。実際のところ、最良のプロセス仕様というものは存在せず、最も適したものだけが存在します。以下に、複数のチームの開発プロセスを基に、概要をまとめた一般的な開発プロセス仕様書を紹介します。

フォルダーの指定 プロジェクトフォルダーが p/ であると仮定します。このフォルダには以下が含まれます:
p/assets/ 開発ツールを格納します
p/dev/ は開発中のプロジェクトファイルを保存します
p/dpl/はプロジェクトの共通コンポーネントライブラリを保存します
p/release/ にはリリースされたプロジェクトファイルが保存されます (ここにあるファイルはすべて圧縮されています)
p/dev/ の構造は次のとおりです。
p/dev/website1/public/ サイト全体で共有されるプロジェクト（サイト全体で共有されるファイルを保存）
p/dev/website1/project1/ プロジェクト 1
p/dev/website1/project2/ プロジェクト 2
....
各プロジェクト内の構造は次のとおりです。
p/dev/ウェブサイト1/プロジェクト1/ページ1.html
p/dev/website1/project1/assets/page1.js
/dev/website1/project1/assets/page1.css
p/dev/ウェブサイト1/プロジェクト1/アセット/画像/
p/dev/ウェブサイト1/プロジェクト1/include/ページ1.inc
p/dpl/ 内の構造は次のとおりです。
p/dpl/system/ システム js モジュール
p/dpl/controls/ UI モジュール
p/dpl/widgets/ ビジネスコンポーネント各フォルダーの構造は次のとおりです。
p/dpl/システム/カテゴリ1/コンポーネント1.html
p/dpl/システム/カテゴリ1/アセット/コンポーネント1.js
p/dpl/システム/カテゴリ1/アセット/コンポーネント1.css
p/dpl/システム/カテゴリ1/アセット/画像/
p/release/ 内の構造は次のとおりです。
オンラインファイルの仕様によっては、p/dev/ と同じになることもあります。

コンポーネントベースの開発実装
1. サイト全体で使用されるJSとCSS
サイト全体で使用される js と css は、ツールを使用して p/dpl/ からいくつかのコンポーネントを選択して合成されます。 p/dev/website1/public/assets/common.js (または.css) に配置します。
2. サイト全体で共有されていないJSとCSS
次のコードを使用して、コンポーネントを Web ページに読み込むことができます。
?using("System.Category1.Component1");
var comp1 = 新しい Component1();
このうち、System.Category1.Component1 は p/dpl/system/category1/assets/component1.js (または .css) にマッピングされます。
開発状態では、を使用するとコンポーネントが同期的に読み込まれます。ページが公開されると、は、動的な読み込みを必要とせずに、対応するコンポーネントのソースコードに置き換えられます。
3. jsとcssの非同期読み込み
プロセス自体は、コンポーネントを非同期にロードする機能を提供しません。プロジェクトでサードパーティのモジュールローダーを使用して、非同期ロードを実装できます。
4. HTML の再利用 HTML ファイルに include("include/topbar.inc") と記述して、対応する HTML フラグメントをページに埋め込みます。

ページの公開 ページの公開では主に次のことが行われます。
インラインの include や using などにより、ページリクエストの数を減らします。
js と css を圧縮します。
実際のプロジェクトのニーズに合わせてファイルの場所を再変更します（たとえば、js と css を抽出し、html をフィルター処理する必要がある場合）

<<: 変換を使用して純粋な CSS ポップアップメニューを実装するためのサンプルコード

>>: DockerでKafkaをデプロイする方法