Question

我想知道javascript开发者社区对何时嵌套以及何时拆分代码

的看法

基本上可以说你在IIFE中运行一些代码

为什么我很多时候会看到像

这样的东西

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

VS

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

我发现第二段代码更具可读性，如果你想要它压缩，请通过google的闭包编译器发送它，这将采用代码的第二个版本并将其浓缩为基本上你没有做的第一个+技巧想到。代码由人员维护，由编译器优化，并由应用程序运行。

编辑：

虽然在这个例子中不明显但是让我们继续把儿童功能放在儿童功能中的趋势，而且我不关心什么是更多的范围然后我的生活中的其他东西，只要没有任何东西爬回到{{1 }}

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

context

其中每个函数级别更深，然后只是我在这里创建的一个或两个行函数而不是

(function(context) {
    context.bang = {
        someTing: function() {
           return {
               another: function() {
                  return {
                     yetAnotherFunction: function() {
                        return true;
                     }
                  }
               }
           };     
        }
    }
}(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，而是所需的某些内容。

旁注：如果已经预期表达式，则不需要围绕function表达式的括号，例如在:字面值中的Object之后

关于您的修改 ：

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

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

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

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

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

有时需要从特定定义创建新函数（再次：Closures）。其他时候，它可能只是浪费资源。

Answer 2

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

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
}

Javascript什么时候拆分vs什么时候嵌套

2 个答案:

此