Question

(function (library) {
    // Calls the second IIFE and locally passes in the global jQuery, window, and document objects
    library(window, document, window.jQuery);
}
// Locally scoped parameters 
(function (window, document, $) {

    // Library code goes here

}));

上面的代码我在以下链接的教程中找到。提前谢谢。

http://gregfranko.com/blog/i-love-my-iife/

Answer 1

让我们看一下IIFE在最简单的情况下的样子：

(function() {
   // ...
}());

结束大括号后的()是调用运算符。如果我们想将参数传递给IIFE，那就是我们必须把它们放在哪里：

(function(value) {
    alert(value);
}(42));

这个IIFE将alert数字为42。

现在，我们可以将任何值传递给函数，甚至可以自己传递函数。考虑

function foo() {
   alert(42);
}

(function(callback) {
    callback();
}(foo));

这里我们将函数foo作为参数传递给IIFE（(foo)）并调用它（callback()）。

但是，我们可以直接使用命名函数，而不是使用命名函数。使用函数调用的函数定义，就像我们经常使用回调一样。因此，上面的代码相当于

(function(callback) {
    callback();
}(function() {
   alert(42);
}));

我确实将foo替换为function() { alert(42); }。这与您的示例中的结构完全相同。

至于这种方法的目的，作者实际上在文章中解释了它：

使用IIFE的其中一个问题是可读性。如果你在IIFE中有很多JavaScript代码，并且想要找到传递给IIFE的参数，那么你需要一直滚动到页面底部。幸运的是，我已经开始使用一种更易读的模式

[代码示例]

此IIFE模式允许您查看传递到IIFE的全局对象，而无需滚动到可能非常长的文件的最底部。＆＃34; *

Answer 2

它是IIFE内的IIFE。外部IIFE显而易见。

(function (library) {
  // Calls the second IIFE and locally passes in the global jQuery, window, and document objects
  library(window, document, window.jQuery);
}(library))

你所指的第二个IIFE是库函数的定义，它作为参数传递给第一个IIFE。如果以这种方式编写，可能会更加明显。

var library = (function (window, document, $) {
   // Library code goes here
});

(function (library) {
  // Calls the second IIFE and locally passes in the global jQuery, window, and document objects
  library(window, document, window.jQuery);
}(library))

Answer 3

这种模式允许人们在定义的最顶部看到传递给IIFE的参数，而不是一直向下滚动到底部。就是这样。

(function (a,b,c) {
    500 lines of code...
}(apple, banana, cantaloupe));

因此，不必向下滚动500行来查看a，b和c的参数，而是使用建议的格式在顶部显示参数。

(function (xyz) {
  xyz(apple, banana, cantaloupe);
}(function (a,b,c) {
  500 lines of code...
}));

任何人都可以告诉我第二个IIFE在调用参数时的含义是什么

3 个答案: