Пишем плагин для jQuery

[Keyten]

Извините, но это настолько элементарно…

UPD. Заметил, что это перевод статьи Джона Resig-а — в таком случае это не первый, не второй и даже не третий перевод. Об этом уже столько раз писали…

[Rafael]

Элементарно для кого, простите? К примеру, я раньше не писал плагинов для jQuery. И, думаю, тут много людей, которые не обладают опытом написания плагинов, но интересуются этой темой.

[Keyten]

Я имел в виду, что в инете существует огромное количество инфы на эту тему. И на русском тоже. Да хотя бы:

anton.shevchuk.name/javascript/jquery-for-beginners-write-plugins/
www.linkexchanger.su/2008/67.html
xdan.ru/Kak-napisat-plagin-na-jQuery.html
jquerylist.ru/tutorials/writing-your-own-plugins.html
blog.alexxxnf.ru/post/34/
jquery.page2page.ru/index.php5/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%B0_jQuery
www.wisdomweb.ru/JQ/plugin.php
jdrupal.ru/node/30

Дальше мне лень было добавлять. Вбейте в любой поисковик «как написать плагин jquery»

[Rafael]

Как вы можете заметить, на настоящий момент, пятьдесят с лишним человек нашли эту статью полезной для себя.

[Keyten]

И из них плюсанули 7 человек.

[Rafael]

Продолжайте, и?

[creage]

… и вы в очередной раз пишите, как раскрасить белое белым, а черное — черным. Топики про плагины к jQuery настолько унылы, что их даже обсуждать тоскливо.

— «Зацените, я научился ЭТО делать!».
— «Держи нас в курсе»…

[Rafael]

Топики про плагины к jQuery настолько унылы, что их даже обсуждать тоскливо.

Искренне благодарю вас за то, что переступили через себя, Азиз.

— «Зацените, я научился ЭТО делать!».
— «Держи нас в курсе»…

Если вы воспринимаете справочную статью как попытку хваствовства, то это проекции вашего бессознательного. Но спасибо за хорошее настроение :)

[Fesor]

Но простите, на обучение это тоже не тянет. Да, какие-то банальные вещи разрозненные по статьям собраны худо бедно в одном месте. Да пост на хабре. В целом же достаточно было бы сконцентрироваться на мелочах и статья вышла бы уже обучающего характера.

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

Ну и там особенности тестирования, сборки плагинов через grunt, хитрости архитектуры, какие-то best practices. А это… ну так… очередная статья из цикла «jQuery для чайника», коих даже по этой теме пруд пруди.

[Rafael]

Ну как вам сказать, для вас эта статья не тянет на обучающую. Для меня — тянет. Для других тоже.
Не всех, конечно. Некоторые особенно нервно реагируют, как я могу заметить.

Следуя их логике следовало ввергнуть в геенну огненную все переводные статьи в стиле «50 удобных инструментов для вебмастеров». Но, как можете заметить, такие статьи принимаются благосклонно.

А почему? Потому что они полезны. Да их можно найти гуглем и даже без перевода разобраться. Благо Google Chrome предлагает автоматический перевод, который позволяет не растеряться на странице. Чего, в данном случае, достаточно.

Но перевод их и публикация на хабре делают удобным работу с этим материалом.

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

Если кто-то опубликует тут статью для начинающих о том, как работать с IBM Lotus Notes/Domino и как писать программы для этой системы, то я поблагодарю его, несмотря на сотни качественных переводных статей на ibm.developerworks.

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

[Fesor]

Просто самый банальный пример плагина можно получив просто выполнив команду grunt init:jquery. Причем не просто какой-то там, а с юнит тестами, с минификацией сконкатенированного файла (в случае если проект разбит на файлы) ну и т.д.

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

[Casufi]

Посоветуйте пожалуйста ссылки на подобные статьи.

[Fesor]

Ну вот парочка ссылок.
www.onenaught.com/posts/85/turn-your-jquery-code-into-a-richer-unit-testable-plugin
paulirish.com/2011/11-more-things-i-learned-from-the-jquery-source/
andymatthews.net/read/2012/05/29/Unit-Testing-jQuery-Plugins-with-Grunt-and-QUnit

vimeo.com/channels/wstdays/47080764 — хороший доклад на тему оптимизации jQuery кода.

[denver]

За популяризацию спасибо, плюсанул.

Но чаще тут добавляют в избранное затем чтобы «прочесть потом, когда-нибудь», т.е. скорее показатель того что заголовок интересный, но много букв.

[KasperGreen]

А это вы и не заметили :) habrahabr.ru/post/153099/

[Valery4]

Позволю себе спустя пару лет, вставить свои пять копеек. На сегодняшний день эта статья первая в выдаче Гугла по запросу «создание jquery плагина». Так, что полезность неоспорима, учитывая, что бегло пробежавшись по статье, её оценке и комментах — можно оценить полезность или вредность информации.

[Keyten]

