Comments 64
Извините, что я не по теме, но всё же напишу: очень приятно читать столь подробные и аккуратно оформленные посты! Спасибо :)
while(!/(^|\s)jsw(\s|$)/.test(el.className));
Представляется, что такие места могут свести на нет все выигрыши в производительности.
UFO just landed and posted this here
это код для примера, чтобы небыло зависимостей. в либе код другой
Вообще это вполне нормальная практика искать классы регуляркой, классы обычно имеют не более сотни символов, на таких крошечных данных регулярки сработают очень быстро, а удобство их использования на много лучше остальных способов.
И это я вам говорю как человек который на JS писал парсеры и парсил довольно таки разные куски текста.
И это я вам говорю как человек который на JS писал парсеры и парсил довольно таки разные куски текста.
UFO just landed and posted this here
classList же.
UFO just landed and posted this here
Я пользуюсь одним простым правилом: в ие8 нет, значит пользоваться нельзя. Увы, пока я _обязан_ поддерживать этот браузер, и я пишу код как можно проще чтоб он в нем работал. Когда мне скажут что этот браузер можно не поддерживать, я с радостью начну использовать новые технологии =)
Так по ссылке же есть обертка для ie8. + для нормальных браузеров нативная реализация будет, аль вообще на чистом CSS сделать посредством :checked.
А еще я не люблю делать двойную работу =) Если есть одно решение для ие8, я не буду делать второе для остальных и обьеденять их, потому как первое уже есть и уже работает, а ие8 нужно поддерживать. Так же я не думаю о будущем, если скажут убрать поддержку ие8, я лучше потрачу чуть больше времени, но переделаю все без костылей.
Этот браузер можно не поддерживать.
Я сказал — все, больше не будете поддерживать? :)
Я сказал — все, больше не будете поддерживать? :)
Вообще, если уж сильно смущает этот фрагмент, то можно так:
while( (' ' + el.className + ' ').indexOf(' jsw ') > -1 )
while( (' ' + el.className + ' ').indexOf(' jsw ') > -1 )
С помощью этих классов можно гибко управлять поведением страницы, обеспечивая при этом «изящную деградацию» (англ. graceful degradation) в случае выключенного JavaScript в браузере.vk.com/graceful_degradation — приятное совпадение :)
Думаю, к чему-то похожему универсальному приходит чуть ли не каждый разработчик. Потом это решение переходит из проекта в проект, потихоньку совершенствуясь.
Заглядывая под кат, ожидал увидеть jQuery плагин. Или вы по каким-то причинам не пользуетесь сторонними библиотеками?
Заглядывая под кат, ожидал увидеть jQuery плагин. Или вы по каким-то причинам не пользуетесь сторонними библиотеками?
Добавьте пожалуйста ссылку на страницу с живыми примерами.
Если дело касается js, я всегда первым делом смотрю демо-сайт, и только если там есть что-то достойное, начинаю читать статью. Думаю я тут не один такой :)
Если дело касается js, я всегда первым делом смотрю демо-сайт, и только если там есть что-то достойное, начинаю читать статью. Думаю я тут не один такой :)
Спасибо за статью! Действительно, приятно читать.
Несколько замечаний:
1. Не используйте сокращённые имена классов типа jst, jsw, jsh, jsb, jseh, jseb.
Во-первых, прийдётся запоминать, что каждый из них означает, либо же искать их использование в коде.
Во-вторых, приставка js выглядит несколько странно. Во время вёрстки верстальщику не нужно знать, что переключение режима выполняется javascript'ом. Классы должны определять семантику элементов, а не сведения о способе реализации функциональности.
Я бы предложил следующие имена для этих классов:
Ну, или что-то в этом духе.
2. Это уже мелочь, но всё-таки — название ссылки «Ваши настоящие имя и фамилия» не говорят пользователю о том, что произойдёт, если на неё кликнуть. «Заполнить настоящие имя и фамилию» было бы лучше в этом отношении.
Несколько замечаний:
1. Не используйте сокращённые имена классов типа jst, jsw, jsh, jsb, jseh, jseb.
Во-первых, прийдётся запоминать, что каждый из них означает, либо же искать их использование в коде.
Во-вторых, приставка js выглядит несколько странно. Во время вёрстки верстальщику не нужно знать, что переключение режима выполняется javascript'ом. Классы должны определять семантику элементов, а не сведения о способе реализации функциональности.
Я бы предложил следующие имена для этих классов:
.jst —> .expand-toggle
.jsw —> .expandable
.jse —> .expandable.expanded
Ну, или что-то в этом духе.
2. Это уже мелочь, но всё-таки — название ссылки «Ваши настоящие имя и фамилия» не говорят пользователю о том, что произойдёт, если на неё кликнуть. «Заполнить настоящие имя и фамилию» было бы лучше в этом отношении.
UFO just landed and posted this here
приставка js есть только у этих классов из сотен использующихся у нас
это случайность, исторически так сложилось :)
это случайность, исторически так сложилось :)
Я думаю, что проблем не возникает, только пока в памяти свежи мысли об этой части функциональности. Со временем, чтобы вспомнить, нужно будет исследовать исходный код.
Ваше «expandable» ни о чём не говорит, к сожалению, и, не зная что это, понять его сложнее.По-моему, если не знать, что это, понять всё же проще, чем в случае с jsw :)
> Во время вёрстки верстальщику не нужно знать, что переключение режима выполняется javascript'ом.
мы работаем в команде, понимать что ты делаешь и как это будет использовано коллегами — обязательное требование к хорошему сотруднику
мы работаем в команде, понимать что ты делаешь и как это будет использовано коллегами — обязательное требование к хорошему сотруднику
Возможно, я неверно выразился. Я имел в виду, что, когда верстальщик верстает форму с разворачиваемыми областями, наиболее полезной информацией для него является семантика.
Например, он забыл, какие классы отвечают за разворачиваемые элементы. Что он первым делом вспомнит? То, что они expandable, или то, что они реализованы при помощи js? :)
Например, он забыл, какие классы отвечают за разворачиваемые элементы. Что он первым делом вспомнит? То, что они expandable, или то, что они реализованы при помощи js? :)
UFO just landed and posted this here
Корпоративная вики — это хорошо. Но это не повод не давать человеку как можно больше информации прямо в коде.
Это примерно как именование методов в классах. Вот некоторая пища для размышлений:
Какой вариант более читабельный?
Это примерно как именование методов в классах. Вот некоторая пища для размышлений:
function f1234() { /* ... */ }
function t() { /* ... */ }
function toggle() { /* ... */ }
function toggleExpandable() { /* ... */ }
function Expandable(element) {
this.element = element;
function toggle() { /* this.element. ... */ }
}
Какой вариант более читабельный?
Капитан! извините не удержался )
см #comment_4822637
см #comment_4822637
/(^|\s)jss(\s|$)/.test(...)
— такую регулярку, наверное, все же лучше заменить на:
/\bjss\b/.test(...)
UFO just landed and posted this here
Не знаю, что хорошего, вы находите в статье(кроме подробного изложение), но сам подход очень плохой.
Вешать событие на весь документ, и потом вызывать каждый раз функцию, это не есть хорошо, а если у вас будет тысячу таких функций. Я конечно понимаю, что делегирование это круто, удобно и быстро, но нужно думать, где его использовать. Про навешивания javascript очень интересный подход изложил Андрей Сумин в докладе «Как не утонуть в мегабайтах JS-кода».
Он предложил на все блоки, где нужно навесить js, повесить класс, а в самом элементе в свойстве onclick, указать модуль который нужно подключить. Сумин конечно использует свой велосипед для загрузки js (можно было бы использовать AMD) и кастомные событие, но сам подход по-моему просто супер, дает очень хорошо поддерживаемый и структурированный код.
Вешать событие на весь документ, и потом вызывать каждый раз функцию, это не есть хорошо, а если у вас будет тысячу таких функций. Я конечно понимаю, что делегирование это круто, удобно и быстро, но нужно думать, где его использовать. Про навешивания javascript очень интересный подход изложил Андрей Сумин в докладе «Как не утонуть в мегабайтах JS-кода».
Он предложил на все блоки, где нужно навесить js, повесить класс, а в самом элементе в свойстве onclick, указать модуль который нужно подключить. Сумин конечно использует свой велосипед для загрузки js (можно было бы использовать AMD) и кастомные событие, но сам подход по-моему просто супер, дает очень хорошо поддерживаемый и структурированный код.
UFO just landed and posted this here
Про много функций я имел ввиду, если какое-то другое действие нужно выполнить будет(не переключение), а если к примеру вам понадобиться, где-то остановить всплытие как вы с этим будете бороться.
По поводу обхода лучше я один раз обойду при загрузке(но все надо в меру конечно), чем при каждом клике. По факту вы каждый раз ищите элемент.
Я вот как-то тяжело представляю, как вы это потом будете масштабировать.
По поводу обхода лучше я один раз обойду при загрузке(но все надо в меру конечно), чем при каждом клике. По факту вы каждый раз ищите элемент.
Я вот как-то тяжело представляю, как вы это потом будете масштабировать.
UFO just landed and posted this here
У меня такое ощущение, что мы друг друга не понимаем. В приведенном вами примере, я на всплытие не могу привести проблему. Но у меня возник вопрос в вашем коде
По поводу скорости, поверьте ни одни Вы работаете на высоко нагруженных сайтах.
Я с вами полностью согласен, что front-end должен быть оптимизирован. Но по поводу того, что пользователь уйдет вы перебираете, конечно, если ваша страница не грузить минуту, то да уйдет.
Про масштабирование, мне сложно какие-то доводы привести. Просто это код не модульный и у него сильное связывание. И при нарастании функционала и плюшек, будет спагетти код, который я не раз видел.
Но желаю, что бы у вас все хорошо развивалось.
e.stopPropagation();
По поводу скорости, поверьте ни одни Вы работаете на высоко нагруженных сайтах.
Я с вами полностью согласен, что front-end должен быть оптимизирован. Но по поводу того, что пользователь уйдет вы перебираете, конечно, если ваша страница не грузить минуту, то да уйдет.
Про масштабирование, мне сложно какие-то доводы привести. Просто это код не модульный и у него сильное связывание. И при нарастании функционала и плюшек, будет спагетти код, который я не раз видел.
Но желаю, что бы у вас все хорошо развивалось.
UFO just landed and posted this here
«Но по поводу того, что пользователь уйдет вы перебираете, конечно, если ваша страница не грузить минуту, то да уйдет.» — на опытах — на секунду дольше грузится страница (не отдаётся бекэндом, а именно грузится у пользователя) — падение активности на 5%.
это просто тестовый пример. а реализация делегирования не кончается одним jQ.live
в моей реализации скорость не зависит от количества обработчиков и является константой — в худшем случае 5 hash lookup, какое-либо взаимодействие с DOM только в случае если верстальщики не могут сверстать правильно, а это менее 10 случаев из нескольких сотен.
маштабируется уже 5й год просто отлично ;)
на счет «лучше все обойду» — не серьезно, хотя на мелких проектах может и допустимо.
в моей реализации скорость не зависит от количества обработчиков и является константой — в худшем случае 5 hash lookup, какое-либо взаимодействие с DOM только в случае если верстальщики не могут сверстать правильно, а это менее 10 случаев из нескольких сотен.
маштабируется уже 5й год просто отлично ;)
на счет «лучше все обойду» — не серьезно, хотя на мелких проектах может и допустимо.
А вы смотрели реализацию, jQuery live до 1.6 версии, и почему они рекомендуют использовать delegate. У вас как раз классическая реализация live.
А найти нужные элементы, это не так уже и долго. Посмотрите к примеру код gmail,yandex, там ребята почему-то не цепляют обработчик на весь документ.
А наш спор без тестов бесполезен.
Да я посмотрел, ваш код на сайте, действительно, он модульный и разбитый на объекты, и я вполне верю, что он хорошо масштабируемый.
А найти нужные элементы, это не так уже и долго. Посмотрите к примеру код gmail,yandex, там ребята почему-то не цепляют обработчик на весь документ.
А наш спор без тестов бесполезен.
Да я посмотрел, ваш код на сайте, действительно, он модульный и разбитый на объекты, и я вполне верю, что он хорошо масштабируемый.
посмотрел delegate в 1.7.2 — принципиально тоже самое: копание в DOM в цикле (строки 3291, 3297). это и называется «классическая реализация live».
>А найти нужные элементы, это не так уже и долго.
как говорится it depends. но практика это плохая.
вот старый, не очень удачный (сохранен во время аварии) график: время инициализации страницы своего профиля my.dpp.su/badoo/cookie-5-js-1m-aggr.png (на графике среднее из миллионов хитов)
код гмыла не откажусь посмотреть. есть не пожатый?
все зависит от задачи, если посмотреть главную гугла то там и жс с цсс прям в хтмл засунути и всякие onclick атрибуты, но этоже не значит что так всегда и нужно делать.
но да, без тестов нет смысла обсуждать дальше
>А найти нужные элементы, это не так уже и долго.
как говорится it depends. но практика это плохая.
вот старый, не очень удачный (сохранен во время аварии) график: время инициализации страницы своего профиля my.dpp.su/badoo/cookie-5-js-1m-aggr.png (на графике среднее из миллионов хитов)
код гмыла не откажусь посмотреть. есть не пожатый?
все зависит от задачи, если посмотреть главную гугла то там и жс с цсс прям в хтмл засунути и всякие onclick атрибуты, но этоже не значит что так всегда и нужно делать.
но да, без тестов нет смысла обсуждать дальше
Не понял, а зачем вызывать тысячу функций?
Вы вешаете обработчик на документ, и в коде регуляркой проверяете соответствие классу — каждый клик на любом элементе документа запускает ваш обработчик.
это просто пример. статья демонстрирует подход, а не конкретную реализацию
UFO just landed and posted this here
Во-первых, из таких вот «не успеет глазом моргнуть» выростают «падения активности в 5%» — сперва вы пишите о важности скорости, а потом говорите, что этим можно пренебречь — не понимаю.
Ну и потом, если почитать тут ответы вашей команды, то через один вы все пишите «это для примера, на продакшене у нас другой, „хороший“ код». Простите, но зачем тогда тут выкладывать «плохой» код? Идея переключения классов совершенно не нова, и смысл статьи лично для меня до сих пор не понятен.
Ну и потом, если почитать тут ответы вашей команды, то через один вы все пишите «это для примера, на продакшене у нас другой, „хороший“ код». Простите, но зачем тогда тут выкладывать «плохой» код? Идея переключения классов совершенно не нова, и смысл статьи лично для меня до сих пор не понятен.
про «неважно» бред, согласен
про «другой код» — сама функция три строки, нужные куски либы несколько сотен строк. код не open-source. зачем это в статье? статья не про наш фреймворк.
то, что идея не понятна, я не удивлен. вы не первый.
«переключения классов» фигня очевидная, а вот чтобы применить когда надо и свести сложную задачу к этой простой, нужно понять о чем статья :)
dpp@www1.d3 ~/badoo> grep -rwoEh 'js[twe]' _templates|wc -l
498
и для всех этих случаев у нас 1 строка жс.
если писать каждый раз, то будут сотни функций делающие похожую работу
про «другой код» — сама функция три строки, нужные куски либы несколько сотен строк. код не open-source. зачем это в статье? статья не про наш фреймворк.
то, что идея не понятна, я не удивлен. вы не первый.
«переключения классов» фигня очевидная, а вот чтобы применить когда надо и свести сложную задачу к этой простой, нужно понять о чем статья :)
dpp@www1.d3 ~/badoo> grep -rwoEh 'js[twe]' _templates|wc -l
498
и для всех этих случаев у нас 1 строка жс.
если писать каждый раз, то будут сотни функций делающие похожую работу
Нажимая на «Поднять наверх!», с вашего аккаунта Badoo будет списано 100 кредитов…
Напишите лучше «После нажатия на „Поднять наверх!“, с вашего аккаунта Badoo будет списано 100 кредитов…» либо «Нажимая на „Поднять наверх!“, Вы разрешаете списать с вашего аккаунта Badoo 100 кредитов…».
Напишите лучше «После нажатия на „Поднять наверх!“, с вашего аккаунта Badoo будет списано 100 кредитов…» либо «Нажимая на „Поднять наверх!“, Вы разрешаете списать с вашего аккаунта Badoo 100 кредитов…».
мне понравилось)
Sign up to leave a comment.
Простой универсальный переключатель на JavaScript