Javascript: рефакторинг в рамках

Question

У меня ужасный кусок кода JQuery в одном из моих взглядов Rails, что прослушивает событие, которое выглядит примерно так:

<% user_request_file = params[:file] == document.id.to_s %> 
<% if user_request_file %> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#generate_file_btn_for_<%= document.id %>").attr('disabled', 'disabled').attr("href", "#").attr('title', 'Loading file...'); 
      var doc_modal_<%= document.id %> = setInterval(function() { 
       $.getJSON("<%= file_xhr_document_path(document) %>", function(file) { 
        if (file.file_generated) { 
         $("#loading_for_<%= document.id %>").fadeOut("slow"); 
         $('#document_file_modal_<%= document.id %>').modal('show'); 
         $("#file_url_download_link_<%= document.id %>").attr("href", file.file_url); 
         clearInterval(doc_modal_<%= document.id %>); 
        } else if (file.file_error != null) { 
         window.location.href = "<%= file_error_document_path(document) %>"; 
        } 
       }); 
      }, 2000); 
     }); 
    </script> 
<% end %> 

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

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

Answer 1

Вот один способ, которым Вы могли бы сделать его немного лучше

(function($) { 

    // store the information we care about once 
    var doc = { 
    file:  '<%= j params[:file] %>' 
    id:  '<%= j document.id %>', 
    path: { 
     xhr: '<%= j file_xhr_document_path(document) %>', 
     error: '<%= j file_error_document_path(document) %>' 
    } 
    }; 

    // stop immediately if file !== doc.id 
    if (doc.file !== doc.id) return; 

    function getJSON() { 
    var xhr = $.getJSON(doc.path.xhr); 
    xhr.done(onSuccess); 
    xhr.fail(onError); 
    } 

    function onSuccess(file) { 
    if (!file.file_generated) return onError(); 
    $("#loading_for_" + doc.id).fadeOut("slow"); 
    $("#document_file_modal_" + doc.id).modal("show"); 
    $("#file_url_download_link_" + doc.id).attr("href", file.file_url); 
    setTimeout(getJSON, 2000); 
    } 

    function onError() { 
    window.location.href = doc.path.error; 
    } 

    function init(event) { 
    $("#generate_file_btn_for_" + doc.id) 
     .prop("disabled", true) 
     .attr("title", "Loading file..."); 
    getJSON(); 
    } 

    if (doc.id) $(document.ready(init); 
})(jQuery); 

Объяснение

Первое, что вы заметите, насколько пологой код. При самом глубоком, этот код имеет уровни отступов. Существующий код у вас есть . Возможно, это личное предпочтение, но я считаю, что более лёгкий код намного легче читать.

Этот бит кода хранит все соответствующие узоры в небольшом объекте, чтобы мы могли повторно использовать его в остальной части скрипта. Это немного упрощает JavaScript, поскольку он удаляет тонны вызовов erb.

var doc = { 
    id: <%= j document.id %>, 
    path: { 
    xhr: <%= j file_xhr_document_path(document) %>, 
    error: <%= j file_error_document_path(document) %> 
    } 
}; 

Отсюда, другие улучшения было бы удалить $(...) звонков из функций, которые делают работу. Лучшим подходом было бы создание обертки функций вокруг бит getJSON и передачи элементов, на которые вы будете действовать. Всегда лучше передавать зависимости в ваши функции, которые работают, а не статически связывают их в телах функций.

Это только начало

Это ни в коем случае чистейшая код может быть нет. Я понятия не имею, какие другие скрипты/инструменты у вас есть, но, надеюсь, это дает вам представление о том, как начать некоторые улучшения.