使用'window','document'和'undefined'作为包装jQuery插件的匿名函数中的参数

Question

老实说,我不知道如何缩短标题.

我通过研究SlidesJS插件的来源学习了如何编写jQuery 插件.当我遇到一些新的东西时,我只是问了我的好朋友谷歌,而且大部分时间都得到了满意的答案.老实说,我从来没有做过多少努力.我所知道的$是(可能)是一个简写的jQuery对象构造函数,$()并且jQuery()只要包含jQuery,它就是同样的东西.

不过,最近,我试图了解jQuery背后的科学以及如何编写一个好的 jQuery插件.我遇到了一篇非常好的文章,其中作者列出了几个用于创建jQuery插件的模板.由于其余部分太复杂,我无法理解,我喜欢第一个:轻量级的开始.现在,这是所述模板的代码.

/*!
 * jQuery lightweight plugin boilerplate
 * Original author: @ajpiano
 * Further changes, comments: @addyosmani
 * Licensed under the MIT license
 */


// the semi-colon before the function invocation is a safety 
// net against concatenated scripts and/or other plugins 
// that are not closed properly.
;(function ( $, window, document, undefined ) {

    // undefined is used here as the undefined global 
    // variable in ECMAScript 3 and is mutable (i.e. it can 
    // be changed by someone else). undefined isn't really 
    // being passed in so we can ensure that its value is 
    // truly undefined. In ES5, undefined can no longer be 
    // modified.

    // window and document are passed through as local 
    // variables rather than as globals, because this (slightly) 
    // quickens the resolution process and can be more 
    // efficiently minified (especially when both are 
    // regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = 'defaultPluginName',
        defaults = {
            propertyName: "value"
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method that merges the 
        // contents of two or more objects, storing the 
        // result in the first object. The first object 
        // is generally empty because we don't want to alter 
        // the default options for future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype.init = function () {
        // Place initialization logic here
        // You already have access to the DOM element and
        // the options via the instance, e.g. this.element 
        // and this.options
    };

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, 
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );

我已将评论纳入其中,以便在我的问题中引用它们.

我有一个不成熟的思想,为什么window和document已包含在包装插件匿名函数的自变量(我不知道还能怎么称呼它),因为它是在评论因为它八九不离十有点儿缩短了执行时间.但是这有什么作用呢？包装插件的所述匿名函数的任何参数都传递到哪里？如何在插件中解决这些问题？

通常情况下,我会这样做,$(window).resize(function(){})但在这种情况下不起作用.如果我console.log(window)在插件函数内部,它会显示'undefined'.

这让我想到了另一个问题:什么是未定义的？它不是分配给未在范围中定义的对象的数据类型吗？怎么能作为一个论点传递？参数不必是对象吗？在评论中有一些关于这一点的文字,但我不明白它的一句话:< 所以我们可以确保它的价值真的未定义 > whaaa？

总结一下:

• 究竟是什么意思function($)？
• 我为什么要包括window,document并undefined作为参数function($)？
• 如果我这样做,我如何访问实际window和document对象？
• undefined 什么,为什么？

---

请放轻松我.我从未将编程语言作为编写应用程序的明确目的而学习.我研究了基本的C,用于为微型核心微控制器编写面向硬件的低级例程,而这就是它.我确实学习了很多C++,并且自己学习了一些Java.这样你就会知道会发生什么.

Answer 1

当你写一个函数,如:

(function (foo, bar) {
    return foo.getElementById(bar);
})(document, "myElement")

那么函数立即调用的参数document和"myElement"对参数foo和bar.因此,在函数内部,foo.getElementById(bar)相当于document.getElementById("myElement").

同样,在您的插件示例中,您将立即使用参数调用该函数jQuery, document, window.

究竟是什么意思function($)？

在$仅表示一个基准jQuery是在所述包装函数传递的对象.后来,当匿名函数被调用(jQuery, window, document)时,$在函数内部参考引用的jQuery对象.这样做有很多原因,其中最重要的是$键入更快.它还允许在包装应用插件的用户特定实例的jQuery,也许产生jQuery.noConflict().

我为什么要包括window,document并undefined作为参数function($)？

您不需要包含这些内容.原作者的推理是,分配函数局部变量来引用它们将缩短解决这些变量所需的时间.我断言节省的费用可以忽略不计; 我个人不会打扰,除非我使用了很多引用window和/或document.

至于undefined原作者的目的是确保有人没有改变undefinedEcmaScript 4中的全局变量(编辑:实际上是ECMAScript 3 - 版本4从未成功)或更早.再次,我无法想象这个问题出现了.如果你真的担心这可能是一个问题,只需在你的函数中包含这样的东西:

if(typeof undefined !== "undefined") {
    undefined = void 0;
}

如果我这样做,我如何访问实际window和document对象？

您所要做的就是确保匿名函数末尾的函数调用传入实际(jQuery,window,document)参数.或者,不要在函数签名中包含window和document参数.无论哪种方式,无论间接级别如何,您都将引用实际对象.

undefined 什么,为什么？

undefined是"undefined"类型的全局变量.尚未初始化的字段与undefined完全相同(===).它允许程序员区分故意空值和简单的未初始化值.在ECMAScript 5及更高版本中,undefined是只读的.在此之前,其他代码可能会修改其值undefined.你总是可以undefined用表达式得到真正的价值void 0......如同myUndefinedVar = void 0;.