Использование "window", "document" и "undefined" в качестве аргументов в анонимной функции, которая обертывает плагин jQuery

честно говоря, я не знаю, как сделать название короче.

я узнал, как написать плагин jQuery, изучив источник SlidesJS плагин. Когда я столкнулся с чем-то новым, я просто спросил моего хорошего друга Google и в большинстве случаев, получил удовлетворительного ответа. Честно говоря, я никогда не прилагал особых усилий. Все, что я знаю $ (возможно) сокращенное объект jQuery конструктор и $() и jQuery() - одно и то же при условии, что jQuery включен.

недавно, однако, я попытался понять науку, стоящую за jQuery и как написать хороший плагин jQuery. Я наткнулся на очень хороший статьи в котором автор перечислил несколько шаблоны для создания плагина jQuery. Поскольку остальные были слишком сложны для моего понимания, мне понравился первый:--29-->Легкий Запуск. Теперь, вот код для сказанного шаблон.

/*!
 * 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 что, и почему?

пожалуйста, полегче на меня. Я никогда не изучал язык программирования как предмет с целью написания приложений. Я изучал basic C для написания аппаратно ориентированных низкоуровневых подпрограмм для крошечных микроконтроллеров, и это все. Я изучил C++ широко и немного Java самостоятельно. Просто чтобы ты знал, чего ожидать.

23
boilerplate dollar-sign javascript jquery jquery-plugins

4 ответов

когда вы пишете функции, как:

(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), the $ ссылка внутри функции ссылается на всегда получить истинное значение undefined выражение void 0... как в myUndefinedVar = void 0;.

22

что означает function($)?

передает $ в качестве аргумента вашей функции позволяет вам использовать jQuery стенографический объект, который, как вы четко определили, является просто псевдонимом jQuery объект (также взгляните на jQuery.noConflict()).

почему я должен включить window, document и undefined как аргументы function($)? У меня есть грубая идея, почему окно и документ были включены в аргумент анонимной функции, которая обертывает плагин (я не знаю, как еще его назвать), потому что он приведен в комментариях, что он вроде как сокращает время выполнения. Но как это работает? Любой аргумент указанной анонимной функции, обертывающей плагин, передается куда?

передает window и document как локальные переменные своего рода сокращает время выполнения потому что проще и быстрее получить доступ к локальной переменной, чем к глобальной переменная, потому что локальные переменные являются первыми в цепочке. Это ответ на ваш второй вопрос: аргументы передаются внутри анонимной функции область, в чем весь смысл создания анонимной функции в любом случае: создать закрытие.

эти аргументы передаются в конце вашей функции, где вы видите последние скобки. Переменная window в вашем закрытии относится к global window потому что вы прошли его в конец.

причина, почему вы проходите undefined потому что undefined является запутанным беспорядком Javascript. В основном, undefined является собственностью глобальный объект, то есть это переменная, a синглтон. он не защищен, это означает, что это можно переопределить. Это означает, что у вас может быть undefined который фактически определен.

, передав undefined вы убедитесь, что даже если кто-то испортил с undefined в глобальной области (никогда не доверяйте глобальной области! :)), вы все равно получите правильный undefined.

кроме того, те же причины производительности применяются к undefined.

если я это сделаю, как мне получить доступ к фактическим объектам окна и документа?

вы уже обращаетесь к ним, потому что вы передаете их своей функции. И как таковой вы способны манипулировать ими.

3

прежде чем ответить подробно позвольте мне отметить, что в отличие от других языков программирования, javascript немного странный по двум причинам: Во-первых, он был создан в спешке, это означало, что многие вещи не были уточнены или реализованы хорошо. Во-вторых, он был принят в интернете очень, очень быстро, и Microsoft скопировала язык очень быстро и очень точно (включая ошибки в языке). Результатом этого является то, что попытка исправить ошибки в дизайне языка была трудной и / или невозможно, потому что они не хотели нарушать совместимость с существующими веб-сайтами.

теперь перейдем к деталям:

что действительно подразумевается под функцией ($)

ничего особенного. В именах функций и переменных javascript разрешено использовать буквы a-z включая верхний регистр, числа 0-9 символы $ и _. Других ограничений на их использование нет. Хотя существуют руководящие принципы и Конвенции, некоторые из них упомянутый самой спецификацией языка, некоторые выросли с сообществом программирования.

таким образом, $ - это просто имя переменной. Нет никакой разницы между:

function foo ($) {alert($)}

и

function foo (x) {alert(x)}

это просто имя, выбранное для параметра. Тем не менее, спецификация настоятельно предполагает, что $ не должен использоваться кодом, написанным людьми. Это нормально для компьютерного кода (например, компилятор coffeescript), но не нормально для обычных скриптов. С другой рука настоятельно рекомендуется в скриптах, которые используют jQuery, что $ всегда ссылаться на объект jQuery (который, кстати, также является функцией, это нормально в javascript, так как функции являются объектами).

так как вы пишете jQuery значение function ($) - анонимная функция, которая принимает один аргумент, а ожидаемый аргумент-объект jQuery.

почему я должен включать окно, документ и undefined в качестве аргументов функция($)?

возможно, одной из ошибок проектирования в javascript является отсутствие поддержки констант и/или неизменяемых/защищенных переменных/объектов. Как таковой,window, document и undefined на самом деле являются регулярными глобальными переменными - любой может переназначить их на что угодно.

следующий сумасшедший, но действительный код javascript:

window = 42;

ни один здравомыслящий программист не сделал бы этого, но это возможно тем не менее. Разработчики jQuery были очень обеспокоены это и так jQuery пытается сделать все возможное, чтобы передать реальный window, document и undefined в плагины в случае, если кто-то достаточно сумасшедший, чтобы делать сумасшедшие вещи.

одной из особенностей javascript является то, что аргументы функции переопределяют глобальные переменные. Поэтому, если какая-либо из вышеперечисленных переменных была захвачена кем-то другим, они переназначаются на свои собственные имена в функции.

если я это сделаю, как мне получить доступ к фактическим объектам окна и документа?

вы ожидается, чтобы пройти правильный window, document и undefined как аргументы с именем window, document и undefined функции. Делать что-либо еще означает, что у вас больше нет доступа к window, document и undefined объекты.

есть сумасшедшие обходные пути, которые вы можете сделать, чтобы попытаться захватитьwindow объект (также известный как глобальный объект), а оттуда вы можете взять document. Код jQuery на самом деле является одним обходным путем, чтобы вернуться undefined в случае, если он был угнан.

определено, что, и почему?

как вы правильно сказали. undefined - это значение, которое javascript дает вещам, которые объявлены, но не имеют назначенных им значений. Но в JavaScript undefined - это просто глобальная переменная. Если вы не касаетесь его, он изначально имеет значение undefined (круговая логика, я знаю). Но его можно изменить:

undefined = 'boom!';

и отныне все неопределенные переменные будут иметь значение "boom!". Последняя спецификация языка javascript фактически запрещает переназначение в undefined, но на сегодняшний день это делает только Safari.

опять же, ни один здравомыслящий программист сделает это.

2

включение идентификатора в список параметров фактически совпадает с объявлением переменной в теле функции, например

function bar(foo) {
}

эквивалентно 

function bar(foo) {
  var foo;
}

но, конечно, вы просто делаете первый, если хотите передать значение фу.

основная причина для этого:

(function($) {
    // use $ here instead of jQuery
}(jQuery));

это когда jQuery был выпущен, прототип.js уже использовал " $ " в качестве идентификатора для своей основной функции для некоторых время. Вышеуказанный шаблон позволяет jQuery и прототипу.js, который будет использоваться на одной странице, используя " $ " в качестве идентификатора для разных вещей.

, проходящей в документ и окно, в лучшем случае, микро-оптимизация, которая имеет мало преимуществ. Он не обеспечивает никакой защиты от присвоения им других значений, чем ожидалось. Просто не беспокойтесь и используйте окно и документ внутри функции как Global идентификаторы.

в том числе undefined в параметрах и не передавая его значение не является разумным способом обеспечения undefined действительно не определено, поскольку это все еще может быть затронуто, если значение случайно передано. Более безопасный способ:

(function() {
    var undefined;
    ...
}());
вы некоторых это undefined в области действия функции действительно не определено. Или, если вы хотите задание: 
(function() {
    var undefined = void 0;
    ...
}());

но это просто дополнительный набор текста.

0