Clever Geek Handbook

ライブフォームのプラグイン

この記事は、クライアント側のプログラマーの生活を簡素化するプラグインに特化しています。



フォームに入力するときに、入力されたデータを指定して、フォームを変更する必要があります（フィールドの非表示と表示）。 最も簡単な例：商品の配送を注文するときに、ユーザーは「集荷」を選択したため、配送先住所に関するフィールドを非表示にできますが、集荷用の地図を表示すると便利です。



そして次は何ですか


多くの場合、このロジックは実装されずに残されますが、ユーザーを気にする場合は、これを行う必要があります。



最初の標準的なアプローチは、各ステップのフォームがサーバー側で生成されるステップバイステップのウィザードを作成することです。 私の意見では、これはプロセスをステップに分解し、大量のコードを記述し、このフォームで作業する喜びがほとんどないため、多くの作業を必要とするため、これは残念なオプションです。



2番目のアプローチは、クライアント側でこのすべてのロジックを実装するJavaScriptの「ジャグリング」を記述することです。 「フィールドAにaを入力し、 Bを表示し、フィールドBにcを入力した場合、Dを表示します。Aに何かを入力した場合、Bを非表示にしてからD」などの「カスケード」ロジックを書くことは特に悲しいです。



両方のオプションを便利と呼ぶことはできません。 まず第一に、ロジックはそのような場合に適した宣言型ではなく命令型で実装されているためです。 しかし、方法があります！



解決策


一般に、このような別のフォームを実装する必要が生じたとき、最終的にjQuery用のプラグインを作成することが決定されました。





結果のプラグインをjQuery.grewform（ 成長するフォームなど）と呼びました。 暴言なし-最も単純な例 。 ロシア語で実装されたロジックを説明しましょう： 

 #first   "show",    #p2.  #second   "gogo",    #p3.


次に、プラグインを使用してこのロジックがどのように記述されるかを見てみましょう。 

 $('form').grewform({ // #first   "show",    #p2 '#first[value=show]':{ show:'#p2' }, // #second   "gogo",    #p3 '#second[value=gogo]':{ show:'#p3' } })




詳細


次はプラグインの詳細な説明です。 上記の例からすべてが多かれ少なかれ明らかな場合は、記事のこのセクションをスキップして、可能性の説明に進んでください。

プラグインの動作は、一連のルールによって定義されます。 各ルールは、用語と一連のアクションで構成されます。 初期化後、フォームが変更されるたびに、プラグインは各ルールの用語をチェックします。 チェックするとき、用語はフォームの現在の状態に一致するように決定されます。 各ルールは、次の3つの位置のいずれかに表示できます。

  1. 最後のチェックでは、用語は状態に対応していませんでしたが、現在は
  2. 最後のチェックでは、用語は状態に対応していましたが、現在は対応していません
  3. 用語とフォームの状態の対応は変更されていません


最初の場合、ルールはトリガーとしてマークされ、用語で説明されているDOM要素（実際、これらのエレメントを変更するとルールがトリガーされます）は、トリガーされたルールが 「ハング」していることを示すラベル（クラスが追加されます）を受け取ります。 その後、ルールに記述されているすべてのアクションが順番に開始されます。 2番目のケースはより興味深いものです。 同様に、ルールはもう機能していないとマークされ、要素からのメモは削除されます。 その後、ルールに記述されたアクションの否定がトリガーされます（何かを表示しますか？今すぐ非表示にしましょう！）、そしてDOMで要素が非表示または削除された場合、最初にチェックされます

ルールが「ハング」するかどうか（ケース1を参照）、そうであれば、これらのルールの「ロールバック」プロセスが開始されます（ケース2として機能します）。 3番目のケースでは、何も起こりません。

用語の適合性をチェックする際に、フォームの表示要素のみが考慮されることに注意してください。



特徴


アクション（用語）を実行する時かどうかを判断する式は、CSS / jQuery互換セレクターです。 フォームにセレクターに対応する要素が含まれている場合、このルールのアクションがトリガーされます。 場合によっては、ルールがダブル（トリプル、クアドラプル...）の条件下でのみ機能する必要があるため、 AND関数を使用できます（ 例 ）。 これが唯一の構文変更、または追加です。

最初の例では、 [value = show]セレクターを使用します。 特に知識のあるjQueryは、コードの実行中に値が変更された場合、そのようなセレクターは機能しないはずだと正しく言っています。 ただし、プラグインはすべての<input/>



value属性の現在の状態をそれぞれ維持し、すべてが正常に機能します。

アクションのタイプの説明に移りましょう。 構文の説明のリストは次のとおりです。 

 { show:'elements_selector', //  (slideDown; slideUp  ) hide:'elements_selector', //  (slideUp; slideDown  ) disable:'elements_selector' // disabled="disabled"    (  ) enable:'elements_selector' //   disabled ( disabled="disabled"  ) check:'elements_selector' // checked="checked"    (  ) uncheck:'elements_selector' //   checked ( checked="checked"  ) set_value:'elements_selector', // value  <input>,  <select>  selected="selected"   <option> add_options: // <option>  <select> { '<select> selector':{ 'value_1':'display_value_1', // <option value="1">display_value_1</option> 'value_2':'display_value_2', ... } or '<select> selector': function //   ( - {'value_1':'display_value_1',...}) }, custom: //   { match:function, //     unmatch:function, //    } }




上記のように、 肯定的なイベントのみが記述されています。 ルールがトリガーされたときに発生するはずのイベントのみ。 ロールバックアクションは自動的に計算されます。

ご覧のとおり、ほとんどすべてのアクションの構文は次のとおりです。

action_name： '要素セレクター'

セレクター構文も完全にCSS / jQueryに準拠しています。 指定されたアクションは、セレクターによって検出された要素に対して実行されます。 実際、すべてのアクションは上記のコードで説明されています。



最後に、最大かつ最も強力な例は、 心理相談の注文フォーム =）です



助けが必要


2週間前にこのプラグインの作成を開始しましたが、すでに本番環境で2つのフォームで使用しています。 このプラグインを試してみて、何が足りないのか教えていただければ幸いです。



参照：





© Code Completeから撮影した写真


More articles:


All Articles