Необычно спустя пару лет читать свои комментарии :).

И думаю, всё же гораздо полезнее было бы, если бы автор переводил что-то ещё не переведённое.

[Keyten]

Про элементарность — имел в виду, что некоторые конструкции, про которые вы рассказываете, элементарны. Например, вот эта:
var settings = $.extend(defaults, options);

Или вот эта:
(function( $ ){ })( jQuery );
Кстати вы даже не объяснили, зачем это замыкание нужно. Так что дополню: чтобы внутри можно было объявлять переменные (и они не выскакивали в глобальное окружение), а передача аргументов объекта jQuery — это страховка от jQuery.noConflict(). Не помешает также переделать вот так вот:
(function( $, undefined ){ })( jQuery );

Чтобы подстраховаться от определения внешней переменной undefined.

[Rafael]

На полноту и всеохватность данный перевод не претендовал. Это всего-лишь перевод одной из статей с jquery.com.

Я отдаю себе отчёт в том, что это базовые понятия. Но они элементарны не для всех.
Вы, насколько я понимаю, давно и плотно работаете с javascript. Но ведь есть люди и с другим опытом. И то, что элементарно для вас, совсем не очевидно для меня, например. И наоборот.

Для меня эта статья не была элементарной. И в процессе её перевода я разобрался и понял как что работает.
И, думаю, что этот перевод принесет пользу и другим, кто интересуется jQuery.

И этот факт главнее, чем то, что кто-то скажет «это элементарно».

Я так думаю.

[Keyten]

Вы правы

[Rafael]

Я ведь не спорю с вами, Дмитрий. Лишь стараюсь объяснить свою точку зрения.

[Keyten]

Спор — это и есть доказывание своей точки зрения.
Так что я тоже не спорю :)

[B_Vladi]

(function( $, undefined ){ })( jQuery );

Такой трюк, несомненно, имеет плюсы, но и минусы тоже: некоторые IDE ругаются, если количество передаваемых параметров не соответствует количеству объявленных. Предпочтительнее поступать так:

(function( $ ){
  var undefined;
 })( jQuery );

И даже не так:

var undefined = void 0;

, ибо на это ругается JSLint.

[mark_ablov]

Как вариант

(function( $, undefined){
  var undefined;
 })( jQuery, (function())());

Хотя не знаю будет ли кто-то ругаться на это.
Используется идея, что функция без return'a возвращает undefined.

[B_Vladi]

В вашем варианте получается, что аргумент undefined будет переписан переменной undefined. Т.е. всё было сделано зря и результат будет эквивалентен тому, что я написал выше.

Ну и на это ругается IDEA, так как бессмысленно объявлять аргумент, если в теле функции есть одноименная переменная.

[KELiON]

Я считаю, что это валидный JS-код и это проблема IDE

[B_Vladi]

Если необходимо использовать несколько вариантов передачи аргументов, есть выход:

1. Принимать один аргумент — объект и проверять его свойства.
2. Не указывать явно имена аргументов в функции, а использовать arguments.

Ну и этот код:

function fnc(foo, bar) {
  if (bar === undefined) {}
}

потенциально бажный. Зависит от конкретной ситуации.

[azproduction]

Зачем, кстати, вам этот undefined? typeof blabla === "undefined" же. Только не говорите, что экономия N байт.

[Fesor]

Минификаторы на основе замыканий тогда жмут чуточку лучше.

[azproduction]

Минификаторы должны такие ситуации отслеживать и заменять мои длинные инструкции аналогичными короткими. Все мы должны писать более читаемо и единообразно (у каждого понимание свое) и не подстраиваться под IDE и под глупый минификатор :)

if (typeof pewpew === "undefined") {} // почти не изменится

if(typeof pewpew=="undefined") {}

//--

var a;
if (typeof a === "undefined") {} // изменится сильно

var a, u;
if(a==u){}

[vanxant]

Жаль разработчики IDE и минификаторов об этом не знают:)

[Fesor]

Я не стану пользоваться минификаторами, которые меняют конструкции кода не спросив меня.

[azproduction]

Да они сплошь и рядом. Для остального есть Source Map.

[Fesor]

Изменения которые делает аглифи не сказываются на логике. В то же время поведение при typeof немного отличается от банального сравнения.

[azproduction]

Предъявите, пожалуйста, хотя бы один случай, когда вот эта замена не будет корректна:

function A(a) {
    if (typeof a === "undefined") {
        return "0";
    }
}

// after
function A(a){var u;return a===u?0:u}

[Fesor]

В приведенном вами случае никак не поменяется. а в случае

(function(){
    if (typeof a != 'undefined') {
    ...
    }
})();

думаю кое что произойдет.

Хотя вы уже об этом говорили. Это я не внимательный.

[azproduction]

На то и нужен «умный» минификатор, а не замена по RegExp :) Благо у функций в JavaScript скоуп без eval всегда стабильный — осюда и возможны такие рискованные оптимизации.

[mark_ablov]

"==" медленнее же чем "==="

[azproduction]

Да, просто тупо по тому, что алгоритм The Strict Equality Comparison короче алгоритмса The Abstract Equality Comparison, но не суть дела, да и минификаторы чаще сохраняют тип сравнения во избежании ошибок.

[B_Vladi]

Ну я не говорил, что он мне нужен, но раз вы хотите знать моё мнение, то:

1. Мне проще воспринимать запись

blabla === undefined

чем

typeof blabla === "undefined"

Зачем лишний оператор — не понятно.

2. Когда я пишу плагин/виджет для проекта, окружение которого я не контролирую, мне проще перестраховаться и вписать-таки эту переменную, чем потом разгребать баг-репорты. Может я параноик, не знаю.

[bullet]

Вбейти в гугл jquery plugin, первая же ссылка ведет на оффициальную документацию где все подробно написано.

[Rafael]

Я так и поступил.

Но на русском читать документацию мне удобнее, чем на английском.

[AntonShevchuk]

habrahabr.ru/post/155107/ ;)

[Rafael]

Спасибо, Антон.

[lexich]

У меня планины на jQuery почему-то всегда писались по 2 раза. Сначало оно просто работало, но я не понимал как. А потом это рефакторилось и… получалось нечто велосипедное. Я подумал, что велосипед уже написали до меня. Теперь я пишу на Backbone с первого раза.

[vermilion1]

Захватывающая история. Каким образом Backbone связан с jQuery плагином?

[cyber_ua]

Если человек хотя бы прочитает этот простой учебник по js learn.javascript.ru/ то ему не понадобятся, подобные посты и много других (о js) которые иногда проскакивают на хабре.

[Rafael]

Должен заметить, что я рад за этого человека.

Перефразируя ваш комментарий, можно сказать, что если человек хотя бы раз прочтёт учебник по линейной алгебре, то ему не понадобится читать этот перевод и много других статей с формулами, которые есть в учебниках, и которые иногда проскакивают на хабре. Некоторые так и считают, как вы можете заметить из комментариев к вышеприведенной ссылке. А мне удобнее работать с материалом именно так. И не только мне одному.

И раз этот перевод может быть кому-то полезен, то пусть он будет здесь.

[cyber_ua]

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

[yeee737]

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

P.S.
Именно с этого учебника началось моё серьёзное знакомство с js. Сейчас читаю Javascript patterns и говорю спасибо Илье Кантору за прекрасный learn.javascript.ru.

[cyber_ua]

До этого учебника сам писал ужаснейший код и думал «нафиг те книги», но после прочтения этой книги полностью поменял свое мнение.
Спасибо Илье Кантору.

[Athari]

Давно мучает вопрос: почему в jQuery принят такой долбанутый способ вызовов методов?

Почему названия методов строчками

$('tag').fooPlugin('barMethod', bazArg)

а не традиционно функционально

$('tag').fooPlugin.barMethod(bazArg)

?

Где логика?

[SerDIDG]

Не ищите логики там, где её изначально нет )

[arXangel]

Говорят, чтобы можно было таким образом отделить приватные ( _имяМетода ) методы от публичных ( имяМетода ).

[SerDIDG]

А зачем иметь возможность из вне вызывать приватные методы? На то они и приватные.

[arXangel]

Там стоит проверка — что если метод начинается с подчеркивания "_", то такой метод нельзя вызывать. Так что, вы правы, возможности вызывать приватные методы извне — нет.

[SerDIDG]

Спасибо за разъяснение.

[Fesor]

Обычно люди по разному делают. Видел много вариантов вызовов методов. Мне больше всех понравился такой:

var somePluginInstance = $('.selector').SomePlugin().data('SomePlugin');
....
somePluginInstance.doSomeAction();

Вообще на вкус и цвет, как говориться.

[Athari]

Это ж религиозно неверным считается. Вон, в Yii что-то вроде этого было, так авторов помидорами закидали: «Ка-а-ак! Плагин jQuery и с таким неправильным синтаксисом! LRN2CODE N00B!» Вроде, во второй версии переписывать собирались.

[pxx]

Второй подход вносит хаос в привычный вид цепочности вызовов методов jQuery.

[Athari]

«Строчковые» методы вносят больше хаоса, ИМХО.

И если уж так именно функции в цепочке нужны, то можно писать $('tag').fooPlugin().barMethod(bazArg)

[Fesor]

Имеется ввиду что после вызова fooPlugin должен возвращаться массив эллементов, а не что-то от плагина. Опять же, я обычно выношу все в Data секцию и не парюсь.

[musuk]

Ещё бы пример правильного наследования jquery-плагинов.

[Fesor]

Что вы имеете в виду?

[musuk]

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

[Fesor]

Тут все очень и очень сильно зависит от реализации плагина. 90% плагинов, нутро которых я ковырял, просто невозможно безболезненно расширить. Даже больше скажу, на исходники половины из них без слез смотреть нельзя.