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, может очень помочь, даже если просто определить соответствующие демаркации (фигурные скобки, скобки и т. Д.).

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

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

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

Код 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";
    });
}

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

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

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

Используйте http://coffeescript.com/;)

$ ->
  container = $ '#inputContainer'
  for i in [0...5]
    $('<input/>').change ->
      $.ajax success: (data) ->
        for w in container.children()
          $(w).unbind().change ->
            alert 'duh'