こんばんは、前の投稿を書いてからおそらく3週間以上が経ちました。それから私の方向性が少し変わり、MVCは良いパターンですが、今ではjsにとっては面倒です。私たちは、すべてがどのように機能するかを見ることができる、より透明で微妙なソリューションを選択するよう努めています。それがjQueryが好きな理由です。ブラウザのタイプを無視できる最小値を導入しますが、 js。そのため、jsにDocument-Viewパターンを実装しようとするとき、できるだけ微妙で目に見えないようにしたかったのですが、同じjsであるという同じ軽い感覚を得ることができたようです。

WinFormsと同様に、jsFormsではすべてがコンポーネント上に構築されます。それでは始めましょう。

成分

コンポーネントは2つの部分で構成されます。

ビジュアル
機能的

視覚部分

ビジュアルパーツは、HTMLマークアップを含み、プロパティとイベントを設定するテンプレートです。

テンプレートは、次の形式のjsファイルです。

jsForms.Templates.ComponentType='HTML';

ComponentType-コンポーネントのタイプ
[HTML]-引用符で囲まれたHTMLコード

重要 -HTMLコードでは文字「<」および「>」を使用してタグをフレーム化し、他の場所では「＆lt;」を使用しますおよび＆gt; それに応じて。

HTMLタグは非常に厳密である必要があります。つまり、すべての開いているタグを閉じて、順序に従う必要があります。

テンプレートには、ルートhtmlタグを1つだけ含める必要があります。

機能部

機能部分は、コンポーネントのプロパティとイベントを宣言するだけでなく、「クラス」を含むjsファイルでもあります。

機能部分の形式は次のとおりです。

jsForms.Components.ComponentType=<br/> 
      

        
        
        
      

     {<br/>[JavaScript]<br/>};<br/>

ComponentType-コンポーネントのタイプ
[JavaScript]-通常はクラシックJS

jsFormsを使用する

例を見てみましょう。

たとえば、ボタンのテンプレートファイルは次のようになります。

jsForms.Templates.Button=' < div class ="button" > '+ ' < div class ="button-background" > '+ ' < div class ="button-common button-w" /> '+ ' < div class ="button-common button-e" /> '+ ' </ div > '+ ' '+ ' </ div > '; * This source code was highlighted with Source Code Highlighter .

成分

テンプレート内の他のコンポーネントを使用するには、タグを使用します：コンポーネント

また、テンプレートに他のコンポーネントが含まれるコンポーネントは、コンテナと呼ばれます。

コンポーネントタグの形式は

< component [ name ='ComponenName' ][ id ='IdValue' ][ class ='CSSClass' ] > [Settings] </ component > * This source code was highlighted with Source Code Highlighter .

ComponentType-コンポーネントのタイプ
ComponenName-コンポーネント名、オプションのパラメーターについては以下で説明します
id-htmlタグのidプロパティを設定します
class-htmlタグに関するクラスプロパティを設定します
設定-後で説明するタグのセット

テキストと2つのボタンを含むダイアログボックスの例を調べてみましょう。

jsForms.Templates.InsertCSSDialog=' < div > '+ ' < div > Test text </ div > '+ ' < component type ="Button" /> '+ ' < component type ="Button" /> '+ ' </ component > '+ ' </ div > '; * This source code was highlighted with Source Code Highlighter .

しかし、質問はボタンの名前をどのように設定するのですか？

コンポーネントのプロパティを設定するには、プロパティタグを使用します。

物性

プロパティタグには、コンポーネントの指定されたすべてのプロパティが含まれ、列挙はキータグを使用して行われます

キータグの形式は

< key name ="PropertyName" [ value ="PropertyValue" ][ type ="object|string|int|float..." ][ disable ][ direct ][ const ] > [PropertyValue] </ key > * This source code was highlighted with Source Code Highlighter .

PropertyName-プロパティ名、必須パラメーター
PropertyValue-値はvalue属性またはキータグ内で指定する必要があります。属性は優先順位です
type-値のタイプ、オプションのパラメーター
disable-属性はプロパティが設定されないことを示します
direct-属性は、プロパティがプロパティの設定プロパティをバイパスして設定されていることを示しますが、現在は無視されます
const-この属性は、多言語の将来のサポートのために予約されています。

このようにして、ボタンに「テキスト」を設定できます。

jsForms.Templates.InsertCSSDialog=' < div > '+ ' < div > Test text </ div > '+ ' < component type ="Button" > '+ ' < properties > '+ ' < key name ="Text" value ="Ok" /> '+ ' </ properties > '+ ' </ component > '+ ' < component type ="Button" > '+ ' < properties > '+ ' < key name ="Text" value ="Cancel" /> '+ ' </ properties > '+ ' </ component > '+ ' </ div > '; * This source code was highlighted with Source Code Highlighter .

