JavaScript 美学：“function foo() {}”与“var foo = function() {};”在 AMD 函数中[关闭]

Question

我努力拥有单一职责的简洁功能，但我经常有这样的功能：

logic part1 (~5 lines of code)
logic part2 (~5 lines of code)
return (the results of part1 and part2)

在 JavaScript 中，我发现这种编程风格非常自我声明且易于阅读（可能在 AMD 风格的环境中）：

performCalculation: function() {
    function part1() {
        // 5 lines of code
        return ...
    }

    function part2() {
        // 5 lines of code
        return ...
    }

    return part1() + part2();
}

这是好的形式吗？ 或者，使用“function foo() {}”很笨重？

Answer 1

本质上，您正在创建您不希望其他人使用的私有函数。 从面向对象的角度来看，这是有效的。有关私有函数及其用法的更多详细信息，请参阅thisstackoverflow 答案。

关于“var 函数名”与“函数函数名”this 答案有很好的论据。

Answer 2

你似乎在问两个问题：

1. 将逻辑分解成更小的函数并组合起来是个好主意吗？

2. 是var f=function(还是function f(更好？

关于第一点，是的，是的，是的。这使您的代码更易于阅读，提供了一种自文档形式，并且将更易于维护和扩展。

@c-smile 指出函数调用的成本。好吧，如果我们要担心函数调用的成本，我们都会编写 500 行函数。这应该是您最不担心的事情。需要担心的主要“成本”不是 CPU 时间，而是编写、调试和维护代码的人力时间。仅当函数在紧密循环内被调用 1M 次时，我才会担心函数调用开销（但在许多情况下，JIT 可能无论如何都会为我内联它）。他引用的 jsperf 不是苹果对苹果。 reduce 进行各种检查，处理稀疏数组等。当然它仍然会更慢，但那又如何。

关于第二点，这里已经很好回答了，见var functionName = function() {} vs function functionName() {}。

Answer 3

使用函数声明格式的一大优势是您可以利用函数提升的唯一用途。

performCalculation: function() {
    // What's key here is that the calculation is part1 + part2
    // not the details of implementation so put that first
    return part1() + part2();

    function part1() {
        // 5 lines of code
        return ...
    }

    function part2() {
        // 5 lines of code
        return ...
    }    
}

更好

//someone reading your module likely wants to know what it's returning
//and what its major parts are, so show that at the top of the file
return {
    performCalculation: performCalculation
}

//...

function performCalculation() {
    return part1() + part2();

    //these can now go outside of performCalcuation if that makes it look nicer.
    function part1() {
        // 5 lines of code
        return ...
    }

    function part2() {
        // 5 lines of code
        return ...
    }    
}

Answer 4

如果与本地代码块相比，JS 中的函数调用是相当昂贵的。以http://jsperf.com/anonymous-vs-named-function-passing/3 为例

我不明白这是怎么回事

performCalculation: function() {
    var part1; {
        // 5 lines of code
        part1 = ...;
    }

    var part2; {
        // 5 lines of code
        part2 = ...
    }

    return part1 + part2;
}

比你拥有的更糟糕。