Еще раз о создании jQuery плагина или применяем на практике

[Leestex]

Ничего нового.

[ParaPilot]

Я не претендую на новизну. Просто описал путь от «нужна такая штука» до готового решения.

[LegoMushroom]

Да, может кому пригодится. Например тому кто ни разу не писал JQ плагинов или только начал изучать эту библиотеку. Спасибо за активность

[lolmaus]

Разумно было бы выложить код на GitHub.

[creage]

Рекомендую почитать про оптимизацию кода при работе с jQuery — на ваш смотреть страшно.

[ParaPilot]

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

[Derp]

Демки нет?

[ParaPilot]

Завтра все организую. И на github выложу и демку сделаю.

[polyakova]

Я конечно придираюсь, но такой код лично мне режет глаз:
if ($(this).data('collapsed') == true) { ...

[Skull]

var defaultHeight = $(control).css('defaultHeight');

Вы наверное хотели написать data вместо css?

[ParaPilot]

Да. Спасибо. Исправлю.

[Keyten]

o_O Мне иногда проще самому написать плагин, чем париться и искать что-то. Особенно такой простой, как спойлер).

> typeof method === 'object'
Используйте: Object.prototype.toString.call(method) == '[object Object]'
Иначе — например typeof new Number(2) или typeof new String('') вернёт 'object'.

И да, в код не особо вглядывался, но мне кажется, что всё это можно было написать покороче).

[eforce]

Это миф, что jquery кэширует объекты, возьмем самый большой кусок кода и увидим:

$(this) — 19 раз (где-то разные контексты, но смысл понятен, каждый такой селектор дергает DOM)

var spoiler = $(this).parent(); — он уже jquery объект, а Вы его хотите ещё сильнее завернуть $(spoiler) аж 10 раз

var Control = $(this).find('.spoilerControl'); — такая же история $(Control)

[Goobs]

$('.toggler').click(function(e){
    var $this = $(this);
    e.preventDefault();
    $($this.attr('href')).slideToggle();
});

И HTML:

<a class="toggler" href="#spoiler">Показать то, что скрыто</a>
<div id="spoiler">
    Спрятанный контент
</div>

Вот и весь спойлер. У вас же получилось ненамного меньше, чем у того же jQUI

[sody]

Понимаю, что тема статьи скорее о создании плагина в целом чем о описанном плагине, но…
В сторону bootstrap не смотрели? Есть там такой плагин collapse.

Во-первых, он должен уметь скрывать/раскрывать блоки с информацией.

Умеет.

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

Кликабельная полоса создается с помощью разметки и css и видна еще до момента загрузки джаваскрипта. Позволяет использовать не только текст, но и любой другой контент.

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

Управляется с помощью css, что дает преимущество изначально скрытого или открытого контента еще до загрузки джаваскрипта.

Ну и на вкусненькое, пусть будет анимация открытия/закрытия с возможностью отключения.

Умеет.

Кроме того можно подключить с помощью data-api(не нужно писать ни строчки джаваскрипта), не зависит от сторонних библиотек кроме jquery(можно даже поключить отдельно от других bootstrap плагинов), lazy-load если подключать через data-api — не создается объект до первого клика по триггеру, возможно построить на его основе accordion, когда может быть открыт контент только одного елемента из группы.

[ParaPilot]

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

[sody]

Так и не надо ничего тащить за собой, достаточно bootstrap-collapse.js. Данный фреймворк удобен в использовании, можно использовать любой функционал не таща за собой все остальное.

[oWeRQ]

Мне больше нравится подход JUI, когда для каждого элемента создается объект и сохраняется в data, избавляет от кучи головной боли.

Для своих плагинов использую небольшую обертку, заимствующую идеи widget factory и backbone/underscore:
gist.github.com/oWeRQ/5399632 (если кого-то заинтересует, прокомментирую код в непонятных местах и добавлю описание)