51

私は最近、jQuery コードを整理する最善の方法を理解するのに苦労しています。私は以前に別の質問をしましたが、私は十分に具体的ではなかったと思います (この質問はこちらにあります)。

私の問題は、アプリケーションをリッチにすればするほど、クライアント側が制御不能になるのが早くなることです。この状況を考えてみてください...

//Let's start some jQuery
$(function() {        
    var container = $("#inputContainer");

    //Okay let's list text fields that can be updated
    for(var i=0; i < 5; i++) {

        //okay let's add an event for when a field changes
        $("<input/>").change(function() {

            //okay something changed, let's update the server
            $.ajax({
                success:function(data) {

                    //Okay - no problem from the server... let's update
                    //the bindings on our input fields
                    $.each(container.children(), function(j,w) {

                        //YIKES!! We're deep in here now!!
                        $(w).unbind().change(function() {

                            //Then insanity starts...

                        }); // end some function

                    }); //end some loop

                } // what was this again?

            }); //ending something... not sure anymore

        }).appendTo(container); //input added to the page... logic WAY split apart

    }; //the first loop - whew! almost out!

});  //The start of the code!!

現在、この状況は不可能からそう遠くありません。これが正しい方法だと言っているわけではありませんが、jQuery コマンドのいくつかのレベルまで下がって、画面が溶け始める前にロジックをどれだけ追加できるか疑問に思うことは珍しくありません。

私の質問は、人々はこれをどのように管理したり、コードの複雑さを制限するために組織したりしているのですか?

私は他の投稿でそれをどのように行っているかをリストしました...

4

8 に答える 8

49

これまでに述べたことに追加したいだけです：

$.each(container.children(), function(j,w) {
    $(w).unbind().change(function() { ... });
});

次のように最適化できます。

container.children().unbind().change(function() { ... });

コードを単純化する優れた方法である連鎖がすべてです。

于 2008-10-31T23:08:22.577 に答える
18

これまでのところ、私は次のようにしています：

// initial description of this code block
$(function() {        
    var container = $("#inputContainer");

    for(var i=0; i < 5; i++) {
        $("<input/>").changed(inputChanged).appendTo(container);
    }; 

    function inputChanged() {
        $.ajax({
            success: inputChanged_onSuccess
        });
     } 

     function inputChanged_onSuccess(data) {
        $.each(container.children(), function(j,w) {
          $(w).unbind().changed(function() {
             //replace the insanity with another refactored function
          });
        });
      }
});

JavaScript では、関数は第一級のオブジェクトであるため、変数として使用できます。

于 2008-10-30T21:37:48.533 に答える
8

たとえば、JavaScriptを理解する優れたIDEがあると、一致する境界（中括弧、中括弧など）を識別するだけでも、非常に役立ちます。

コードが本当に複雑になり始めた場合は、混乱を整理するために独自の静的オブジェクトを作成することを検討してください。すべてを匿名に保つためにそれほど苦労する必要はありません。

var aCustomObject = {
    container: $("#inputContainer"),
    initialize: function()
    {
        for(var i=0; i < 5; i++)
        {
            $("<input/>").changed( aCustomObject.changeHandler );
        }
    },
    changeHandler: function( event )
    {
        $.ajax( {success: aCustomObject.ajaxSuccessHandler} );
    },
    ajaxSuccessHandler: function( data )
    {
        $.each( aCustomObject.container.children(), aCustomObject.updateBindings )
    },
    updateBindings: function( j, w )
    {
        $(w).unbind().changed( function(){} );
    }
}
aCustomObject.initialize();
于 2008-10-30T21:32:10.043 に答える
4

私の意見では、BaileyP で説明されている方法は、私が最初に使用するものであり、通常、すべてをより再利用可能なチャンクに抽象化します。特に、一部の機能が拡張されてプラグインに抽象化し、それをプラグインに固有のものにする方が簡単な場合は特にそうです。 1 つのサイト。

コードの大きなブロックを別のファイルに保持し、適切にコーディングしている限り、非常にクリーンな構文に仕上げることができます。

// Page specific code
jQuery(function() {
    for(var i = 0; i < 5; i++) {
         $("<input/>").bindWithServer("#inputContainer");
    }
});

// Nicely abstracted code
jQuery.fn.bindWithServer = function(container) {
     this.change(function() {
             jQuery.ajax({
                 url: 'http://example.com/',
                 success: function() { jQuery(container).unbindChildren(); }
             });
     });
}
jQuery.fn.unbindChildren = function() {
    this.children().each(function() {
        jQuery(this).unbind().change(function() {});
    });
}
于 2008-10-30T22:59:24.780 に答える
4

誰かが同様のトピックに関する投稿を書きました。

jQueryコードは醜いものである必要はありません

たとえば、著者の Steve Wellens は、コードが読みにくくなるため、無名関数を使用しないことを提案しています。代わりに、次のように関数参照を jQuery メソッドにプッシュします。

$(document).ready(DocReady);

function DocReady()
{       
    AssignClickToToggleButtons();
    ColorCodeTextBoxes();
}

この記事のもう 1 つのポイントは、具体的な変数に jQuery オブジェクトを割り当てることです。これにより、コードがよりきれいになり、実際の jQuery オブジェクトへの依存が少なくなり、コードの特定の行が何を行っているかを簡単に知ることができます。

function ColorCodeTextBoxes()
{
    var TextBoxes = $(":text.DataEntry");

    TextBoxes.each(function()
    {
        if (this.value == "")
            this.style.backgroundColor = "yellow";
        else
            this.style.backgroundColor = "White";
    });
}
于 2010-02-02T15:14:18.520 に答える
2

一部のanon関数、特に再利用された関数をグローバルスコープ関数（または独自の「名前空間」オブジェクト）に貼り付けると、投稿したもののように見えなくなります。あなたがリンクしたもののようなものです。

于 2008-10-30T21:30:05.507 に答える
2

私はあなたの他の投稿で私のアプローチを説明しました。ショートフォーム：

  • JavaScript と HTML を混在させないでください
  • クラスを使用する (基本的に、アプリケーションをウィジェットのコレクションとして見始める)
  • $(document).ready(...) ブロックを 1 つだけ持つ
  • jQuery インスタンスをクラスに送信します (プラグインを使用する代わりに)
于 2008-11-12T20:48:01.230 に答える
2

http://coffeescript.com/を使用してください;)

$ ->
  コンテナー = $ '#inputContainer'
  [0...5] の i について
    $('<input/>').change ->
      $.ajax 成功: (データ) ->
        for w in container.children()
          $(w).unbind().change ->
            アラート「当たり前」
于 2010-10-28T02:58:55.353 に答える