(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
}));
上面的代码我在以下链接的教程中找到。提前谢谢。
答案 0 :(得分:3)
让我们看一下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的全局对象,而无需滚动到可能非常长的文件的最底部。" *
答案 1 :(得分:0)
它是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))
答案 2 :(得分:0)
这种模式允许人们在定义的最顶部看到传递给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...
}));