JavaScript fancybox＆＃34;冲突包装＆＃34;代码，它是如何工作的？

Question

我遇到了这段代码：

(function($) {

    $("a img").fancybox({

        ... some more Fancybox code ...

    });

})(jQuery);

在教程中，这个人称之为＆＃34;冲突包装＆＃34; ...

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

这个函数是如何被调用的，它从里面的奇特代码中传来了$？

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

Answer 1

  

从哪里获得$

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

  

这个函数如何调用

它是立即调用的 - 因为它最后有(…)，这是用来调用JS中的函数，简单明了。

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

Answer 2

  

这个函数如何调用

这是一个立即调用的函数表达式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);