次に、ボタンにイベントを添付します。これには、eventsタグを使用します

イベント

イベントタグには、指定されたすべてのコンポーネントイベントが含まれ、列挙はキータグを使用して行われます

< key name ="EventName" value ="EventCallback" /> * This source code was highlighted with Source Code Highlighter .

EventName-イベント名、必須パラメーター
EventCallback-コンテナの「クラス」のコンポーネントからのメソッドの名前。

コンポーネントの機能部分に変更を加えるには、bOk_Click、bCancel_Clickの2つのメソッドを追加します。

jsForms.Components.InsertCSSDialog= { // // // bOk_Click: function () { alert( 'OK' ); }, bCancel_Click: function () { alert( 'Cancel' ); } // // // }; * This source code was highlighted with Source Code Highlighter .

テンプレートを変更します

jsForms.Templates.InsertCSSDialog=' < div > '+ ' < div > Test text </ div > '+ ' < component type ="Button" > '+ ' < properties > '+ ' < key name ="Text" value ="Ok" /> '+ ' </ properties > '+ ' < events >< key name ="onClick" value ="bOk_Click" /></ events > '+ ' </ component > '+ ' < component type ="Button" > '+ ' < properties > '+ ' < key name ="Text" value ="Cancel" /> '+ ' </ properties > '+ ' < events >< key name ="onClick" value ="bCancel_Click" /></ events > '+ ' </ component > '+ ' </ div > '; * This source code was highlighted with Source Code Highlighter .

テンプレートにはもう1つの重要なプロパティがあり、各HTMLタグとコンポーネントに名前を付けることができます。

「クラス」で利用可能になります。名前を設定するには、属性名を設定する必要があります。すべてのコンポーネント

この属性が設定されていない場合、コンパイル中に「_CX」という形式の名前が自動的に生成されます。Xは数字、

なぜこれが必要になるのかは後で明らかになります。コンポーネントコードで名前を使用する方法を以下に説明します。

このテンプレートを使用すると、1つのコンポーネントを別のコンポーネントに投資できます。たとえば、MultiPanelコンポーネントを作成しましょう。

テンプレート：

jsForms.Templates.MultiPanel=' < div > '+ ' < div class ="MPanelTop" name ="top" /> '+ ' < div class ="MPanelCenter" name ="content" /> '+ ' < div class ="MPanelBottom" name ="bottom" /> '+ ' </ div > '; * This source code was highlighted with Source Code Highlighter .

「クラス」：

jsForms.Components.MultiPanel={};

内容

次に、ダイアログボックスを変更します。キーをパネルの下部に、テキストを上部に配置し、入力を中央に追加します。

jsForms.Templates.InsertCSSDialog=' < div > '+ ' < component type ="MultiPanel" > '+ ' < content into ="top" > '+ ' < div > Please enter css class name </ div > '+ ' </ content > '+ ' < content > '+ ' < input name ="iStyleClassName" /> '+ ' </ content > '+ ' < content into ="bottom" > '+ ' < component type ="Button" > '+ ' < properties > '+ ' < key name ="Text" value ="Ok" /> '+ ' </ properties > '+ ' </ component > '+ ' < component type ="Button" > '+ ' < properties > '+ ' < key name ="Text" value ="Cancel" /> '+ ' </ properties > '+ ' </ component > '+ ' </ content > '+ ' </ div > '; * This source code was highlighted with Source Code Highlighter .

例からわかるように、contentタグを使用して、1つのコンポーネントを別のコンポーネント内に配置できます。

コンテンツタグの形式は

< content [ into ="ComponentName" ] > [HTML|Component] </ content > * This source code was highlighted with Source Code Highlighter .

into-コンテンツが追加されるコントロールを示します。デフォルトは「content」です
[HTML |コンポーネント]-任意のhtmlコード+コンポーネント。

編集

前の投稿からの画像、本質は同じままでしたが、解析メカニズム自体が変更されました。

コンポーネントの最初の要求で、エンジンはこのコンポーネントがコンパイルされているかどうかをチェックし、コンパイルされていない場合はコンパイルします。これを行うために、彼はテンプレートを解析し、それに基づいてjs関数を作成します。

関数を呼び出すと、DOMモデルが作成され、jQueryでラップされ、コンポーネントの「クラス」の基本的な機能と機能がこのオブジェクトにアタッチされます。基本は、コンポーネントコンポーネントによって定義される機能です。。

つまり、コンパイルする場合：

jsForms.Templates.InsertCSSDialog=' < div id ="test" > '+ ' < component type ="MultiPanel" > '+ ' < content into ="top" > '+ ' < div name ="SimpleText" > Please enter css class name </ div > '+ ' < div > Unnamed div </ div > '+ ' </ content > '+ ' < content > '+ ' < input name ="iStyleClassName" /> '+ ' </ content > '+ ' < content into ="bottom" > '+ ' < component type ="Button" > '+ ' < properties > '+ ' < key name ="Text" value ="Ok" /> '+ ' </ properties > '+ ' </ component > '+ ' < component type ="Button" name ="bCancel" > '+ ' < properties > '+ ' < key name ="Text" value ="Cancel" /> '+ ' </ properties > '+ ' </ component > '+ ' </ content > '+ ' </ div > '; * This source code was highlighted with Source Code Highlighter .

出力では、次を含むオブジェクトを取得します。

プロパティ
- _Type-コンポーネントの種類
- _Name-name属性で設定されたタグ名または自動的に生成されたタグ名。
- Pまたはプロパティ-特定のオブジェクトのプロパティを格納するために設計されたデフォルトの空のオブジェクト
- Eまたはイベント-特定のオブジェクトのイベントを格納するために設計されたデフォルトの空のオブジェクト
- Cまたはコンポーネント-jQueryでラップされたすべてのタグとコンポーネントを含むオブジェクト。この例ではname属性でマークされています
  
  C = {
  - シンプルテキスト
  - iStyleClassName
  - bキャンセル
  }
JQueryオブジェクトメソッド
- 追記
- appendTo
- 見せる
- など
コンポーネントメソッド
- Init-コンポーネントをDOMに追加した後、ユーザーによって呼び出されるコンポーネントの初期化
- _GetProperty（name）-プロパティを取得
- _SetProperty（名前、値）-プロパティの設定
- _SetEvent（name、obj、func）-イベントを設定します。オブジェクト（obj）とそれに含まれる関数（func）を指定する必要があります
- _GetEvent（name）-構造{obj、func}を取得します
- _ExecEvent（名前、引数）-イベントを実行します。引数は1つでなければなりませんが、必須ではありません。
コンポーネントメソッド
- bOk_Click（）-ユーザー関数
- bCancel_Click（）-ユーザー関数
- など

また、コンポーネント自体のDOMオブジェクトにはオブジェクトへの参照が含まれており、_OBJプロパティに格納されていることを知っている必要があります。

document.getElementById（ 'test'）._ OBJ-クラスInsertCSSDialogの特定のオブジェクトと等しくなります。

より単純なレコードの場合は、jsForms.GetObject（要素）を使用し、特定のタイプのコンポーネントを検索することをお勧めします

jsForms.GetObjectByType（要素、foundType）

機能部分の実装

次に、具体的に機能部分の記述に移ります。

jQueryで非常にうまく実装されている「チェーン」アプローチを使用することをお勧めします。このため、各メソッドの最後に、自身へのポインターを返します[これを返す; ]。

また、データに特別に割り当てられた場所、つまりthis.P. <PropertyName>を使用して、プロパティを保存します。

メソッドとプロパティ名に大文字を付けます-これにより、jQueryメソッドが重複するのを防ぎますが、ベースオブジェクトがjQueryとそのプラグインであることに注意してください。プラグインのメソッドの名前は大文字で始まることがあります。あなたは緊張する）

Initメソッドを「オーバーロード」する場合、ベースクラスへの呼び出し[return jsForms.Components.Component.Init.call（this）;]を最後に挿入し、ネストされたコンポーネントを初期化する必要があります。

this.Cプロパティには、タグやテンプレートの他のコンポーネントをラップして操作するjQueryがあることに注意してください。

ダイアログボックスに検証を追加しましょう。

jsForms.Components.InsertCSSDialog= { // bOk_Click: function () { var text = this .C.iStyleClassName.val(); if (text==undefined || $.trim(text)== '' ) { alert( 'Please enter css class name' ); return ; } alert( 'OK, class="' +text+ '"); }, bCancel_Click:function() { alert(' Cancel'); }, // }; * This source code was highlighted with Source Code Highlighter .

コンポーネントにプロパティ、イベント、またはコンテナを追加する場合は、宣言する必要があります。そのため、特別に構成されたオブジェクトをパラメーターとして受け取るjsForms.CreateCompileInfoByObject（objDeclaration）関数を呼び出すのが最も簡単です。

objDeclaration={ {Name:<ComponentType>, Properties:{ // Property list <PropertyName1>:{ Type:<PropertyType><,Values:{ object }>, Access:<PropertyAccess>,Description:<String>}, <PropertyName2>:{ Type:<PropertyType>,Access:<PropertyAccess>}, etc } Events:{ <EventName1>:{Description:<String>}, <EventName2>:{Description:<String>}, <EventName3>:{Description:<String>}, etc}, Contents: { <ContentName1>:{Description:<String>}, <ContentName2>:{Description:<String>}, <ContentName3>:{Description:<String>}, etc} } }; * This source code was highlighted with Source Code Highlighter .

説明-説明、オプション。
ContentName-コンテナの名前。テンプレートには、コンテナのような属性名を持つタグが必要です。
PropertyName-プロパティの名前。大文字と小文字は区別されます。
PropertyType-プロパティの入力データ型;オブジェクトが選択されている場合、入力値はeval（...）を介して実行され、プロパティに渡されます
PropertyAccess-アクセス、アクセスが 'Direct'に設定されている場合、プロパティセットをバイパスして、_SetPropertyメソッドを介してレコードが作成されます。そうでない場合は、Set <PropertyName>メソッドが呼び出され、値が渡されます。setterメソッドを定義する必要があります。

PropertyType in（ 'Boolean'、 'String'、 'Object'、 'Int'、 'Float'、 'Values'、<undefined>）<undefined>-デフォルトです

PropertyAccess in（ 'Direct'、 'Set'、 'Get'、 'GetSet'） 'GetSet'-デフォルトです

プロパティとイベントを宣言するキーの例を見てみましょう。

jsForms.Components.Button = { Init: function () { // // Init, // return this .SetEnabled( true ); }, eventClick : function (e) { if (e.data) { //e.data if (e.data.P.Enabled) { e.data._ExecEvent( 'onClick' ); } } }, SetEnabled: function (flag) { if ( this .P.Enabled != flag) { this .P.Enabled = flag== true ; this .attr( 'state' , flag ? 'enabled' : 'disabled' ); if (flag) { this .unbind( 'click' ).bind( 'click' , this , this .eventClick ); } else { this .unbind( 'click' ); } } return this ; }, GetEnabled: function () { return this .P.Enabled; }, GetText: function () { return this .P.text; }, SetText: function (newText) { if ( this .P.text != newText) { this .P.text = newText; this .C.text[0].innerHTML = newText; } return this ; } }; // ----------------------------------------------- // Compilation INFO // ----------------------------------------------- jsForms.CreateCompileInfoByObject( { Name: 'Button' , Properties: { Enabled: { Type: 'Boolean' , Access: 'GETSET' }, Text: {} }, Events: { onClick: {} } }); * This source code was highlighted with Source Code Highlighter .

ページにコンポーネントを挿入する

ページ上のコンポーネントを使用するプロセスに移りましょう。

コンポーネントを作成するには、jsForms.CreateComponent（compType）関数を呼び出す必要があります

var button = jsForms.CreateComponent( 'Button' ); // "" , DOM button.hide().appendTo(...); // DOM , Init() button.Init().show(); // , . var button = jsForms.CreateComponent( 'Button' ).hide().appendTo(...).Init().show(); * This source code was highlighted with Source Code Highlighter .

性能

パフォーマンスを測定するために、2000個の単純なオブジェクトが作成され、各テストが10回繰り返されました。

テスト環境：

WinXP Sp2、FireFox 3.0.4 + FireBug、CPU Intel Pentium Dual E2160 @ 1.80GHz、2Gb Mem

グラフからわかるように、結果は変動します。これはおそらくガベージコレクターが原因で、jsの速度が低下することがあります。

詳細な統計：

jQuery（テンプレート）

Rt：10 R：2000、T：1440 ms [最小：1315、最大：2333 ms] [最小：0.6575 avr：0.7198、最大：1.1665 ms] delta = 1018
手動のDOM構築

Rt：10 R：2000、T：340 ms [最小：330、最大：375 ms] [最小：0.1650 avr：0.1701、最大：0.1875 ms] delta = 45
jsForms

Rt：10 R：2000、T：442 ms [最小：434、最大：457 ms] [最小：0.2170 avr：0.2210、最大：0.2285 ms] delta = 23

ここでテストできます。

追伸

現時点では、次のコンポーネントが実装されています。

ボタン-太いキー。
ButtonDivは素晴らしいキーであり、非常に軽量です。
リストボックス
ツリービュー
タブコントロール
プログレスバー
小さなこと

このアプローチの作業の実例は、サイト、コンポーネントエディターです。

サイト全体とテクノロジー自体はGPL3で利用できます。公式サイトからダウンロードできます。

このエディターは開発中なので、提案と批判に満足します。

テスト済みのテクノロジー：FF2 +、IE7、Safari、Chrome

IE6をお持ちの方は、購読を停止してください。事前に感謝します。

Habrにも感謝します。多くのアイデアが彼のページから即座に取り入れられたからです。

ありがとう

jsForms

成分

視覚部分

機能部

jsFormsを使用する

成分

物性

イベント

内容

編集

機能部分の実装

ページにコンポーネントを挿入する

性能

追伸

More articles: