JavaScript 花哨的“冲突包装器”代码，它是如何工作的

JavaScript fancybox "conflict wrapper" code, how does it work?

本文关键字：何工作 工作 冲突 包装 JavaScript 冲突包装器 代码      更新时间：2024-02-19

我遇到了这段代码：

(function($) {
    $("a img").fancybox({
        ... some more Fancybox code ...
    });
})(jQuery);

在教程中，这家伙称之为"冲突包装器"......

但是，我不知道这段代码是如何工作的。也许我的 Javascript 有点生疏，但有人可以一步一步地向我解释这段代码是如何工作的吗？

这个函数是如何调用的，它从哪里传递 $，从它里面的花哨代码？

我只是不明白这个结构...

它从哪里获得$ 传递

从这里： (jQuery) – 这只是传递给函数的全局 jQuery 对象，用于参数 $ ，以便 jQuery 可以在函数内部作为$访问，即使$在函数外部不可用(因为 jQuery 可能在无冲突模式下运行。

这个函数是如何调用的

它被即时调用 - 因为它在末尾有(…)，这是用于调用JS中的函数，简单明了。

如果您需要有关立即调用的函数的整个概念的更多信息，请查找术语 IIFE。

这个函数是如何调用的

这是一个立即调用函数表达式 IIFE，一旦定义就会执行注意 

(function($) {
^ this brace 
 // Rest of code
})(jQuery);
 ^^ These braces

它从哪里获得$ 传递

它是从全局jQuery对象})(jQuery)传递的。你也可以传递其他变量，如

(function(a,$) {
    console.log(a) // Will log Hello
     // Rest of code
    })("Hello",jQuery);
相关文章：