jQueryプラグインはjdDialogです。 「トランジットコール」の原則

問題の声明

「自作」エンジンで既存の管理ページを完成させる過程で、大まかな標準のモーダルダイアログボックスをサイト設計に適合するウィンドウに置き換えることが必要になりました。 誰も管理部分の書き換えを許可しないため、これは必要ありません。 主な条件は、既存のコードへの迅速な統合です。



そのため、美容手術を行うことにしました。



そのため、次の要件が策定されています。

• jQuery 1.9に実装し、
• コードをすばやく変更するための標準ウィンドウのように呼び出し、
• 2〜3レベルをネストするダイアログボックス、
• 確認およびアラートタイプのダイアログボックスを置き換えます。

私がGoogleで検索することになった最初のこと。 既存の開発は私に合わなかった、なぜなら 呼び出し構文を最大限に維持したかった...

if(confirm('') ) {...}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、ウィンドウ内の特定の選択（ダイアログUIなど）の後に何が起こるかを説明する追加関数の形式で、非常に膨大なコードフラグメントを追加することを提案しました。



問題を分析する過程で、主な問題を特定しました。

• ダイヤルピアは関数からダイアログボックスを生成します。
• コントロールを選択した後、コールポイントの次の行に戻る必要があります。
• 同時に、ダイアログボックスのhtmlコードを生成する関数は既に実行を完了しています。

主な質問は、すでにスリップしたコードの場所に戻る方法ですか？



タスクは次のようになりました。

• 関数の実行を停止します。
• ダイアログボックスを作成します。
• ユーザーの選択を待ちます（これがいつ起こるかはわかりません）。
• ユーザー呼び出しを処理します。
• ダイヤルピアからの実行を継続します。

少なくとも私にとっては、jQueryでこれを実装することは非常に困難な作業のように思えます。

決定原則

解決策として、コールバック関数またはタイマーをテストして、選択の瞬間をインターセプトしました。



タスクの中間条件をわずかに変更し、次の原則を実装することで、このタスクで最高の結果を得ました。

• ダイアログボックスが生成されると、実行が中断されます。
• ダイアログボックスで選択した後、関数を再度開始します。
• そして、現在の「セッション」で選択がすでに行われている場合、ダイアログボックスのコールポイントで、
• 条件を「転送中」に渡し、選択をスクリプトに返します。

したがって、各ダイアログボックスの形成は、「トランジットセッション」内の1つのリンク、1つの反復です。 ハンドラーは2回呼び出されます。最初にウィンドウ自体が生成され、2回目は次の条件まで移動中に渡されます。



ただし、同じ呼び出し関数内に複数のダイアログボックスがある場合、つまり それらにはネストがあり、「トランジットチェーン」全体が形成されています。 各反復で-2回の関数呼び出し。 また、シーケンス内の新しいダイアログボックスごとに、ハンドラー関数の呼び出し回数が2倍になります。 数十のウィンドウを投資する必要があるとは思わないので、クライアントのブラウザリソースのオーバーヘッドは最小限であると考えています。



再帰に似ていますが、次の点で異なります。

• 1回の反復で、関数は2回実行されます。
• 反復ごとに、関数の「コピー」は実行されませんが、関数の条件が完全に満たされるまで、「雪だるま」が回転しているかのように、段階的なプッシュスルーが実行されます。

DOM要素に関連する選択結果を保存すると便利です。DOM要素は、.data（）関数を使用して、データ属性、非標準属性、または名前付きデータの形式でダイアログ呼び出しを開始しました。



この原則に「transit-dialogue」または「transit」コールの作業名が割り当てられます。



私の例では、jQueryプラグインとして実装されています。

呼び出しの例とプラグインコードはここに投稿されます 。



開発中に、次の問題が発生しました。



問題番号1）



なぜなら ダイアログはネストできるため、各ウィンドウの状態を保存する必要があります。 これを行うには、ウィンドウ識別子を入力します。



