Разработка плагина jQuery: объяснение ключевого слова "this"? - PullRequest
Новая
       7

Разработка плагина jQuery: объяснение ключевого слова "this"?

3 голосов
/ 27 августа 2010

Я кодирую с помощью jQuery около 2 лет, но я никогда не делал этого в плагине. Я пытаюсь изменить это. Я нашел несколько сайтов, которые объясняют, как создать плагин, и я понимаю основы.

Часть, которую я не понимаю, это использование ключевого слова this. Вот простой пример плагина: 

(function($){
  $.fn.myPlugin = function(options)
  {
    // Do whatever
    return this.each(function(){
      element = $(this);
    });
  }
  $.fn.myPlugin.init = function()
  {
    // Initiate plugin
  }
})(jQuery);

На 5-й строке моего кода у меня есть this.each. В этом случае ключевое слово this относится ко всем элементам в селекторе. Следующая строка использует $(this), который является current элементом, так же, как если бы я делал это в .click(function(){$(this).hide();}).

Теперь в логике ОО обычно у нас есть ключевое слово this для ссылки на внутренние функции или свойства. Если в $.fn.myPlugin я хочу позвонить $.fn.myPlugin.init(), я ожидал, что смогу сделать что-то вроде this.init(), но, похоже, он не работает.

Кроме того, я ожидал, что смогу определить свойства класса аналогичным образом, что-то вроде this.myVariable = "my value".

Так что если кто-то может объяснить, что мне не хватает, чтобы понять концепцию плагина с помощью jQuery, или указать мне правильное направление с соответствующей ссылкой, я был бы признателен за помощь! Если мои объяснения недостаточно ясны, дайте мне знать, и я постараюсь сделать это лучше, но сейчас это немного размыто. ;)

1 Ответ

2 голосов
/ 27 августа 2010

Прежде чем попасть в .each(), this на самом деле является объектом jQuery, который содержит набор соответствующих элементов DOM.

Если вы хотите вызвать эту функцию таким образом, вам необходимоназывать его в том объеме, к которому он был добавлен.$.fn.myPlugin. 

this.myPlugin.init();

или внутри каждого, как это: 

$(this).myPlugin.init();

Или прямо так: 

$.fn.myPlugin.init();
...