JQuery и "Организованный код"

Ответ 1

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

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

можно оптимизировать для:

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

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

Ответ 2

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

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

Ответ 3

Ну, для одного, наличие хорошей среды 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();

Ответ 4

По-моему, метод, описанный 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() {});
    });
}

Ответ 5

Кто-то написал сообщение по подобной теме.

Код jQuery Не должен быть Ugly

Например, автор, Стив Велленс, предлагает не использовать анонимные функции, поскольку он делает код более трудным для чтения. Вместо этого нажмите ссылку функции в методы 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";
    });
}

Ответ 6

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

Ответ 7

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

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

Ответ 8

Используйте 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'