ダイアログボックスの呼び出しでこの問題を解決するために、パラメーターとしてウィンドウIDを入力しました。 同じ呼び出し関数内で一意である必要があります。 これは開発者にとっては不便ですが、たとえば入力パラメーターのハッシュを使用してIDを自動的に生成するのは危険です。 理論的には、トランジットチェーンはまったく同じ呼び出しを持つことができます（同じテキストを含む）。 さらに、ウィンドウは動的に作成されます-ウィンドウを生成するときにIDを作成するための信頼できるサインがまだ見つかりません。



応答はダイアログ初期化ボタンごとに保存されるため、一種の「トランジットネームスペース」を取得できるため、各関数で繰り返しウィンドウIDを使用できます。 1、2などを使用します。



問題番号2）



コントロール要素の実際のクリックとトランジット要素のクリックを区別する必要があります。 これは、トランジットコールのチェーン全体を再び開始するために必要です。



解決策：



この目的のためにフラグが入力されています（jdReclickがあります）。 パラメータは、各リコールの前にボタンに割り当てられ、リコールの処理後すぐに削除されます。 次の場合、このラベルに注目して、「通過セッション」のすべてのデータを削除します。

1. 関数の最後のウィンドウが処理された、
2. いずれかのウィンドウでキャンセルが選択された

問題番号3）



呼び出し関数の最後のこのウィンドウを区別する方法。 ウィンドウが最後の場合、「トランジットセッション」のすべてのデータを削除する権利があるため、ボタンをもう一度押すとアルゴリズムが再開します。



障害：

• 呼び出しスクリプトでは、起動ポイントを超えてダイアログ呼び出しがさらにあるかどうかを確認する方法はありません。
• 分岐が使用される場合、異なる条件下で異なる数のウィンドウが存在する場合があります。

ソリューションオプション：

• スクリプトの最初にダイアログボックスを登録し、このレジストリを処理スクリプトに転送します。
• 各呼び出しで、ウィンドウが最終かどうかにかかわらずラベルを渡します。
• 別の呼び出しで最後のウィンドウを処理した後、「トランジットセッション」のクリーニングを開始します。 いずれの場合も、覚えておく必要がある追加のパラメーターがあり、混乱しないようにしてください。これも不便です。 キャンセルフラグとして0を予約して、ウィンドウのラベルとIDを組み合わせました。 トランジットチェーンで別のウィンドウが起動されるかどうかが事前にわからない場合は、 これは、ユーザーの選択に依存します。これ以上ウィンドウがない状態では、「トランジットセッション」の強制クリーニングを単純に規定します。

私の例の実装について詳しく説明します

要素のイベントは、「トランジットダイアログ」チェーンのイニシエーター機能を開始します。

 $('#test').click(function() { ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ダイアログボックスの実際の起動は次のようになります。

 $(this).jdDialogs('confirm',1,['?',''],fncname)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

データを要素にバインドするには、thisセレクターをプラグインに渡す必要があります。

渡す属性では：



1-ウィンドウタイプ（プラグインメソッドの名前）、

2-ウィンドウID

3-ウィンドウのテキストオプション

4-コールバック関数



結果処理は、いくつかの方法で実装できます。

 if(! $(this).jdDialogs('confirm',1,['?','']) ) return; if( $(this).jdDialogs('confirm',1,['?','']) ) { ... } switch( $(this).jdDialogs('confirm',1,['?','']) ) { case 1: ...; default: return; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Alertを呼び出した後に実行中のコードがある場合、returnを使用する必要があります。そうでない場合、returnは省略できます。

 $(this).jdDialogs('alert',0,['!','Project'])
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 if(! $(this).jdDialogs('alert',0,['!',project]) ) return; alert(' ');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグインは、レコードを削減するために、確認、警告、短いエイリアスcnfなどの標準的な方法を提供します。 独自の呼び出しを追加できます。



すべての呼び出しは、次の汎用jdDialogメソッドを実行します。

• クライアントクリックまたは繰り返しの「トランジット」コールが認識されます
• 「トランジット」コールの場合、保存された選択値が返されます
• ウィンドウが初めて起動する場合-jdGetWinウィンドウ自体の生成が開始されます
• 指定されていない場合、コントロールIDが生成されます-jdCheckIdメソッド

このメソッドでは、新しいケース条件を変更/追加して独自のボタンセットを形成し、他のテンプレートとは別のテンプレートを返すことができます。



ボタンをクリックすると、添付されたイベントが処理されます。 警告のために、閉じるボタンの2つのオプションが提供されます-キャンセル付きのjdClose0と確認付きのjdClose1。 設定するものは、スイッチケースのjdGetWinで構成されます。



イベントはjdSetAnswerメソッドに転送されます。 このメソッドは、現在のウィンドウのIDと、ダイアログボックスを開始したコントロールのIDを認識します。 ボタンのIDがわかっているので、ウィンドウのIDをキーにした選択結果を「トランジットセッション」に保存できます。

 $(id).data(fname,value);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、fadeIn 10などのアニメーション効果を持つ.detach（）を使用してウィンドウを破棄します

 $('.jdModalBg').detach().fadeIn(10,function() {
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コールバック関数では、チェックします：キャンセルされた場合、「トランジットセッション」をリセットします。 このメソッドでは、4番目のパラメーターが呼び出されたときに関数名が渡された場合、関数が呼び出されます。

 if(!!fncdo) window[fncdo]();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、トランジットコールが開始されます。 コントロール要素のIDを渡します-それを再度クリックするイニシエーター。 つまり 制御要素のエミュレートされたクリック-ダイアログの開始者。

 methods.jdReclick(id);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私の例では、呼び出しウィンドウと処理ウィンドウを使用して任意の構造を追加するのは非常に簡単です。

3ボタンウィンドウの実装例

1.データの呼び出しで、さらに2つのパラメーターを追加します。「OK」の代わりに2つのボタンにラベルを付けます。

 $(this).jdDialogs('confirm2bttn',0,['  ','  3',' ',' '])
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テキスト付きの配列を使用すると、パラメータの数を柔軟に制御できます。ここでは、配列にさらに2つのパラメータを追加するだけです。



2.通話を接続します。

  confirm2bttn : function(fid,data,fname) { return methods.jdDialog('Confirm2bttn',fid,data,$(this),fname); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.呼処理を接続します。 テンプレート自体は古いままで、ボタンのみを変更します。

 case 'Confirm2bttn': var bttntext1 = data[2]; var bttntext2 = data[3]; jdBttns = '<button class="jdOk jdOk1">'+bttntext1+'</button>'+ '<button class="jdOk jdOk2">'+bttntext2+'</button>'+ '<button class="jdCancel"></button>'; clClass = 'jdClose0'; break;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4. Ok2ボタンにイベントを追加して、ボタンの押下を区別します。.jdOk2をクリックすると、トランジットコールは値2を返します。

  .on('click','.jdOk2', function() { methods.jdSetAnswer(2,$(this)); })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

5.イニシエータースクリプトに戻り、さまざまなボタンの条件を規定します。

 switch($(this).jdDialogs('confirm2bttn',0,['  ','  3',' ',' '])) { case 0: return; case 1: alert(' '); break; case 2: alert(' '); break; default:
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

6.さて、新しいウィンドウの要素に新しいスタイルを割り当てることができます。たとえば、黄色のテキストで緑色にすることができます。 このようなもの：

 .jdDialogConfirm2bttn { min-width:380px; max-width:450px; } .jdDialogConfirm2bttn .jdText { min-height:60px; } .jdDialogConfirm2bttn .jdHeader{ background-color: hsl(115,63%,15%); color:#F0C800; } .jdDialogConfirm2bttn .jdHeader .jdClose{ background-color: hsl(114,58%,22%); color:#F5DA50; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「トランジットコール」の原則を使用すると、クライアントからのアクションの待機に関連する問題を解決する方法が提供されると思います。 この場合、提案された拡張機能でjQueryライブラリーを使用するだけで十分です。 提示された完全に機能するプラグインは、jQueryライブラリバージョン1.9で使用するために開発されたもので、執筆時点で最新バージョン3.2.1でも機能します。