jQuery и “Организованный Код”

Просто хочу добавить к тому, что было упомянуто ранее что это:

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

может быть оптимизирован к:

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

Это - все об объединении в цепочку, отличный способ упростить Ваш код.

До сих пор я делаю это как это:

// 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, функции являются первоклассными объектами и могут таким образом использоваться в качестве переменных.

Ну, для одного имея хороший IDE, который понимает, JavaScript может помочь чрезвычайно, даже если только определить соответствие разграничениям (фигурные скобки, parens, и т.д.).

, Если Ваш код начинает действительно получать тот комплекс, полагайте, что создание Вашего собственного статического объекта организует путаницу - Вы не должны так упорно работать для хранения всего анонимным.

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();

По-моему, метод, описанный BaileyP, - то, что я использую для начинаний с тогда, я обычно абстрагирую все в большее количество допускающих повторное использование блоков, особенно когда некоторая функциональность расширяется до точки, где легче абстрагировать его в плагин, тогда имеют его характерный для одного сайта.

, пока Вы сохраняете большие блоки кода в отдельном файле и кодированный приятно, можно тогда закончить с некоторым действительно чистым синтаксисом.

// 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() {});
    });
}

Засуньте часть из скоро функции в функции глобальной области видимости (или Ваш собственный объект "пространства имен"), особенно снова использованные функции, и он начинает смотреть меньше как то, что Вы отправили. Отчасти как то, с чем Вы связались.

Я описал свой подход в Вашем другом сообщении . Краткая форма:

• не смешивают JavaScript, и классы использования HTML
• (в основном начинают видеть, Ваше приложение как набор виджетов)
• только имеют единственный $ (документ) .ready (...), блок
• отправляет экземпляры jQuery в Ваши классы (вместо того, чтобы использовать плагины)

Кто-то написал сообщение на похожую тему.

Код jQuery не обязательно должен быть уродливым

Например, автор, Стив Велленс, предлагает не использовать анонимные функции, так как это затрудняет чтение кода. Вместо этого вставьте ссылку на функцию в методы jQuery, например:

$(document).ready(DocReady);

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

Еще один вывод из статьи - назначить объект jQuery конкретной переменной, что сделает код более чистым, менее зависимым от фактического объекта jQuery и более простым. чтобы сказать, что делает определенная строка кода:

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

    TextBoxes.each(function()
    {
        if (this.value == "")
            this.style.backgroundColor = "yellow";
        else
            this.style.backgroundColor = "White";
    });
}