Простой универсальный переключатель на JavaScript

[Boomburum]

Извините, что я не по теме, но всё же напишу: очень приятно читать столь подробные и аккуратно оформленные посты! Спасибо :)

[bubuq]

 while(!/(^|\s)jsw(\s|$)/.test(el.className));

Представляется, что такие места могут свести на нет все выигрыши в производительности.

[dpp]

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

[taliban]

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

[torbasow]

classList же.

[taliban]

Я пользуюсь одним простым правилом: в ие8 нет, значит пользоваться нельзя. Увы, пока я _обязан_ поддерживать этот браузер, и я пишу код как можно проще чтоб он в нем работал. Когда мне скажут что этот браузер можно не поддерживать, я с радостью начну использовать новые технологии =)

[Serator]

Так по ссылке же есть обертка для ie8. + для нормальных браузеров нативная реализация будет, аль вообще на чистом CSS сделать посредством :checked.

[taliban]

А еще я не люблю делать двойную работу =) Если есть одно решение для ие8, я не буду делать второе для остальных и обьеденять их, потому как первое уже есть и уже работает, а ие8 нужно поддерживать. Так же я не думаю о будущем, если скажут убрать поддержку ие8, я лучше потрачу чуть больше времени, но переделаю все без костылей.

[Serator]

Так classList получается проще со всех сторон. Не нужна поддержка устаревших браузеров, просто удаляем обертку, а код переключателя остается неизменным.

[Aliance]

Этот браузер можно не поддерживать.

Я сказал — все, больше не будете поддерживать? :)

[taliban]

Ну если бы вы мне платили за работу, то я бы с радостью отказался бы от него :)

[Cake_Seller]

Вообще, если уж сильно смущает этот фрагмент, то можно так:

while( (' ' + el.className + ' ').indexOf(' jsw ') > -1 )

[lui]

А я вот так обычно пишу:
while(~ hash.indexOf(needle)) {}

[deser]

С помощью этих классов можно гибко управлять поведением страницы, обеспечивая при этом «изящную деградацию» (англ. graceful degradation) в случае выключенного JavaScript в браузере.

vk.com/graceful_degradation — приятное совпадение :)

[Razoomnick]

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

Заглядывая под кат, ожидал увидеть jQuery плагин. Или вы по каким-то причинам не пользуетесь сторонними библиотеками?

[taral]

Если бы использовался jQuery то всю реализацию можно было бы уместить в 1-3 строчки. И это уже не тянуло бы на статью

[Snowindy]

Добавьте пожалуйста ссылку на страницу с живыми примерами.
Если дело касается js, я всегда первым делом смотрю демо-сайт, и только если там есть что-то достойное, начинаю читать статью. Думаю я тут не один такой :)

[max_rip]

А что тут смотреть, тут нету анимации или чего-то сверх естественного. Просто изложен принцип. Это не готовый плагин.

[Shedal]

Спасибо за статью! Действительно, приятно читать.

Несколько замечаний:
1. Не используйте сокращённые имена классов типа jst, jsw, jsh, jsb, jseh, jseb.
Во-первых, прийдётся запоминать, что каждый из них означает, либо же искать их использование в коде.
Во-вторых, приставка js выглядит несколько странно. Во время вёрстки верстальщику не нужно знать, что переключение режима выполняется javascript'ом. Классы должны определять семантику элементов, а не сведения о способе реализации функциональности.

Я бы предложил следующие имена для этих классов:

.jst —> .expand-toggle
.jsw —> .expandable
.jse —> .expandable.expanded

Ну, или что-то в этом духе.

2. Это уже мелочь, но всё-таки — название ссылки «Ваши настоящие имя и фамилия» не говорят пользователю о том, что произойдёт, если на неё кликнуть. «Заполнить настоящие имя и фамилию» было бы лучше в этом отношении.

[dpp]

приставка js есть только у этих классов из сотен использующихся у нас
это случайность, исторически так сложилось :)

[Shedal]

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

Ваше «expandable» ни о чём не говорит, к сожалению, и, не зная что это, понять его сложнее.

По-моему, если не знать, что это, понять всё же проще, чем в случае с jsw :)

[Shedal]

Суть моих комментариев — в том, что «expandable» даёт хотя бы какую-то информацию для человека, который изначально не знает, что делает этот класс. jsw же не даёт никакой информации, кроме того, что функциональность как-то связана с javascript'ом.

[dpp]

> Во время вёрстки верстальщику не нужно знать, что переключение режима выполняется javascript'ом.
мы работаем в команде, понимать что ты делаешь и как это будет использовано коллегами — обязательное требование к хорошему сотруднику

[Shedal]

Возможно, я неверно выразился. Я имел в виду, что, когда верстальщик верстает форму с разворачиваемыми областями, наиболее полезной информацией для него является семантика.
Например, он забыл, какие классы отвечают за разворачиваемые элементы. Что он первым делом вспомнит? То, что они expandable, или то, что они реализованы при помощи js? :)

[Shedal]

Корпоративная вики — это хорошо. Но это не повод не давать человеку как можно больше информации прямо в коде.
Это примерно как именование методов в классах. Вот некоторая пища для размышлений:

function f1234() { /* ... */ }

function t() { /* ... */ }

function toggle() { /* ... */ }

function toggleExpandable() { /* ... */ }

function Expandable(element) {
    this.element = element;
    function toggle() { /* this.element. ... */ }
}

Какой вариант более читабельный?

[dpp]

Капитан! извините не удержался )
см #comment_4822637

[denisskin]

/(^|\s)jss(\s|$)/.test(...)

— такую регулярку, наверное, все же лучше заменить на:

/\bjss\b/.test(...)

[mavrin]

