jQuery 重构/维护

Question

我已经搜索了一些，但没有找到任何对我有帮助的问题/答案。问题是我的 jQuery 函数调用变得太大而无法维护。我想知道我是否应该进行更多重构，或者是否有更好的方法来完成所有这些调用。当我进行一次调用时，您会发现作为函数参数的匿名函数最终变得非常大，并使代码的可读性变得非常糟糕。理论上我可以将所有这些分解为各自的功能，但我不知道这是否是最佳实践。下面是到目前为止一些 jQuery 的示例：

$('#dialog').html('A TON OF HTML TO BUILD A FORM').dialog('option', 'buttons', { 'Save': function(){$.post('/use/add/', $('#use_form').serialize(), function(data){ ......There were 4 more lines of this but I'm saving you so you don't rip your eyeballs out hopefully you get the idea.....dialog('option','title','New Use').dialog('open');

正如您所看到的，由于我调用的许多函数都将函数作为参数，所以当我创建匿名函数时，我最终会陷入一片混乱（还有大约 3 个匿名函数）这段代码中的函数声明）

我应该简单地创建一堆函数并调用它们以使其更具可读性吗？我反对这样做的唯一原因是因为我声明了一堆只使用一次的函数。

预先感谢您的帮助！

Answer 1

在正确的范围内定义函数，这没什么大不了的。

var generateHTML = function() {
  ...
};
var somethingElse = function() {
  ...
};

... some more ...

$('#dialog').html( generateHTML() )...etc

除了一般地重新组织代码（例如，使用面向对象的样式< /a>) 来封装代码，这样代码就不会那么混乱。

Answer 2

我反对这个的唯一原因是
因为我有很多功能
声明只使用一次。

正如您当前所做的那样，使用匿名函数与声明正确作用域的命名函数没有什么不同，只不过它们是内联的，并且由于不显示函数名称，因此在许多 JavaScript 调试器中调试起来会稍微困难一些。

如果跨页面的匿名函数有任何模式，我会尝试重构命名函数，为所需的功能提供共同的基础。

我倾向于避免在 jQuery 方法调用中包含大的 html 字符串或嵌入 JavaScript

Answer 3

保持可维护性的一个明显方法是使用某种格式。

我理解您不喜欢命名单独使用的函数，但包含名称很容易。模仿作用域的 javascript 习惯用法是将有问题的代码包装在立即调用的匿名函数中：

(function () {
  var f = function (x) ...
  var g = function (y, z) ...
  // operations involving f and g
}()); // called immediately

我更喜欢另一种形式，这使得代码立即执行的事实更加明显：

new function () { // called immediately
  var f = function (x) ...
  var g = function (y, z) ...
  // operations involving f and g
};

还有另一种方式来创建名称：

new function (i, j, k) {
  // functions f and g
  f(i, g(j, k));
}(3, 4, 5);

Answer 4

在 jQuery 中很容易陷入永无休止的链接问题。如果适度使用，函数链是很好的，否则需要花很长时间才能阅读和理解 5 分钟前编写的代码。从这个意义上说，按照 slebetman 的建议格式化代码会很有帮助。此外，按照某人或专家的建议来确定您的职能范围也会有很大帮助。

如果您要在重构工作中加倍努力，我建议您考虑某种架构模式（例如 MVC 或 MVP）来组织您的代码。 A List Apart 有一篇关于使用 Javascript 实现 MVC 的精彩文章 。如果视图和模型是分离的，那么很容易让位于使用自定义事件和许多其他易于重用的附加功能。它还迫使人们根据域模型进行思考，而不是 DOM 对象（表、行、div）或事件（单击、按键）等。根据域模型和相关事件（例如 onPostRollback）进行思考>、onPostCreate 或 onCommentAdded 可能适用于例如 SO。 jQuery 最近添加了对绑定自定义事件的支持，这些是一些不错的文章 (第一个，第二）解释如何使用。

一般来说，重用视图很困难，但模型在项目中变化很小，是我们可以实现最大可重用性的领域之一。

Answer 5

格式化，格式化，格式化！通过正确使用空格，您的代码CAN看起来可读：

$('#dialog').
    html('A TON OF HTML TO BUILD A FORM').
    dialog('option',
        'buttons', {
            'Save': function(){
                var callback = function(data){
                    // There were 4 more lines of this
                    // but I'm saving you so you don't
                    // rip your eyeballs out hopefully
                    // you get the idea
                }
                $.post(
                    '/use/add/',
                    $('#use_form').serialize(),
                    callback
                )
             }
         }).
    dialog('option',
        'title',
        'New Use').
    dialog('open');

这就是我个人格式化它的方式。还有其他方法，但我强烈建议在行尾保留左大括号/中括号并使用逗号/点/+，因为 javascript 倾向于自动添加“;”如果它认为该行是一个完整的格式良好的语句，则在该行的末尾。

重要的不是你采用什么具体的格式规则。重要的是要保持一致。在某些方面，Python 是对的：有时强迫人们缩进代码是件好事（但我讨厌被 Python 强迫）。

Answer 6

我会尝试尽可能地将代码分解为插件，并且实际上围绕这个原则设计代码。不确定这个想法是否适合您的需求。