💷 👨🏼‍🌾 🧒🏼 ExtJSクライアントアプリケーションアーキテクチャ。パート1 👌🏿 🖖🏻 🔝

どんな仕事でも一番難しいのは、それを始めることです。それでは、巨大なクライアントアプリケーションをどこから始めるのでしょうか？このパートでは、コードの編成方法、ファサードとは何か、ビルド方法、コンポーネントとは何か（そしてもちろん、それらを書き始める方法）の3つのトピックをどこから始めて触れるかを説明します。

この記事は、プロジェクトで既にこのライブラリを使用している開発者を対象としていることをすぐに警告してください。この記事は初心者向けではありません。多くの些細なコードが欠けているためです。

開始する

javascriptフォルダーにディレクトリ階層を作成することをお勧めします。このフォルダーがjsと呼ばれるとします。次に、推奨されるディレクトリ階層は次のとおりです。

ext
js
- 部品
- プラグイン
- リソース
- ...

extフォルダーにはフレームワーク自体が含まれ、jsにはフレームワーク外部のファイルが含まれます。 / jsでは、アプリケーションのファサードとなる唯一のファイルが保存されます。 / js / componentsには、コンポーネントのすべての子孫が配置されます。これについては後で詳しく説明します。/ js / pluginsには、プラグインがあります。他のコンポーネントのプラグインコレクションの一部であるコンポーネント。プラグインについても少し後で説明します。そして最後に、静的変数、さまざまなヘルパー関数、オブジェクトのオーバーライドなどを含むリソースファイルを保存できる/ js / resources などなど

次に、アプリケーション（たとえば、index.html）を含むページで、ヘッダー内のスクリプトを次のように整理します。

/ extファイル
/ js / resourcesのリソース
/ js / pluginsからのプラグイン
/ js / componentsのコンポーネントモジュール
from from js

なぜその順序で？これは依存関係の階層であるためです。フレームワークはスクリプトに依存せず、その上で最初のものです。リソースは、フレームワークのオブジェクトと機能にのみ依存でき、プラグインはリソースとフレームワークを使用し、コンポーネントモジュールはプラグイン、リソースとフレームワークを使用し、ファサードはその上のすべてを使用します。それがファサードの目的です。

したがって、コンポーネントの配置が正しくないために何度か起きた依存関係の問題を解決しました。

Javascript依存関係管理は完全に別のトピックですが、もし興味があれば、 Jingoに注意を払うことをお勧めします。私は最近このライブラリに出会いましたが、どうやらそれを使用するときは、既存のデバッグ済みのコードで多くの変更を行う必要があります。しかし、このライブラリは依存関係の問題を非常にエレガントに解決します。

ファサード

それから、正面のフレームを書く価値があります。彼はどんな人ですか？そしてこれは通常の関数であり、最終的にExt.onReadyにマウントされます（つまり、インデックスページのハウスモデルが構築された後、ファサードは「ライブ」を開始します）。ファサードの例を次に示します。

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

Copy Source | Copy HTML /** * filename: facade.js * description: Application Layout */ Ext. namespace ( "Layout" ); Layout. base = function (){ // Ext.QuickTips.init(); // , // Viewport // ... return { init: function (){ new Ext.Viewport({ /* , */ }); } }; }(); Ext.onReady(Layout. base .init, Layout. base );

コンポーネント

ビューポートのファサードで、パネルとナビゲーションを接続しました。次に、メニュー項目とビューポートのコンテンツ領域との基本的な相互作用を確立します。メニュー項目をクリックしてコンテンツを変更することが目標だとします。メニューに「レポート」要素と「設定」要素があり、これらのメニュー項目をクリックすると、それぞれレポートに対応するコンテンツと設定に対応するコンテンツがコンテンツ領域に表示されます。これを行うには、コンテンツを担当するパネルのアイテムコレクションにレポートコンポーネントまたは設定コンポーネントを配置します（状況は、コンテンツ領域に適用したレイアウトによって若干異なる場合があります）。

だから。この記事では、コンポーネントがExtのビジュアルコンポーネントの子孫であるという合意に準拠します。ほとんどの場合、少なくとも再定義された標準のビジュアルコンポーネントが必要です。さまざまなExtチュートリアルでは、これらのコンポーネントは事前構成済みコントロールと呼ばれ、OOPの継承の概念の実装を表します。

したがって、要するに、オーバーライドはGridPanelを基本クラスとして使用して実装されます。

Copy Source | Copy HTML

内線名前空間（ "Application.Reports" ）;
Application.Reports.BaseReport = Ext.extend（Ext.grid.GridPanel、{
コンストラクター： function （config）{
//コンストラクタ自体を使用する必要はほとんどないため、このメソッドは完全に
//設定に到達する前に設定を使用したくない場合は省略します
//ベースコンストラクターに。しかし、コンストラクター関数がまだあるという考えを持っていることは必要です。
//存在する場合、基本メソッドを呼び出すことを忘れないでください
Application.Reports.BaseReport.superclass.constructor.apply（ this 、引数）;
}
、initComponent： function （）{
//しかし、このメソッドは非常に重要です。コンポーネントの初期化は、コンストラクターの後に呼び出されます。
//したがって、オーバーライドされた構成は、ユーザーが指定した構成よりも高くなります
//コンストラクタ内。その中で、オブジェクトの構成を再定義します。
// 2番目の引数のすべてのプロパティを最初の引数に置き換えてコピーします。ユーザーがそこにいるものは何でも
//プロパティのコンストラクターで、これらのプロパティが2番目の引数に含まれるかどうかを定義しませんでした。
//オブジェクトのプロパティを置き換えます
Ext.apply（ this 、{
title： "私たちのタイトル"
、loadMask： true
/ *その他のプロパティ* /
、プラグイン：[
//現時点では、Ext.ux.grid.MetaGridが何であるかは気にしません。
// RESOURCES.SETTINGS.RECORDS_PER_PAGEは、リソースファイルの/ js / resourcesで定義されたシングルトンです。
// RECORDS_PER_PAGE =値50。
new Ext.ux.grid.MetaGrid（{ページング：{perPage：RESOURCES.SETTINGS.RECORDS_PER_PAGE}}）
]
}）;
//基本的な初期化メソッドを呼び出すことを忘れないでください
Application.Reports.BaseReport.superclass.initComponent.apply（ this 、arguments）;
}
}）;

これは私が終了する場所です。次の部分では：

コンポーネントのアーキテクチャについて少し
プラグイン
ヒント

ExtJSクライアントアプリケーションアーキテクチャ。 パート1

開始する

ファサード

コンポーネント

More articles:

ExtJSクライアントアプリケーションアーキテクチャ。パート1