Не знаю, что хорошего, вы находите в статье(кроме подробного изложение), но сам подход очень плохой.
Вешать событие на весь документ, и потом вызывать каждый раз функцию, это не есть хорошо, а если у вас будет тысячу таких функций. Я конечно понимаю, что делегирование это круто, удобно и быстро, но нужно думать, где его использовать. Про навешивания javascript очень интересный подход изложил Андрей Сумин в докладе «Как не утонуть в мегабайтах JS-кода».
Он предложил на все блоки, где нужно навесить js, повесить класс, а в самом элементе в свойстве onclick, указать модуль который нужно подключить. Сумин конечно использует свой велосипед для загрузки js (можно было бы использовать AMD) и кастомные событие, но сам подход по-моему просто супер, дает очень хорошо поддерживаемый и структурированный код.

[mavrin]

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

[mavrin]

У меня такое ощущение, что мы друг друга не понимаем. В приведенном вами примере, я на всплытие не могу привести проблему. Но у меня возник вопрос в вашем коде

 e.stopPropagation();

То есть, другие элементы которые лежат выше вас уже не интересуют,(хотя у них тоже может быть класс jst), вот кстати и проблема всплытия, которую я хочу до вас донести.
По поводу скорости, поверьте ни одни Вы работаете на высоко нагруженных сайтах.
Я с вами полностью согласен, что front-end должен быть оптимизирован. Но по поводу того, что пользователь уйдет вы перебираете, конечно, если ваша страница не грузить минуту, то да уйдет.
Про масштабирование, мне сложно какие-то доводы привести. Просто это код не модульный и у него сильное связывание. И при нарастании функционала и плюшек, будет спагетти код, который я не раз видел.
Но желаю, что бы у вас все хорошо развивалось.

[mavrin]

Если для примера, то конечно подойдет. Но все таки

e.stopPropagation();

Водит в заблуждение, и хорошей практикой, считается, при проектировании интерфейсов его избегать.

[Rusan]

«Но по поводу того, что пользователь уйдет вы перебираете, конечно, если ваша страница не грузить минуту, то да уйдет.» — на опытах — на секунду дольше грузится страница (не отдаётся бекэндом, а именно грузится у пользователя) — падение активности на 5%.

[mavrin]

А как интересно делаете замеры? Было очень интересно об это узнать.

[Rusan]

Активность просто смотрим по ключевым показателям. А про замер времени на клиенте я думаю dpp лучше и правильнее расскажет.

[dpp]

dpp в ближайшее время раскажет это тут: toster.ru

[mavrin]

Нету возможности, его посетить. Но очень интересно было бы послушать.

[dpp]

это просто тестовый пример. а реализация делегирования не кончается одним jQ.live
в моей реализации скорость не зависит от количества обработчиков и является константой — в худшем случае 5 hash lookup, какое-либо взаимодействие с DOM только в случае если верстальщики не могут сверстать правильно, а это менее 10 случаев из нескольких сотен.
маштабируется уже 5й год просто отлично ;)

на счет «лучше все обойду» — не серьезно, хотя на мелких проектах может и допустимо.

[mavrin]

А вы смотрели реализацию, jQuery live до 1.6 версии, и почему они рекомендуют использовать delegate. У вас как раз классическая реализация live.
А найти нужные элементы, это не так уже и долго. Посмотрите к примеру код gmail,yandex, там ребята почему-то не цепляют обработчик на весь документ.
А наш спор без тестов бесполезен.
Да я посмотрел, ваш код на сайте, действительно, он модульный и разбитый на объекты, и я вполне верю, что он хорошо масштабируемый.

[dpp]

посмотрел delegate в 1.7.2 — принципиально тоже самое: копание в DOM в цикле (строки 3291, 3297). это и называется «классическая реализация live».

>А найти нужные элементы, это не так уже и долго.
как говорится it depends. но практика это плохая.
вот старый, не очень удачный (сохранен во время аварии) график: время инициализации страницы своего профиля my.dpp.su/badoo/cookie-5-js-1m-aggr.png (на графике среднее из миллионов хитов)

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

но да, без тестов нет смысла обсуждать дальше

[creage]

Не понял, а зачем вызывать тысячу функций?

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

[dpp]

это просто пример. статья демонстрирует подход, а не конкретную реализацию

[creage]

Во-первых, из таких вот «не успеет глазом моргнуть» выростают «падения активности в 5%» — сперва вы пишите о важности скорости, а потом говорите, что этим можно пренебречь — не понимаю.

Ну и потом, если почитать тут ответы вашей команды, то через один вы все пишите «это для примера, на продакшене у нас другой, „хороший“ код». Простите, но зачем тогда тут выкладывать «плохой» код? Идея переключения классов совершенно не нова, и смысл статьи лично для меня до сих пор не понятен.

[dpp]

про «неважно» бред, согласен

про «другой код» — сама функция три строки, нужные куски либы несколько сотен строк. код не open-source. зачем это в статье? статья не про наш фреймворк.

то, что идея не понятна, я не удивлен. вы не первый.
«переключения классов» фигня очевидная, а вот чтобы применить когда надо и свести сложную задачу к этой простой, нужно понять о чем статья :)

dpp@www1.d3 ~/badoo> grep -rwoEh 'js[twe]' _templates|wc -l
498
и для всех этих случаев у нас 1 строка жс.
если писать каждый раз, то будут сотни функций делающие похожую работу

[achekalin]

Нажимая на «Поднять наверх!», с вашего аккаунта Badoo будет списано 100 кредитов…

Напишите лучше «После нажатия на „Поднять наверх!“, с вашего аккаунта Badoo будет списано 100 кредитов…» либо «Нажимая на „Поднять наверх!“, Вы разрешаете списать с вашего аккаунта Badoo 100 кредитов…».

[mazavision]

мне понравилось)