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

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

Моя проблема в том, что чем богаче вы создаете приложение, тем быстрее ваша клиентская сторона выходит из-под контроля. Рассмотрим эту ситуацию...

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

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

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

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

                    //Okay - no problem from the server... let 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 и начать задаваться вопросом, сколько логики может добавить до того, как экран начнет таять.

Мой вопрос: как люди управляют этим или организуют, чтобы ограничить сложность своего кода?

Я перечислил, как я это делаю в другом сообщении...

ОТВЕТЫ

Ответ 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'