Нет, это не очередной пост, говорящий вам, что вы хуже. Я здесь не для того, чтобы рассказать вам то, чего вы не знаете о веб-разработке.
Я здесь для того, чтобы спросить вас… Откуда вам знать то, чего вы не знаете о веб-разработке?
Представьте город, который вы хорошо знаете. Возможно, вы жили в нём всю свою жизнь. Вы знаете каждую улицу и переулок, каждый закоулок, не так ли? Конечно нет. Неважно, насколько хорошо вы знаете место, там, безусловно, будет лестничная клетка, дверной проем или подземный клуб, размещенный в вагоне поезда, о котором вы не знали. Но, без хождения по каждой улице города, как вы найдете эти неизвестные места? Всё неизвестное скрывается за известным, захороненное глубоко.
То же самое и с веб-разработкой: чем больше вы знаете, тем утомительней будет найти оставшиеся крупицы информации. Это и проблема.
Эту проблему стоит попытаться решить.
Но я знаю все, что мне нужно знать
Если вы так считаете, это здорово. Я не преднамеренный человек, и я думаю, что это совершенно нормальный, идиотский взгляд на жизнь.
Что-то полезное
Вместо того, чтобы вы читали мои бессвязные мысли, я хотел бы оставить возможно-полезную информацию. Итак, без лишних слов, вот несколько вещей, которые я узнал за недавнее время.
Вкусности JSON parse и stringify
Знали ли вы, что JSON.parse() может делать умные вещи? Представьте, что вы получаете информацию из API и он возвращает вам строки true и false вместо логического типа и цену в виде строки со знаком доллара, а не число. Мы можем использовать JSON.parse() для того, чтобы их конвертировать.
Затем мы снова преобразуем объект в строку, передавая JSON.stringify() дополнительные параметры, чтобы вывести красивый JSON с отступами во вкладке результата ниже.
String.replace принимает функции
Это — как мой зеленый жакет из крокодиловой кожи. Я знаю, что это хорошая идея. Я знаю, что однажды я буду рад, что он у меня есть, но на данный момент я не уверен, что мне с ним делать.
Во всяком случае, при использовании string.replace(), во втором параметре можно передавать функцию, которая будет вызываться при каждом совпадении. Пример ниже заменяет все обратные апострофы в тексте открывающим или закрывающим <сode> — тегом
CurrentColor
Отличный пример того, как знание отличается от мудрости. Я знал, что в CSS есть ключевое слово currentColor, я просто знал. Но я не был достаточно умным, чтобы понять, что это — лучший способ раскрасить SVG-иконки.
(JSfiddle автоматически отображает вкладку с JS, нас интересуют оставшиеся три)
Теперь, когда мы знаем, что количество перевешивает качество, вот еще 21 вещь, для которых я не потрудился сделать пример кода:
- Вы можете использовать CSS функцию
attr(), чтобы получить доступ к атрибутам элемента. - Написав
document.designMode = 'on'в консоли, можно сделать всю страницу редактируемой MediaQueryListбудет создавать события, если media запросы совпадают- Есть целая куча тегов для пользовательского ввода, не только
<cоde>или<pre>. Например,<kbd>для обозначения текста с клавиатуры или названия клавиш,<var>для обозначения переменных и<samp>для вывода программы. - Можно сделать вращение по кругу с помощью
transform: rotate(1turn). text-align-lastустанавливает выравнивание последней строчки текста.- Существует Presentation API для показа контента на втором экране.
- Вы можете узнать поддержку CSS в JS. Например, вы могли бы добавить/удалить DOM-элемент если
CSS.supports('display', 'flex'). <table>— элемент имеет методы.insertRow()и.deleteRow().- Элемент
<details>скрывает/показывает свой контент. - Интерфейсы событий имеют удобные константы: если вы захотите узнать фазу обработки события, вместо
e.eventPhase === 2вы можете использовать более читабельноеe.eventPhase === Event.AT_TARGET(если ввестиEvent.AT_TARGETв консоли, вы увидите просто '2') document.imagesсодержит список всех изображений на странице. Не знаю, зачем.- Можно вызвать отмену (Ctrl+z) программно:
document.execCommand('undo'). - С помощью
Node.contains()можно узнать, содержит ли элемент другой элемент. Например:if (document.querySelector('.modal').contains(e.target)) return - Метод
Element.matches()вернет true или false, в зависимости от того, соответствует ли элемент указанному CSS-селектору. - Трио TreeWalker, NodeIterator и NodeFilter может понадобиться, например, для удаления всех комментариев в DOM.
- Метод
Element.classList.toggleдобавляет класс, если он отсутствует у элемента, иначе — убирает. Когда вторым параметром передано false — удаляет указанный класс, а если true — добавляет. - В новых браузерах можно использовать forEach для NodeList, например,
document.querySelectorAll('img').forEach(img => console.log(img.src))выводит ссылки на все изображения в консоль. - Существует инструмент для работы с запросами в URL, например,
new URLSearchParams(location.search).get('sourceid')вернет значение параметра 'sourceid'. - Я съем свою шляпу, если вы уже знали, что возвращает
Window.length. window.requestIdleCallback(func)вызывает функцию func во время простоя браузера.
Комментарии (34)
k12th
16.10.2016 20:25+28А где ссылка на оригинал? Перевод читать невозможно.
Я не преднамеренный человек
rboots
16.10.2016 22:11+5Два из трёх знал. Ещё пара редко используемых фич js:
— void (чтобы вернуть undefined вместо результата выражения)
— вычисление через запятую исполнит все, но возвратит только последнее выражение (2 + 2, 3 + 3, 4 + 4 -> 8)
— document.write — переписать html документа (или дописать, если документ ещё загружается)
— arguments.caller — ссылка на функцию, вызвавшую данную
— (new Error()).stack — получить список родительских функций в виде строки
Многие из этих фич относятся к небезопасным/bad practice, поэтому «Не повторяйте это дома, доверьте использование профессионалам».
prefrontalCortex
16.10.2016 23:41вычисление через запятую исполнит все, но возвратит только последнее выражение (2 + 2, 3 + 3, 4 + 4 -> 8)
Это, видимо, из соображений совместимости с C.
abyrkov
16.10.2016 23:39+1Ну, я прибавлю этот список хорошо знакомых фич:
Если вызвать функцию sort глобально через консоль, она возвратит Window. Но в коде это вызовет ошибку(?!)
Ошибки в setTimeout и setInterval не сломают программу.
TheShock
17.10.2016 03:19Ошибки в setTimeout и setInterval не сломают программу.
setTimeout(function () { console.log(1) }); [].nothing();
Как и наоборот. Просто на ошибке код не продолжает выполняться, но что мешает запуститься таймеру? И тогда почему ошибка в интервале должна сломать программу, просто код, запущенный в том интервале остановится и выведет сообщение.
lair
17.10.2016 00:22+8Что вам помешало указать автора оригинальной статьи?
chupasaurus
17.10.2016 04:59То, что в песочницу переводы не должны попадать?
lair
17.10.2016 11:21+6А какая разница, песочница это или нет, переводишь что-то — укажи оригинальный материал.
TheShock
17.10.2016 03:30+8Я знаю, что это хорошая идея. Я знаю, что однажды я буду рад, что он у меня есть, но на данный момент я не уверен, что мне с ним делать.
Во всяком случае, при использовании string.replace(), во втором параметре можно передавать функцию, которая будет вызываться при каждом совпадении
Странно, что для автора это удивительно, если это не новость уже десятилетие:
camelCase: function(){ return String(this).replace(/-\D/g, function(match){ return match.charAt(1).toUpperCase(); }); }, hyphenate: function(){ return String(this).replace(/[A-Z]/g, function(match){ return ('-' + match.charAt(0).toLowerCase()); }); }, capitalize: function(){ return String(this).replace(/\b[a-z]/g, function(match){ return match.toUpperCase(); }); },
На 90% статья из области «ребятки, прикиньте, я прочитал документацию!».
extempl
17.10.2016 06:38(JSfiddle автоматически отображает вкладку с JS, нас интересуют оставшиеся три)
https://jsfiddle.net/Eblonko/fbffx1xq/embedded/result,html,css/
some_x
17.10.2016 08:27+2Метод Element.classList.toggle добавляет класс, если он отсутствует у элемента, иначе — убирает. Когда вторым параметром передано false — удаляет указанный класс, а если true — добавляет.
Второй параметр не работает в IE11, не обожгитесь. Вроде есть полифил.
Aingis
17.10.2016 10:49Второй параметр — типичный пример плохого API. Да и зачем, когда есть методы
classList.add()иclassList.remove()?
MTonly
17.10.2016 16:41+1Вероятно, чтобы сделать код лаконичнее благодаря экономии на условной конструкции.
TheShock
17.10.2016 19:58+3Да и зачем, когда есть методы classList.add() и classList.remove()?
Чтобы писать
classList.toggle( "active", object.isActive ) // вместо if (object.isActive) { classList.add("active"); } else { classList.remove("active"); }
some_x
23.10.2016 07:52Во первых второй параметр описан в стандарте, поэтому об отличиях в реализации стоит знать.
Во вторых, я с вами не согласен, это хорошее api позволяющее писать меньше if/else
staticlab
17.10.2016 12:18-1В новых браузерах можно использовать forEach для NodeList, например, document.querySelectorAll('img').forEach(img => console.log(img.src)) выводит ссылки на все изображения в консоль.
Простите, что? Откуда у NodeList взялся forEach? Автор переопределил (сам или "с помощью" какой-то сторонней библиотеки) прототип NodeList?
to0n1
17.10.2016 12:42+2> NodeList.prototype.forEach < forEach() { [native code] }staticlab
17.10.2016 13:34Это всё прекрасно, но хоть бы документировали.
sl_bug
17.10.2016 14:00+1staticlab
17.10.2016 14:16Я имел в виду спецификацию.
MTonly
17.10.2016 16:54+1В спецификации DOM (W3C, WHATWG) интерфейс
NodeListпомечен как итерируемый (iterable). Итерируемые интерфейсы в ECMAScript согласно черновику Web IDL поддерживают обход с помощьюforEach().staticlab
17.10.2016 16:56Ага, спасибо. Теперь разобрался. Меня их синтаксис для "трейтов" (в частности, iterable) смутил.
AlexP11223
17.10.2016 14:08-2Я съем свою шляпу, если вы уже знали, что возвращает Window.length.
Количество фреймов, угадал не зная. Приятного аппетита.
Aingis
document.images— наследие диких времён web 1.0. Есть ещёdocument.links,document.formsи печально известныйdocument.all— все работают для обратной совместимости.Например, на Хабре
document.forms[0]— форма поиска,document.forms[2].comment_text— поле ввода комментария.А так, и правда есть много интересного, хотя большинство — давно известные фишки. Про
currentColorя даже на докладе «Приручаем SVG» рассказывал год назад.vintage
document.forms.comments_form.elements.text