3

我在 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 个匿名函数声明）

我是否应该简单地制作一堆函数并调用它们以使其更具可读性。我反对这一点的唯一原因是因为我声明了一堆只使用一次的函数。

在此先感谢您的帮助！

4

6 回答 6

6

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

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

... some more ...

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

除了重新组织代码（例如，使用面向对象的样式）来封装代码以使其不那么混乱之外，您无能为力。

于 2010-01-07T23:01:51.340 回答
1

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

我理解您不喜欢命名单独使用的函数，但包含名称很容易。模仿范围的 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);
于 2010-01-07T23:25:43.827 回答
1

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

像您当前所做的那样使用匿名函数实际上与声明范围正确的命名函数没有什么不同，只是它们是内联的，并且由于不显示函数名称，因此在许多 JavaScript 调试器中调试变得稍微困难​​一些。

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

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

于 2010-01-07T23:25:58.830 回答
1

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

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

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

于 2010-01-08T00:03:51.713 回答
0

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

$('#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 强迫）。

于 2010-01-07T23:20:12.600 回答
0

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

于 2010-01-07T23:38:56.027 回答