jQuery 重构/维护

Question

我在 SO 周围进行了一些搜索，但没有找到任何对我有帮助的问题/答案。问题是我的 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

除了重新组织代码（例如，using an object oriented style）以封装代码以使其不那么混乱之外，您无能为力。

Answer 2

我反对的唯一原因是 因为我有一堆函数 声明只使用一次。

像你目前所做的那样使用匿名函数真的与声明正确作用域的命名函数没有什么不同，只是它们是内联的，并且在许多 JavaScript 调试器中作为函数名称进行调试会稍微困难一些不显示。

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

我倾向于避免在 jQuery 方法调用中或嵌入在 JavaScript <script> 标记中的大量 html 字符串，并将它们保存在可以轻松查询以检索相关内容的单独位置 - 这可能是文本文件等。

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 的建议格式化你的代码会很有帮助。此外，根据某人或 thenduks 的建议确定您的功能范围也会有很大帮助。

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

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

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

我会尽量将代码分解成插件，实际上是围绕这个原则设计代码。不确定该想法是否符合您的需求。