0

多くの場合、いくつかの動的部分を含むフォームがあり、ロード時に初期化する必要があります。例: 日付ピッカー、強化された選択、セクションの切り替え、条件付き要素の非表示/表示など。

例：

<form>
    <input type="text" name="date">
    <select name="selection"></select>
</form>

日付要素でdatepickerを初期化し、選択要素でSelect2を初期化したい。

フォームの初期化をどこに置くか?

私の考え：

  • グローバル セレクターを使用して初期化します。

    $(function() {
    $('input[name=date]').datepicker();
    $('select[name=selection]').select2(); 
})`.

    しかし、私は Web 全体に対して 1 つの js ファイルを持っているため、要素が現在のページに存在しない場合でも、ページの読み込みごとに DOM 全体をクロールすることになります。

  • ある種の条件付きセレクター。たとえば、give<body>と id を指定して、グローバル js ファイルに次のように追加します。$(function() { $('input[name=date]', 'body#foo').datepicker(); })

  • 各フォームの init を関数 (またはクラス メソッド) にカプセル化し、HTML から関数を呼び出します。

    <script type="text/javascript">
    $(document).ready(initMyForm());
</script>

思うのですが、何か良い方法はないでしょうか？特に、異なる JavaScript の初期化を必要とする多くの異なるフォームを持つ大規模なプロジェクトの場合、何を提案しますか?

4

1 に答える 1

0

現在のプロジェクトで 1 つの JS ファイルを実行している場合、または「一般的な」フォーム設定関数が適切な中規模のプロジェクトでさえ、説明した関数を使用することが適切です。

以下の例を参照してください。関数は小さな jQuery プラグインとしてラップされているため、必要に応じて特定のセレクターでこれを呼び出して、DOM 全体の実行を回避できます。

;(function($){
    $.extend({
        initMyForm : function(){
            $(this).find('input[name=date]').datepicker();
            $(this).find('select[name=selection]').select2(); 
        }
    });
})(jQuery);

したがって、これを次のように使用できます。

$(document).ready(function(){
    $(body).find(form).initMyForm();
});

$("#my-form").initMyForm();

$(".page-content .form").initMyForm();
于 2013-02-17T22:28:07.683 に答える