Итак, вы стали комфортно работать с jQuery и хотели бы знать, как написать свой собственный плагин.  Замечательно! Вы там, где нужно. Расширение функционала jQuery по средствам плагинов и методов является очень мощной штукой и может спасти много часов разработки Вам и Вашим коллегам,  заключая Ваши самые часто употребляемые функции в плагины. Этот пост, обрисует в общих чертах,  основы, лучшие методы, и распространенные ошибки, которые надо учитывать при написании Вашего плагина. 

Содержание

Приступая к работе

Начнем писать JQuery плагин, с добавления нового метода к объекту jQuery.fn, где имя метода - это название Вашего плагина: 

jQuery.fn.myPlugin = function() {

  // здесь помещаете код Вашего плагина

};

Но постойте! Где же мой знак доллара, который я знаю и люблю?- спросите Вы. Он по прежнему доступен, однако надо убедиться, что Ваш плагин не будет конфликтовать с другими библиотеками, которые также могут использовать знак доллара(Mootools, Prototype). Для этого код Вашего плагина нужно поместить в само вызывающееся замыкание. 

(function( $ ){
  $.fn.myPlugin = function() {
  
    // здесь код Вашего плагина

  };
})( jQuery );

Так-то лучше. После этого, другие библиотеки сколько угодно могут изменять знак $, на Вас это не отразится. Внутри замыкания, $ будет равен jQuery.

Событийная модель реализуется по-разному в IE и Firefox. В IE, есть явный объект window.event, который содержит подробности о произошедшем событии (например: OnClick), в тот момент когда оно происходит, в то время как в Firefox и других W3C совместимых браузерах, объект event автоматически передается в функцию - обработчик события,в качестве аргумента, и содержит аналогичную информацию о событии. Для кросс браузерной обработки событий это нужно обходить так:

document.onclick=function(e){
 var evt=window.event || e //evt автоматически выберет из двух значений нужное
 alert(evt.clientX) //что-то делаем с evt
}

 Кроме доступа к объекту, браузеры поддерживают разные поля и методы объекта event.  Ниже перечислены основные отличия и способы их обхода.

Объект FileReader используется для чтения данных из файлов, которые доступны через браузер. В моей предыдущей статье вы узнали, как используя объект FileReader читать данные из файла в различных форматах. FileReader во многом очень похож на XMLHttpRequest.

Событие прогресса (Progress events)

События показывающее прогресс какого-либо процесса очень распространены. Эти события спроектированы для отображения прогресса передачи данных. Такая передача происходит как при запросе данных с сервера, так и при запросе данных с диска, что FileReader и делает.

Есть шесть событий прогресса: