免責事項：記事は私の広告の意図なしに、私の余暇と優雅さに由来しています
私は常にフロントエンドフレームワークの使用を軽視しており、多くの場合、いくつかのuiコンポーネントを使用していますが、ag-gridフレームワークは使用が簡単すぎます。この記事では、アグリドの哲学的な考え方と私の使用経験を紹介し、ところで過去のイベントをいくつか記録します。
CompetenceX：私が開発した最初のウェブサイト
ボッシュシーメンスでの3年間のインターンシップ期間中に、会社での生活の中で最初のまともなH5 Webサイト、CompetenceX（コンピテンスマトリックス管理システム、以下、コンピテンスマトリックスまたはC9Xと呼びます）を開発しました。ウェブサイト自体は技術的な内容はあまりありません。アグリッドとモンゴッドに加えて単純な数学的モデルに基づいていますが、ウェブ開発の分野で私の啓蒙プロジェクトになり、就職活動に多くの燃料を提供してくれました。
能力マトリックスは、従業員の競争力と専門的スキルを評価するために使用されるプラットフォームです。他のすべての要求者と同様に、上司は当時このあいまいな要求を出していました。現時点では、成熟した開発者はもちろん、独自のテクノロジーを使用してユーザーのニーズを導き、さらには変更する必要がありますが、いずれの場合でも、最初に行うべきことは、ER図などの基本的なデータオブジェクトモデルを確立することです。
将来の要件の変化に対応するために、将来的に少し時間を節約できることを期待して、より一般的な対称関係モデルを設計しました。このため、「MongoDBアプリケーション設計パターン」も購入して調査しましたmongodbにおけるコレクションと関係の関係。。（私は数年のインターンシップ期間ではそのような長期間を考慮する必要がないことに気づきました。要件に従ってコードを押し、水を引き、商品を届けることが最も実用的です。）能力マトリックスのERダイアグラムは次のとおりです。
この図には、人とプロジェクトの2つのエンティティしかなく、残りの2つの仮想エンティティは、人とプロジェクトの親クラスです。最も重要な関係は2つのメインエンティティ間の作業です。作業関係には属性もあります。2つのエンティティ間には多対多の関係があるため、それを格納するには別のデータテーブルが必要です。mongodbコンパスのスクリーンショットは次のとおりです。ここで、人間とスキルは2つのエンティティセットであり、ユニットは仕事関係セットです。
しかし、今日私はここに能力マトリックスプロジェクトを紹介するためではなく、アグリッドへの道を開くためにここにいます。私の知る限り、前の会社はまだ私のC9Xを使用しています。4つのメジャーバージョンと数え切れないほどの小さなバージョンの反復の後、成熟した安定したC9Xは、その背後にある強力な駆動エンジンAg-Gridに完全に依存しています。
Ag-Grid：Excelに匹敵するWebフレームワーク
フロントエンドで完璧なコレクション関係モデルを表示する方法？最善の方法は、テーブルを描画することです。1か月以上のフレーム選択の後、最終的にaggridを使用して、2.Xバージョンの機能マトリックスでシステム全体を再構築することを選択しました。（当時、私はJavaScriptを使用してインターネット上でExcel関数を実装するフォームフレームワークを探していました。名前を付けたくない熱狂的な群衆の勧めで、私はホームページにアクセスし、恥ずかしくない「世界で最高のJavaScriptグリッド」と言いました。 aggridの公式ウェブサイトですが、後になって、業界で最も高い評判のフレームワークであることがわかりました）
aggridのバージョン番号は22.Xに達しています。その多くの機能と特徴の中で、最も強力で輝かしいのは、今年リリースされたばかりの統計グラフ機能です。統計グラフは今年aggridによって発売され、今年のaggridはテーブルとグラフを同時にマージできる最初のヘビー級フレームワークになりました。グラフの値はechartsやchart.jsなどのフレームワークに失われません。以前は、特定のビッグデータシステムを満たすために、テーブルフレームワークとチャートフレームワークを組み合わせることがしばしば必要でしたが、今ではaggridが2つのヘビー級アプリケーションモジュールだけを引き受けており、これはすばらしいと思います。
統一されたチャート言語
テーブルとさまざまな統計グラフはどちらもデータに統合されており、すべて2次元のリスト（リストのリストとも呼ばれます）です。テーブルは、棒グラフ、折れ線グラフ、レーダーチャート、および円グラフに損失なしに変換できます。。。したがって、表は特別な種類のグラフと見なすことができます。有名なフロントエンドフレームワークag-gridは、この理論に基づいて生まれました。
つまり、テーブルはチャートであり、チャートはテーブルであり、データは一貫していますが、形式が異なります。ただし、市場に出回っているアプリケーションフレームワークは、純粋な表または純粋なグラフのいずれかです。2つを組み合わせることができるaggridに出会うまでは。
仮想DOM
AgGridには、UIのパフォーマンスを向上させるために仮想DOMも組み込まれています。DOMは非常にゴミの技術であり、世界でよく知られていますが、互換性の理由から、DOMは最適化されていません。
たとえば、「table」、「tr」、および「td」タグを使用する場合、20列の1000レコードをブラウザーにロードすると、ページには多数のレンダリングされたDOM要素が表示されます。これにより、Webページの速度が大幅に低下します。これにより、ブラウザのメモリ不足が原因で、ユーザーエクスペリエンスが非常に低下するか、ブラウザがクラッシュします。
この問題を解決するために、aggridは画面に表示できるものだけを表示します。たとえば、グリッドに1,000レコードと20列をロードしても、ユーザーには50レコードと10列しか表示されない場合（残りはスクロールして表示されないため）、グリッドにはユーザーの50行と実際に10列を見ることができます。
つまり、DOM仮想化の実装の1つは、DOM要素の数が、ページ全体の要素の数ではなく、現在の画面に表示されている要素の数と等しいことです。
AgGridの影響
AgGridのAgは、「Agnostic」から取得されています。「Agnostic」は、文字通り「agnostic」に翻訳されます。意味はわかりませんが、公式の説明は次のとおりです。aggridゼロ依存フレームワークは「agnosticフレームワーク」（（ lll￢ω￢））。
さらに、AgGridは、webpackの2つのプラチナスポンサーの1つでもあります。オープンソースプロジェクトとして、webpackの存続は基本的に水滴に依存します。そうです、愛情のある寄付に依存しています。webpackの数百の企業スポンサーは、寄付の数に応じてブロンズメンバー、シルバーメンバー、ゴールドメンバー、プラチナメンバーに分けられます。AgGridは毎月2,500ドルをwebpackに寄付することを約束し、2番目にtrivagoに次ぐプラチナ会員。
AgGridはオープンソースの会社ではありませんが、JavaScriptフレームワークのいわゆる「オープンソースではない」は著作権の警告にすぎません。有料のエンタープライズバージョンも直接使用できます。webpackに助成するために彼がどこまで多くのお金を得たかはわかりません。
コンポーネント化とモジュール化
コンポーネントとモジュールは、広義では同じ概念ですが、狭義では異なる概念です。
通常、コンポーネントとモジュールは同じ概念を参照します。これは、「分離」と「分離」の設計パターンです。コンポーネントがフロントエンドの概念であり、モジュールがバックエンドの概念であるというだけで、コンポーネントは一般にフロントエンドUIコンポーネントを指し、モジュールは一般にバックエンド機能モジュールを指します。ただし、コンポーネントとモジュールをフロントエンドに持ち込むと、両者に大きな違いが生じます。違いがあるかどうかは、UIと機能が完全に分離されているかどうかによって異なります。もちろん、これは長い道のりです。
フロントエンドのデザイントレンドとして、AgGridは早くも2017年にWebComponentsを使用し始めましたが、aggrid全体がUI要素であるため、コンポーネント化の効果と応答は重要ではありませんが、AgGridは22.Xバージョン（2019）からモジュール化を導入しましたユーザーがオンデマンドで機能モジュールをロードできるように、フレームサイズを大幅に削減できるようにするコンセプト（エンタープライズフルバージョン2m +）
分割のアイデアは至る所にあり、企業全体が上の図に示すようにいくつかのモジュールに分割される可能性があるようです。ああ、はい、AgGridの「無料」コミュニティバージョンもあります。グラフ、サイドバー、行と列のフィルタ、検索エンジン、Excelのインポートとエクスポート、右クリックメニュー、インデックスなどが含まれているため、実際に使用することはお勧めしません。関数はすべてエンタープライズバージョンにあり、コミュニティバージョンには競争力のない基本的なテーブル関数がわずかしかありません（下図に示すように）。コミュニティバージョンでは他のオープンソーステーブルフレームワークを使用することもできます。
したがって、AgGridの正しい使用法は、公式WebサイトまたはGitHubからエンタープライズのすべてのモジュール（コミュニティーのすべてのモジュールを含む）をプルし、必要なものをアプリケーションにアセンブルすることです（チュートリアルについては、公式Webサイトを参照）。ただし、生成されたアプリケーションは社内での通信および使用のみを目的としており、転売できません。それ以外の場合、AgGridの著作権契約に違反します。
AgGridデザインパターン
このトピック自体は別のブログで説明する必要がありますが、スペースが限られている場合は、気軽にチャットしてください。AgGridを使用するときは、それをテーブルとして考えないでください。リレーショナルデータベースとして考えてください。リレーショナル代数の考え方を使って操作すると、テーブルと統計グラフの両方が同じロジックを持っていることがわかります。
デザインフォーカスオブジェクト
フォーカスオブジェクトは、私がよく使用するカスタムオブジェクトであり、通常はwindow.appにマウントされますが、aggridのヘビー級フレームワークの前で、<ag-grid> </ ag-grid>要素にマウントすることもできます。フォーカスの考え方は、古典的な操作の習慣に由来します。最初にオブジェクトを選択してから、オブジェクトを操作します。私のC9Xプロジェクトのフォーカスの属性には、現在のフォーカスオブジェクト（人、人の分類、スキル、スキルの分類、人とスキルの関係（ユニット）、フォーカスされた行、フォーカスされた列）が含まれます。マウスでセルを右クリックすると、フォーカスオブジェクトが自動的に更新され、右クリックメニューの現在のオブジェクトに対して対応する操作を実行できます。これが焦点の哲学です。
（つづく）
参照
https://jimmy.blog.csdn.net/article/details/89436682
https://cloud.tencent.com/developer/article/1372443
https://jimmy.blog.csdn.net/article/details/103249146
https://cloud.tencent.com/developer/article/1547110