Javascript 何时分割 vs 何时嵌套

Question

我想知道 javascript 开发者社区对于何时嵌套和何时分割代码有何看法

本质上可以说您正在 IIFE 中运行一些代码

为什么很多时候我会看到这样的东西

(function(context) {
    context.bang = {
        someTing: function() {
           //a lot of code
        },
        someTingElse: function() {
           //a lot of code
        }
    }
}(this));

对比

(function(context) {
    function doSomething() {
        // a lot of code
    }
    function doSomethingElse() {
        // a lot of code
    }
    context.bang = {
      someTing : doSomething,
      someTingElse : doSomethingElse
    }
}(this));

我发现第二段代码更具可读性，如果您希望将其压缩，请通过谷歌的闭包编译器之类的东西发送它，该编译器将采用代码的第二个版本并将其压缩为基本上您没有使用的第一个+技巧'想不到。代码由人维护，由编译器优化，由应用程序运行。

编辑:

虽然在这个例子中并不明显，但让我们跟上将子函数放入子函数中的趋势，而且我不关心什么比我的生活中的其他东西更重要，只要没有任何东西回到 context 中即可。

但沿着同样的趋势，我看到的大多数实际最终代码的最终结果是这样的

(function(context) {
    context.bang = {
        someTing: function() {
           return {
               another: function() {
                  return {
                     yetAnotherFunction: function() {
                        return true;
                     }
                  }
               }
           };     
        }
    }
}(this));

其中每个函数级别的深度不仅仅是我在这里制作的一两行函数 而不是

(function(context) {
    function yetAnotherFunction() {
       return true;
    }
    function another() {

       return yetAnotherFunction;
    }
    function someTing() {
       /*blahblahblah*/
       return another;
    }
    context.bang = {
        someTing: someTing
    }
}(this));  

Answer 1

在许多情况下，它们是等效的，这只是个人喜好问题。

从语义上讲，第一个使用 function expressions而第二个使用 function declarations ，所以第二个得到 hoisting .

但是，主要区别在于每个函数必须访问另一个函数的选项。将它们与Object 分开，将 IIFE 用作 closure允许他们以本地人的身份接触另一个人:

(function(context) {
    function doSomething() {
        // ...
    }
    function doSomethingElse() {
        doSomething();
    }
    // ...
}(this));

但是，他们总是可以假设this也将是一个合适的对象:

(function(context) {
    context.bang = {
        someTing: function() {
            // ...
        },
        someTingElse: function() {
            this.someTing();
        }
    }
}(this));

this 可能并不总是定义的Object，但它是所需的东西。

旁注:当已经需要 Expression 时，function 表达式周围的括号不是必需的，例如在 : 之后对象文字。

<小时/>

关于您的编辑:

嗯，它不再仅仅关乎风格和可读性。现在是关于预期的逻辑，这是必要的。

使用第二个(或第四个)代码片段，每个函数都会返回对另一个已存在函数的引用。

this.someTing() === this.someTing(); // true

但是，对于第一个(或第三个)，对其中任何一个的每次调用都会根据相同的定义创建一个新函数。

this.someTing() === this.someTing(); // false

有时，需要根据特定定义创建新函数(同样: Closures )。其他时候，这可能只是浪费资源。