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惯用法是将一个有问题的代码包装在一个立即调用的匿名函数中：

(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 3

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

正如您目前正在使用的匿名函数真的与声明正确范围的命名函数没什么不同，除了它们是内联的并且使得在许多JavaScript调试器中调试稍微更难以作为函数名称没有显示。

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

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

Answer 4

格式化，格式化，格式化！正确使用空白后，您的代码 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');

这就是我个人格式化的方式。还有其他方法，但我强烈建议在行的末尾留下开口大括号/括号和coutinuing逗号/点/ +因为javascript有自动添加';'的倾向如果它认为该行是一个完整的格式良好的陈述，则在一行的末尾。

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

Answer 5

我尝试尽可能地将代码分解为插件，实际上围绕这个原则设计代码。不确定这个想法能否满足你的需求。

Answer 6

很容易陷入jQuery中永无止境的链接问题。如果适度使用函数链是好的，或者读取和理解像5分钟前编写的代码需要永远。从这个意义上讲，将代码格式化为slebetman建议会有所帮助。此外，仅仅根据某人或某些人的建议对您的功能进行范围界定也会有很大的帮助。

如果你在重构工作中走得更远，我建议你考虑某种架构模式，比如MVC或MVP来组织你的代码。 List Apart在使用Javascript实现MVC方面有一个很好的article。如果视图和模型分离，它很容易让位于使用自定义事件和大量其他易于重用的附加功能。它还强制考虑域模型而不是DOM对象（表，行，div）或事件（click，keyup）等。根据域模型和相关事件（如onPostRollback，{）进行思考例如，可能适用于SO的{1}}或onPostCreate。 jQuery最近添加了对绑定自定义事件的支持，这些是一些很好的文章（first，second）解释了如何。

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

jQuery重构/维护

6 个答案: