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个对象，它们用于为插件代码创建单独的命名空间/范围及其变量

我想对以下几点有所了解：

(function($){})(jQuery)这意味着什么？ function($)在我看来是一个匿名（lambda）函数，它以参数$为参数，但我不确定最后(jQuery)内容的含义。
内部函数function CloudZoom(jWin, opts)应仅在内部范围内可用吗？
$.fn.CloudZoom正在扩展＆＃39; $.fn对象...它们与上述函数具有相同名称的任何原因？
代码$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();实际上是在调用哪个函数？

Answer 1

1 function($){})(jQuery) etc是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是从$('.cloud-zoom, .cloud-zoom-gallery')返回的jQuery对象/集合：

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

揭开JQuery插件的神秘面纱

1 个答案: