prog666 26 авг 2015 в 14:40

Модуль вкладок на es6/es2015 без jQuery и прочих зависимостей

3 мин

13K

JavaScript*HTML*

Из песочницы

Комментарии 13

stcherenkov 26 авг 2015 в 15:21

Если для вас неактуальна поддержка старых браузеров, то есть решение на чистом HTML+CSS: css-tricks.com/functional-css-tabs-revisited

prog666 26 авг 2015 в 15:31

html разметка не такая удобная и универсальная, иногда переключатели и вкладки должны находится в отдельных контейнерах. Подобные решения на HTML+CSS нужны скорее для демонстрации возможностей чем для практического использования.

romy4 26 авг 2015 в 20:11

В приведённом выше решении расположить табы и вкладки в отдельных контейнерах как раз не составит труда. Label можно вынести куда угодно, а скрытый radio и контейнер останутся на одном уровне.

prog666 26 авг 2015 в 20:41

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

xamd 26 авг 2015 в 17:55

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

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

prog666 26 авг 2015 в 17:59

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

prog666 26 авг 2015 в 18:08

Но смысл я уловил, спасибо. Следующая статья будет более обучающей.

romy4 26 авг 2015 в 20:16

Хотел уточнить, использование ключевых слов class и export default — это из какого javascript/Ecmascript?

prog666 26 авг 2015 в 20:40

да, в заголовке указано. es2015 или как его называли раньше es6

romy4 26 авг 2015 в 20:53

Спасибо :) Я как-то на автомате пропустил текст аббревиатур в заголовке

prog666 26 авг 2015 в 21:33

Не за что, могу посоветовать почитать про babel

НЛО прилетело и опубликовало эту надпись здесь

prog666 27 авг 2015 в 00:53

Насколько секунд сократилось время загрузки?

Дело же не в es6, дело в отсутствии необходимости загружать jquery, предыдущий мой такой модуль был плагином для него (jquery).

Старых — это каких?

Старых это тех которые не поддерживают такие вещи как document.querySelector и classList, хотя для последнего есть полифил ссылка на который есть в readme на github, для querySelector возможно тоже есть полифил.

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

По поводу скорости работы — дело в работе с DOM напрямую а не через оболочку jquery. Весь этот синтаксический сахар конечно потом транслируется в обычный es5 с помощью babel, там даже в репозитории есть уже готовый es5 файл, но подключать его все равно нужно с помощью browserify или подобной библеотеки для работы с commonjs модулями (что-то слышал про webpack но не пробовал пока что)

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Показать лучшие за всё время

Модуль вкладок на es6/es2015 без jQuery и прочих зависимостей

Комментарии 13

Публикации

Истории