AjaxTips

Я заметил за собой одну вещь — если у меня есть какая-то задача, которая кажется мне сложной для освоения, то я откладываю ее решение в «долгий ящик». А когда наконец добираюсь до нее и нахожу решение, понимаю, что «ларчик просто открывался».

Так, например, я очень долго откладывал вопрос по написанию собственных jQuery плагинов. Мне казалось, что это очень сложно! Но набравшись сил и переборов свое предубеждение я начал разбираться с этим вопросом и обнаружил, что все очень просто.

Необходимость написание собственных плагинов возникает по очень простой причине — каким бы хорошим не был фреймворк jQuery его функционал конечен, а значит рано или поздно возникает потребность сделать что-то, чего этот фремворк делать не умеет. Вот тогда, то и возникает необходимость написать свой jQuery plugin.

На самом деле слово «plugin» многих сбивает с толку, ведь кажется, что плагин — это что-то сложное. А на деле оказывается, что плагин это всего лишь набор функций или методов jQuery собранных в отдельный файл. Обычно файл именуется по имени плагина, например «highlight.js».

Исходя из вышесказанного легко показать как создаются плагины на базе функций и методов jQuery.

Способ №1 — создание плагина на базе функции

jQuery.log = function(message) {
  if(window.console) {
     console.debug(message);
  } else {
     alert(message);
  }
}

Здесь создается новая функция «log», которая является частью глобального объекта jQuery. Важно понимать, что при обращении к функции нельзя использовать служебное слово «this». Функция должна использоваться следующим способом:

jQuery.log("Некоторое сообщение...");
// или
$.log("Еще какое-то сообщение");

Способ №2 — создание плагина на базе метода

В отличии от функции методы создаются для каждого объекта jQuery в отдельности, поэтому к ним можно обращаться «из объекта» используя служебное слово «this». По сути методы нужны тогда, когда появляется необходимость работать с контекстом объекта, в противном случае лучше использовать функции.

jQuery.fn.highlight = function (word) {
      var span = "<span class='highlight'>" + word + "</span>";
      this.each(function() {
              this.innerHTML = this.innerHTML.replace( new RegExp(word, 'gi'), span);
      });
}

Особо хочется отметить тот факт, что при создании плагина лучше использовать имя объекта — «jQuery», а не сокращения "$". Но если уж очень хочется, то делать нужно так:

(function($){
    $.fn.someFunction = function() {
        //........
    }
})(jQuery);

На этом пока все. Спасибо за внимание.