Question

我在我的一个Rails视图中收到了一段可怕的jQuery代码，用于侦听看起来像这样的事件：

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

<强>解释

你会注意到的第一件事是代码是多么平坦。在最深处，此代码具有 2 级别的缩进。您拥有的现有代码 4 。也许这是个人偏好，但我发现更平坦的代码更容易阅读。

这段代码将所有相关变量存储在一个小对象中，供我们在脚本的其余部分重用。这可以清除JavaScript，因为它可以消除大量的erb调用。

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

从这里开始，其他改进将是从有效功能中删除$(...)个调用。更好的方法是在getJSON位周围创建一个函数包装器，并传入您将要处理的元素。将依赖项传递给有效的函数总是更好，而不是在函数体内静态耦合它们。

这只是一个开始

这绝不是代码最干净的。我不知道你有哪些其他脚本/工具，但希望这可以让你了解如何开始做一些改进。

Javascript：重构到框架中

1 个答案: