• Итак, вы стали комфортно работать с 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 и делает.

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