Javascript：重构为框架

在我的一个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 %>

$（文档）.ready（函数（）{
$（“#为#生成#文件#btn#u”）.attr（'disabled'，'disabled'）.attr（'href'，'#'）.attr（'title'，'Loading file…'）；
var doc_modal_u=setInterval（函数（）{
$.getJSON（“），函数（文件）{
if（生成的file.file_）{
$（“#加载#为#”）.fadeOut（“慢”）；
$（'#document_file_modal'.modal（'show'）；
$（“#文件(url)下载(链接)”）attr（“href”，file.file(url)）；
clearInterval（文件/模式）；
}else if（file.file_error！=null）{
window.location.href=“”；
}
});
}, 2000);
});

我想用更模块化和更友好的重构来取代它。上面的代码每两秒钟侦听一次发送到其服务器的请求，如果已发送请求，视图将使用该请求的信息进行响应

---

已经被推荐给我作为一个合适的替代框架，但我真的不知道如何开始重构它。任何关于其他框架的建议都会很好。

这里有一种方法可以让它变得更好

（函数（$）{
//将我们关心的信息存储一次
var文件={
文件：“”
id:“”，
路径：{
xhr:“”，
错误：“”
}
};
//如果文件！==doc.id，则立即停止
如果（doc.file！==doc.id）返回；
函数getJSON（）{
var xhr=$.getJSON（doc.path.xhr）；
xhr.done（onSuccess）；
xhr.失败（onError）；
}
函数onSuccess（文件）{
如果（！file.file_已生成），则返回onError（）；
$（“#加载#for_uu”+文档id）。淡出（“慢”）；
$（“#document_file_modal_uu”+doc.id）.modal（“show”）；
$（文件url下载链接+doc.id）.attr（“href”，文件url）；
setTimeout（getJSON，2000）；
}
函数onError（）{
window.location.href=doc.path.error；
}
函数初始化（事件）{
$（“#为"+doc.id生成_文件_btn_）
.prop（“禁用”，真）
.attr（“标题”，“加载文件…”）；
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) %>
  }
};

var doc={
id:，
路径：{
xhr:，
错误：
}
};

从这里开始，其他改进将是删除

$（…）

从确实工作的函数中调用。更好的方法是围绕

getJSON

位创建函数包装器，并传入将要执行操作的元素。最好将依赖项传递到确实工作的函数中，而不是在函数体中静态耦合它们

这只是一个开始

---

这决不是代码中最干净的。我不知道您还有哪些其他可用的脚本/工具，但希望这能让您了解如何开始进行一些改进。

第一步是将JavaScript从模板/文本替换上下文中拉出-如果移动到Flight或KO或whatev，这同样适用er else-这样就可以将其视为自己的/独立的模块。虽然我提供了不同的环境。重点是JavaScript被隔离在相关API后面，并提供了值。这是一个更好的解决方案（我以前没有正确阅读）。