Rafael Nov 17 2012 at 19:25

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

8 min

247K

Website development*JavaScript*jQuery*

Tutorial

Translation

+105

Comments 67

Keyten Nov 17 2012 at 19:41

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

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

-5

Rafael Nov 17 2012 at 19:50

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

+26

Keyten Nov 17 2012 at 20:43

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

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»

+21

Rafael Nov 17 2012 at 20:59

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

Keyten Nov 17 2012 at 21:15

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

-2

Rafael Nov 17 2012 at 21:18

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

creage Nov 18 2012 at 00:52

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

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

Rafael Nov 18 2012 at 01:29

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

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

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

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

Fesor Nov 18 2012 at 03:38

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

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

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

Rafael Nov 18 2012 at 09:56

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

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

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

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

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

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

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

-1

Fesor Nov 18 2012 at 12:45

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

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

Casufi Jan 11 2013 at 19:01

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

Fesor Jan 11 2013 at 20:09

Ну вот парочка ссылок.
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 Nov 17 2012 at 22:37

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

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

KasperGreen Feb 5 2014 at 12:55

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

Valery4 May 16 2014 at 21:40

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

Keyten May 17 2014 at 19:13

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

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

Keyten Nov 17 2012 at 21:01

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

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

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

Rafael Nov 17 2012 at 21:14

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

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

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

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

Я так думаю.

-3

Keyten Nov 17 2012 at 21:20

Вы правы

Rafael Nov 17 2012 at 21:21

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

-1

Keyten Nov 17 2012 at 22:24

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

B_Vladi Nov 18 2012 at 11:45

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

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

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

И даже не так:

var undefined = void 0;

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

mark_ablov Nov 20 2012 at 13:07

Как вариант

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

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

B_Vladi Nov 20 2012 at 22:04

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

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

KELiON Nov 20 2012 at 13:08

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

B_Vladi Nov 20 2012 at 22:28

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

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

Ну и этот код:

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

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

azproduction Nov 20 2012 at 13:12

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

Fesor Nov 20 2012 at 13:19

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

azproduction Nov 20 2012 at 14:33

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

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

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

//--

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

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

vanxant Nov 20 2012 at 19:18

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

Fesor Nov 20 2012 at 19:37

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

azproduction Nov 20 2012 at 20:07

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

Fesor Nov 20 2012 at 20:17

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

azproduction Nov 20 2012 at 20:27

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

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

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

Fesor Nov 20 2012 at 20:33

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

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

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

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

azproduction Nov 20 2012 at 20:41

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

mark_ablov Nov 20 2012 at 20:06

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

azproduction Nov 20 2012 at 20:15

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

B_Vladi Nov 20 2012 at 22:21

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

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

blabla === undefined

чем

typeof blabla === "undefined"

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

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

bullet Nov 17 2012 at 19:56

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

Rafael Nov 17 2012 at 19:58

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

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

-5

AntonShevchuk Nov 17 2012 at 20:00

habrahabr.ru/post/155107/ ;)

+10

Rafael Nov 17 2012 at 20:01

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

-2

lexich Nov 17 2012 at 23:07

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

-3

vermilion1 Nov 18 2012 at 01:27

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

cyber_ua Nov 18 2012 at 01:35

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

Rafael Nov 18 2012 at 01:47

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

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

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

-2

cyber_ua Nov 18 2012 at 01:54

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

yeee737 Nov 18 2012 at 01:53

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

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

cyber_ua Nov 18 2012 at 01:56

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

Athari Nov 18 2012 at 05:17

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

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

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

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

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

?

Где логика?

SerDIDG Nov 18 2012 at 06:14

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

-1

arXangel Nov 18 2012 at 08:34

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

SerDIDG Nov 18 2012 at 09:59

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

arXangel Nov 18 2012 at 10:02

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

SerDIDG Nov 18 2012 at 10:04

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

Fesor Nov 18 2012 at 12:58

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

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

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

Athari Nov 18 2012 at 19:37

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

pxx Nov 19 2012 at 16:28

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

Athari Nov 19 2012 at 16:56

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

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

Fesor Nov 19 2012 at 17:02

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

musuk Nov 18 2012 at 16:16

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

Fesor Nov 18 2012 at 17:26

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

musuk Nov 18 2012 at 21:45

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

Fesor Nov 19 2012 at 01:36

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

UFO just landed and posted this here

Show the best of all time