javascript - 揭秘 JQuery 插件

Question

我正在尝试了解 Javascript Lambda 方法，但我仍然对非常灵活的定义方式和变量范围感到非常困惑。

例如我正在研究以下插件的代码，除了代码中还有其他部分我不太清楚，我感兴趣的是代码是如何组织的。

//////////////////////////////////////////////////////////////////////////////////
// Cloud Zoom V1.0.2
// (c) 2010 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Please retain this copyright header in all versions of the software
//////////////////////////////////////////////////////////////////////////////////
(function ($) {

    $(document).ready(function () {
        $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
    });

    function CloudZoom(jWin, opts) {
     ....
    }

    $.fn.CloudZoom = function (options) {
    ....
    };
})(jQuery);

现在我认为 $ 和 $.fn 是 jQuery 定义的 2 个对象，它们用于为插件代码创建一个单独的命名空间/范围。变量

我想了解以下几点:

1. (function($){})(jQuery) 是什么意思？ function($) 在我看来是一个匿名(lambda)函数，它接受参数 $ 但我不确定最后一个 (jQuery)< 的含义 东西。

2. 内部函数function CloudZoom(jWin, opts)应该仅在内部范围内可用，对吗？

3. $.fn.CloudZoom 正在“扩展”$.fn 对象...它们与上述函数具有相同名称的原因是什么？

4. 代码$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();实际上调用的是哪个函数？

Answer 1

1 function($){})(jQuery) 等 是 Immediately Invoked Function Expression (IIFE)并简单地为 jQuery 提供一个本地范围的 $ 变量，以避免 $ 与其他插件发生冲突。是的，它只是一个立即调用的匿名函数，为其他声明提供作用域。

IIFE 基本上是调用像这样的匿名函数(它没有名称):

function(){}

用括号括起来以使其可引用:

(function(){})

所以你可以这样做来立即运行它:

(function(){})();

您当然也可以向它传递参数:

(function(param1, param2){
     // param1 = 1
     // param2 = 2
})(1,2);

所以他们的例子就是这样做的:

(function($){
    // $ is now the same as jQuery!
})(jQuery);

是的。该函数应该仅在外部函数的范围内可用。

我想不出。命名可以是任何名称，只要不冲突即可。 (我通常使用 ProperCase 表示类函数，使用 pascalCase 表示 .fn 扩展名)。

$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom() 调用以下函数，其中 this 作为 jQuery 对象/collection 从 $('.cloud-zoom, .cloud-zoom-gallery') 返回:

<小时/>

$.fn.CloudZoom = function (options) {
....
     var $thisIsTheSelectorResult = this; // == $('.cloud-zoom, .cloud-zoom-gallery')
};