Javascript jQuery函数格式

我正在进行一个包含大量jQuery函数的项目，当然，目前对我来说有点困惑。看起来，如果将函数分解为javascript函数，然后用jQuery调用，代码可能更可读。这样做有什么好处？为什么我不能这样做

例如，现在可能有这样一个函数：

$(document).on('click', function(){
    var foo = 1;
    var bar = 2;
    var sum = foo + bar;
    console.log(sum);
});

function addStuff(){
    var foo = 1;
    var bar = 2;
    var sum = foo + bar;
    console.log(sum);
}

$(document).on('click', function(){
    addStuff();
});

但在我看来，如果是这样的话会更容易：

$(document).on('click', function(){
    var foo = 1;
    var bar = 2;
    var sum = foo + bar;
    console.log(sum);
});

function addStuff(){
    var foo = 1;
    var bar = 2;
    var sum = foo + bar;
    console.log(sum);
}

$(document).on('click', function(){
    addStuff();
});

---

我觉得这会使它更具可读性，但我不确定这是好的约定，坏的约定，还是开发人员的选择。

我认为这在很大程度上取决于可重用性。如果一个函数只从一个特定的位置调用，而其他任何地方都不需要它，那么将它放在匿名函数中是有意义的（如第一个示例）。如果您多次需要该代码，最好不要重复，并将其放在命名函数中（如第二个示例）。

这没问题，仅取决于您是否打算在其他地方重用该函数。

不是真正更可读，但由于这个原因，它肯定更具可重用性，而且可能是更好的实践。甚至更好的是

$（document）