AngularJS に基づくフロントエンド クラウド コンポーネントのベスト プラクティス

AngularJS は、Google によって設計および開発されたフロントエンド開発フレームワークで、開発者がフロントエンド開発をより便利に行うのに役立ちます。 AngularJS は、アプリケーションを構築する際の HTML の欠点を克服するように設計されており、非常に包括的で簡単に学習できるため、すぐに JavaScript の主流のフレームワークになりました。

1. Amazing の Angular

AnguarJS の特徴

便利な REST: RESTful は、サーバーとクライアントが通信するための標準的な方法になりつつあります。 JavaScript コードを 1 行使用するだけで、サーバーからデータをすばやく取得できます。 AugularJS は、MVVM (モデルビュー ビュー-モデル) 設計パターンに従って、これらをモデルとして JS オブジェクトに変換します。

MVVM 救世主: Model は ($scope オブジェクトを通じて) ViewModel と対話し、Model の変更をリッスンします。 View を通じて送信およびレンダリングでき、コードは HTML によって表示されます。ビューは $routeProvider オブジェクトを通じて制御できるため、ビューとコントローラーを深くリンクして整理し、それらをナビゲーション URL に変えることができます。 AngualrJS は、$scope オブジェクトの初期化と制御に使用できるステートレス コントローラーも提供します。

データ バインディングと依存関係の注入: MVVM デザイン パターン内のすべてのものは、何が起こっても UI と自動的に通信します。これは、ラッパー、ゲッター/セッター メソッド、またはクラス定義を削除するのに役立ちます。 AngularJS はこれらすべての処理に役立ち、基本的な JavaScript データ型と同じようにデータを処理できます。もちろん、カスタマイズにより複雑なデータを扱うこともできます。すべてが自動的に行われるため、コードを実行するために main() を呼び出す必要はありませんが、コードは依存関係によって駆動されます。

拡張可能な HTML: ほとんどの Web サイトは、非セマンティックな

タグを使用して構築されています。 CSS クラスで関連する DOM 階層を自分で定義する必要があります。 AngularJS を使用すると、HTML を XML のように操作でき、タグと属性の定義を完了する方法は無限にあります。 AngularJS は、独自のコンパイラーとディレクティブを通じて関連する設定を完了します。これは、コンポーネント実装の基礎でもあります。

jQuery に触れるときは、データを詰め込む前にデータを事前にバインドして取得する必要があることがわかります。詰め込みのプロセスに注意する必要があります。しかし、Angular では、イベント バインディングを含む変数を挿入することでデータの取得が自動的に完了します。データ バインディング、MVVM、および依存関係の挿入により、これまでは多くのことを気にする必要がなくなり、データ構造とビジネス層にのみ注意を払う必要がなくなり、面倒な DOM バインディングから解放されます。

2. コンポーネント化への道

コンポーネントは、データとメソッドの単純なカプセル化です。ここでは、スタイル クラス、コマンド タイプ、メソッドなどの UI 効果を持つコンポーネントを総称してコンポーネントと呼びます。大規模なソフトウェアではコンポーネント化がコンセンサスとなっており、これにより開発効率が向上する一方、保守コストが削減されます。

コンポーネント化とコンポーネントのプレゼンテーション

テンプレート化など、コンポーネント化で実行できることはたくさんあります。テンプレート化のタスクはフロントエンドに渡されます。 2 番目はパブリック スタイル ライブラリ、3 番目はパブリック関数ライブラリ、いくつかのビジネス コンポーネントであり、モジュール性は少し特殊です。

コンポーネントの一般的な表示形式には、統一スタイル ライブラリ、特定の HTML 構造を持つコード スニペット、JS によって制御されるいくつかの関数、および特定のデータ入出力コントロールが含まれます。

3. クラウド コンポーネントを明らかにする

クラウドとクラウド コンポーネントの概念

クラウドはネットワークとインターネットの比喩です。以前は、クラウドは通信ネットワークを表すためによく使用されていましたが、その後、インターネットとその基盤となるインフラストラクチャを抽象的に表すためにも使用されました。

クラウド サービスとは、必要なサービスをネットワーク経由でオンデマンドかつ簡単に拡張可能な方法で取得することを指します。このようなサービスには、IT、ソフトウェア、インターネット関連、またはその他のサービスが含まれます。それは、コンピューティング能力もインターネットを通じて商品として流通できることを意味します。クラウドとコンポーネントの組み合わせがクラウド コンポーネントを構成します。最終的には、統合された制御機能を通じて N 個のプロジェクトすべてを一緒に制御したいと考えています。

GeTui のコンポーネントの種類

GeTui のコンポーネントの種類には、スタイル コンポーネント、コマンド コンポーネント、サービス コンポーネント、パブリック フィルター、パブリック関数ライブラリなどが含まれます。

コンポーネントの分類から、専用の CSS は非常に単純なコンポーネントであることがわかります。次に、これにコントローラーを追加します。これは、前述した特定の JS と特定のロジックを備えたコンポーネントです。リンクを追加して、アニメーションを表示し、データ レイヤーを追加して特定の入出力機能を持たせます。このデータ層には、複数のタイプのデータが含まれる場合があり、ページ コントローラーとやり取りすることも、サーバーと直接通信してデータを取得したり、データを転送したりする非常に強力なコンポーネントであることもあります (もちろん、実際には前者が含まれる場合があります)。現在の環境には後者のほうが適していますが、後者のほうが統合インターフェイスに対する要件が高くなります)。

上の写真は、クラウド コンポーネントをプッシュするための技術ソリューションです。 3 つの主要なフロントエンド コンポーネントと、ジオフェンス コンポーネント (プロジェクト全体を Baidu Maps に接続させる必要があります) などの他のいくつかのライブラリに基づいて、杭州の景勝地の人々の流れなどの視覚化プロジェクトもあります。 G20 期間の視覚化プロジェクトではサードパーティのライブラリが使用されます。 GeTui は LESS を使用して CSS を記述し、これに基づいてクラウド コンポーネントを開発します。

クラウド コンポーネントの状況に応じて、そのベスト プラクティスの目的は、特定の一般的な対話型テーブル フォーム クラスを備えた管理システムから開始し、徐々に複雑な対話型システム アプリケーションを組み込み、応答性を一定にサポートすることであると推測できます。 GeTui はプッシュ サービスとして始まり、その後多くの製品ラインを開発しました。プッシュ サービスには、マネージド型の 2B および 2C プラットフォームが多数存在します。

上の図は Tuiyun コンポーネントで使用されるディレクトリ構造です。CSS には wd フォルダーがあり、主にいくつかのサードパーティ ライブラリが含まれています。さらに重要なことは次のことです。JS についても同様で、wd は基本ライブラリです。 5 番目が最も重要です。すべてのコンポーネントはこのフォルダーの下に配置されます。各コンポーネントには、テンプレート、ロジック、インタラクション、エフェクト、スタイルという独自の 3 つの主要なコンポーネントが含まれています。

Gulp ベースのパッケージ化

クラウド コンポーネント表示サイト

クラウド コンポーネントのユーザーは主に 3 つのカテゴリに分類されます。最初のカテゴリは、学習する必要があるフロントエンド ユーザー (パン フロントエンド担当者を含む) です。簡単な使用方法 コンポーネントを使用します (Angular の基本概念と使用法をいくつか知っている必要があります)。 2 番目のカテゴリは、UI デザイナー、プロジェクト、製品などです。彼らは、効果が適切かどうかを観察し、ライブラリに基づいてそのような新しいシステムを設計する必要があります。 3番目のカテゴリーは観光客とその他の人材です。

クラウド コンポーネントに関する新しい考え方

クラウド コンポーネントのメカニズムがうまく使用されていない場合、たとえば古いコンポーネントがバグで更新されると、多くの悪影響が及ぶ可能性があります。現時点ではそうしますか？

クラウドの始まりに戻りますが、リソースが分離されている場合、この影響は発生しないことを見つけるのは難しくありません (クラウド コンポーネントは利便性を実現するために逆の考え方を使用します)。そうすれば、クラウド コンポーネントのリソースを比較的密接にしてこれを減らすことができます。インパクト。これはバージョン管理です。さまざまなプロジェクトが対応するクラウドを参照して、先ほど述べた 2 つのバランスをとり、結果を最適化します。

したがって、合理的な制御がなければ、クラウド コンポーネントを真に活用することができません。

複数のバージョンの下で、私たちの開発モデルは、特定のプロジェクトのクラウド コンポーネントのアップグレードがプロジェクトによって決定されるというものです。クラウド コンポーネントがリリースされ、すべてのプロジェクトがクラウド コンポーネントをアップグレードすると、バックテストのコストが非常に高くなるため、さらに、以前に開始されたプロジェクトの現在のバージョンには、元のクラウド コンポーネントのバージョンで十分であるためです。

GeTuiのプロジェクトシステム図

実際の使用における問題点

クラウドコンポーネントのリリースには一定の周期性がありますが、実際のプロジェクトのニーズに迅速に対応する必要があるのが、この場合のクラウドコンポーネント拡張モジュールです。使用する必要があります (モデル) 開発: クラウド コンポーネントに基づいてこのプロジェクトのコンポーネント レベルのモジュールを開発し、プロジェクト ベースでクラウド コンポーネントを拡張またはカスタマイズします。

4. AngularJS についての経験とまとめ

まず、モジュール化: いつでも抽象化をモジュール化できるように準備してください。

二番目に、周囲や限界を超えた部分についてもっと考えてください。他の人の視点から考え、下流を促進し、上流に逆算して作業します。

第三に、達成不可能な効果はなく、耐え難いコストが発生するだけです。

4 番目に、多くの方法があるので、時間が許せばすべて試してみることができます。