Sparrow は小さいですが、Dojo カスタムコントロール application_dojo の必須要素をすべて備えています。-jsチュートリアル-php.cn

現在では、 jQuery 、Ext、プロトタイプ、MooTools、Dojo など、多くの JavaScript フレームワーク や制御ライブラリが存在します。これらはすべて、「javascript」を検索すると Google にリストされます。フレームワーク」の1ページです。このうち MooTools 以外は知っていますが、プロジェクトで使用したのは Ext と Dojo だけです。しかし、私は Ext があまり好きではありませんでした。パフォーマンスの問題があり、新しいバージョンには料金もかかります。

さらに、Ext が公式に提供するサンプルはすべて JavaScript を使用してコントロールの作成と初期化を行うため、1 つの HTML で 1 つの JavaScript が使用されるため、管理が非常に混乱します。そして、公式の例はベストプラクティスであるため、このモデルはあまり受け入れられません。私の目には、Dojo は顕著な欠点と利点を備えた男です:

欠点:

1. ドキュメントが非常に貧弱です。

2. CodeBase は非常に大きい (利点、欠点?)。

3. バージョンの進化は速く、バージョンが進化するたびに多数の API が変更されますが、これは十分に成熟していません。

利点:

1. 優れたコントロール開発フレームワークです。 2. JavaScript のオブジェクト指向の側面を完全に体現しています。

EXT と Dojo を比較すると、EXT はコントロール ライブラリであり、Dojo はフレームワークだと思います。私が初めて Dojo に出会ったのはバージョン 0.3 で、大きく変わりました。しかし、私はそのコントロールについてすでに先入観を持っていたので、もうその使い方について話すことに興味はありません。カスタム コントロールとしての Dojo。 Dojo は非常に複雑ですが、単純に 3 つの層があると考えることができます:

1. 最下位レベルはコア API コア API によって提供されるメソッドは、DOM、文字列、CSS、イベントなどに関連する操作を簡素化します。コア API には、Java のようなパッケージ概念とインポート メカニズムも実装されており、コードの編成と依存関係の管理が容易になります。

2. コア API に基づいて、「制御ライフサイクル」の概念が作成されました これは Dojo のハイライトであり、サードパーティが標準化された方法でコントロールを開発できるようにします。 Dojo に基づいて開発されたコントロールは、強い凝集性とオブジェクト指向の特性を備えています。

3. 2. をベースに開発された各種制御 Dojo が提供するコントロールも比較的完成度が高いですが、歴史的な理由により、詳しくは研究されていません。

Dojo のコントロールは、総称して DIJIT と呼ばれます。Hello World コントロールの Dojo バージョンを作成するには、次のことを詳しく知る必要はありません。

◆コントロールは JS クラスです。

◆すべてのコントロールは、_Widget またはそのサブクラスを継承します。_Widget クラスは、コントロールのライフサイクル管理機能を提供します。

◆_Tempulated も同時に継承できます このクラスを継承することで、コントロールにテンプレートをバインドして、コントロールの表示を記述することができます。

_Widget 基本クラスの概要 1. ライフサイクル メソッド _Widget は、Dojo フレームワークがコントロールを初期化するときに、「ライフ サイクル メソッド」と呼ばれる一連のメソッドを提供します。カスタム コントロールは、特定のメソッドを書き換えて独自の初期化ロジックを追加できます:

コードをコピー コードは以下の通りです。 preamble(/*Object*/ params, /*DOMNode*/node) //通常は使用しないメソッドです。このメソッドはコンストラクターの入力パラメーター param として使用されます constructor(/*Object*/ params, /*DOMNode*/node) // このメソッドは Java クラス のコンストラクターと同等です// このクラスで初期化アクションを実行します postscript(/*Object*/ params, /*DOMNode*/node) // 実際のコントロール作成プロセスでは、次のメソッドが順番に呼び出されます (すべてオーバーライド) _Widget.create(/*Object*/params, /*DOMNode*/node) _Widget.postMixInProperties( ) _Widget.buildRendering( ) _Widget.postCreate( ) //私が使用する最も一般的なメソッドは postCreate メソッドです。このメソッドでは、コントロールが初期化され、インターフェイスが表示されています。 //ビジネス関連の処理は通常、このメソッドで開始されます。

2. このクラスのいくつかの重要な属性 (これを通じてコントロールにアクセスできます)

◆id: ユーザーが指定しない場合、Dojo はコントロールに割り当てます。ランダムに作成します。 ◆domNode: HTML 内のこのコントロールに対応する DOM ノード。 最も基本的なカスタム コントロールの例: js ファイル: ./hello/world.js (次のファイル名は相対パスに関連しています。ここで、./ は「Dojo、dijit、Dojox」テーブルと同じレベルを表します)内容）。

コードをコピー コードは次のとおりです: //出力するクラス名を宣言します Dojo.provide("hello.world"); //依存するクラス名を宣言します Dojo.require("dijit._Widget") ; Dojo.require("dijit._Tempulated"); //Dojo.declare はコントロール クラス、最初のパラメーター: クラス名、2 番目のパラメーター: 親クラスの配列、3 番目のパラメーター: クラス プロトタイプを定義します。 🎜>Dojo.declare("hello.world",[dijit._Widget,dijit._Tempulated], { postCreate:function(){ this.domNode.innerHTML="hello world" ; } } );

このコントロールの動作は非常に単純で、HTML ページ内の対応する DOM ノードのコンテンツを hello world に設定します。 。

コードをコピー コードは次のとおりです。 head> Hello World Dojo.require("hello.world");カスタム コントロールの導入 🎜>

modulePaths の具体的な機能と使用法については、Google で調べてください。次に、コントロールをパラメータ化します。ラベルを記述するときに名前をパラメータとして渡すと、コントロールに HELLO XXX が表示されます。まず、HTML ファイルを次のように変更します。 > コードをコピーします

コードは次のとおりです:

Hello World ; Dojo.require("Dojo.parser"); Dojo.require("hello.world"); >皆さんに注意してください。はい、ラベルに「yourName」属性を追加しました。この属性をコントロールで使用するにはどうすればよいですか?この属性の値をコンストラクター メソッドで受け取り、その値をコントロール クラス自体の変数に割り当てて、postCreate で使用できます。JavaScript コードは次のとおりです: コードをコピーします

コードは次のとおりです。

Dojo.provide("hello.world") Dojo.require("dijit) ._Widget"); Dojo.require ("dijit._Temprated"); Dojo.declare("hello.world",[dijit._Widget,dijit._Temprated], { yourName:'world ', constructor:function(params, node) { this.yourName=params.yourName; }, postCreate:function() { this. domNode.innerHTML="hellow " this.yourName; } } ); 次に、コントロールの複雑さをさらに高め、入力ボックスを追加します。この入力ボックスにテキストを入力すると、動的に hello が更新されます。 例:

コードをコピー

コードは次のとおりです:

Dojo.connect(inputText," onkey",this,"updateHello");

今回は、postCreate 中に、最初にコントロールを動的に追加します。イベントを入力ボックスに動的にバインドします:

コードをコピー コードは次のとおりです: Dojo.provide("hello.world"); Dojo.require("dijit._Widget"); Dojo.require("dijit._Tempulated"); destroy("hello.world",[dijit._Widget,dijit._Tempulated], { yourName:'world', typeIn:null, echoDiv:null, constructor:function(params ,node) { this.yourName=params.yourName; }, postCreate:function(){ this.typeIn=document.createElement("input"); typeIn.type="text"; this.domNode.appendChild(this.typeIn); this.domNode.appendChild(this.echoDiv) ; こんにちは } , updateHello:function() { this.echoDiv.innerHTML="hello " this.typeIn.value; } } );

HTML ファイル内のコントロールへの参照を変更する必要はありません (厳密に言えば、属性 yourName="jinxfei" を削除する必要があります)。この少し複雑なコントロールから、Dojo の利点、つまり真のオブジェクト指向であることがすでにわかります。コントロール管理の範囲内の DOM 要素をクラスに配置し、属性として使用することができます (this.xxx で直接参照)。これにより、document.getElementByID() が回避され、コントロールが統一されます。イベントに応答するメソッドもクラス メソッドであるため、ページ上で管理が難しい多数の個別の関数を宣言することを回避できます。