1

我想知道 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));

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

编辑：

虽然在这个例子中并不明显，但让我们保持将子函数放在子函数中的趋势，而且我也不关心什么比我的 iife 中的其他东西更具范围，只要没有任何东西重新进入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));
4

2 回答 2

1

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

从语义上讲，第一个使用function表达式，第二个使用function声明，所以第二个得到提升。

但是，主要区别在于每个函数必须访问另一个函数的选项。将它们与它们分开Object使用 IIFE 作为闭包，以允许它们以本地人的身份到达另一个：

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

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

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

this可能并不总是Object被定义的，而是想要的。

旁注：当表达式已经被预期时，表达式周围的括号function不是必需的，例如在文字中的 a 之后。:Object

关于您的编辑：

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

对于第二个（或第四个）片段，每个函数都返回对另一个已经存在的函数的引用。

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

然而，对于第一个（或第三个），每次调用它们中的任何一个都会根据相同的定义创建一个新函数。

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

有时需要根据特定定义创建新函数（再次：闭包）。其他时候，这可能只是浪费资源。

于 2013-08-16T00:17:07.950 回答
0

我发现第一个同样可读且更简洁。为什么要输入两次相同的函数名？我还将省略对象中匿名函数周围的括号。如果空间不足，只需使用更多换行符。无论如何，一个人不应该在一行中塞进太多东西。我的编辑也有指导方针。你也可以这样做：

function(context){
    context.obj = {};
    obj.a = function(){
        // Your code
    }
    obj.b = function(){
        // Your code
    }
}(this)

这

需要注意的重要一点是，这将在您提供的示例中引用函数中的不同对象。

在第一个它将引用外部函数。在后者中，它将引用 context.bang

但是我不明白为什么原始代码不仅仅是

this.obj = {};
this.obj.a = function(){
    // Your code
}
this.obj.b = function(){
    // Your code
}
于 2013-08-16T00:09:54.370 回答