- PVSM.RU - https://www.pvsm.ru -
Нет, это не очередной пост, говорящий вам, что вы хуже. Я здесь не для того, чтобы рассказать вам то, чего вы не знаете о веб-разработке.
Я здесь для того, чтобы спросить вас… Откуда вам знать то, чего вы не знаете о веб-разработке?
Представьте город, который вы хорошо знаете. Возможно, вы жили в нём всю свою жизнь. Вы знаете каждую улицу и переулок, каждый закоулок, не так ли? Конечно нет. Неважно, насколько хорошо вы знаете место, там, безусловно, будет лестничная клетка, дверной проем или подземный клуб, размещенный в вагоне поезда, о котором вы не знали. Но, без хождения по каждой улице города, как вы найдете эти неизвестные места? Всё неизвестное скрывается за известным, захороненное глубоко.
То же самое и с веб-разработкой: чем больше вы знаете, тем утомительней будет найти оставшиеся крупицы информации. Это и проблема.
Эту проблему стоит попытаться решить.
Если вы так считаете, это здорово. Я не преднамеренный человек, и я думаю, что это совершенно нормальный, идиотский взгляд на жизнь.
Вместо того, чтобы вы читали мои бессвязные мысли, я хотел бы оставить возможно-полезную информацию. Итак, без лишних слов, вот несколько вещей, которые я узнал за недавнее время.
Знали ли вы, что JSON.parse()
может делать умные вещи? Представьте, что вы получаете информацию из API и он возвращает вам строки true и false вместо логического типа и цену в виде строки со знаком доллара, а не число. Мы можем использовать JSON.parse()
для того, чтобы их конвертировать.
Затем мы снова преобразуем объект в строку, передавая JSON.stringify()
дополнительные параметры, чтобы вывести красивый JSON с отступами во вкладке результата ниже.
Это — как мой зеленый жакет из крокодиловой кожи. Я знаю, что это хорошая идея. Я знаю, что однажды я буду рад, что он у меня есть, но на данный момент я не уверен, что мне с ним делать.
Во всяком случае, при использовании string.replace()
, во втором параметре можно передавать функцию, которая будет вызываться при каждом совпадении. Пример ниже заменяет все обратные апострофы в тексте открывающим или закрывающим <сode>
— тегом
Отличный пример того, как знание отличается от мудрости. Я знал, что в CSS есть ключевое слово currentColor, я просто знал. Но я не был достаточно умным, чтобы понять, что это — лучший способ раскрасить SVG-иконки.
(JSfiddle автоматически отображает вкладку с JS, нас интересуют оставшиеся три)
Теперь, когда мы знаем, что количество перевешивает качество, вот еще 21 вещь, для которых я не потрудился сделать пример кода:
attr()
, чтобы получить доступ к атрибутам элемента.document.designMode = 'on'
в консоли, можно сделать всю страницу редактируемойMediaQueryList
будет создавать события, если media запросы совпадают<cоde>
или <pre>
. Например, <kbd>
для обозначения текста с клавиатуры или названия клавиш, <var>
для обозначения переменных и <samp>
для вывода программы.transform: rotate(1turn)
.text-align-last
устанавливает выравнивание последней строчки текста.CSS.supports('display', 'flex')
.<table>
— элемент имеет методы .insertRow()
[2] и .deleteRow()
[3].<details>
[4] скрывает/показывает свой контент.e.eventPhase === 2
вы можете использовать более читабельное e.eventPhase === Event.AT_TARGET
(если ввести Event.AT_TARGET
в консоли, вы увидите просто '2')document.images
содержит список всех изображений на странице. Не знаю, зачем.document.execCommand('undo')
.Node.contains()
можно узнать, содержит ли элемент другой элемент. Например: if (document.querySelector('.modal').contains(e.target)) return
Element.matches()
вернет true или false, в зависимости от того, соответствует ли элемент указанному CSS-селектору.Element.classList.toggle
добавляет класс, если он отсутствует у элемента, иначе — убирает. Когда вторым параметром передано false — удаляет указанный класс, а если true — добавляет.document.querySelectorAll('img').forEach(img => console.log(img.src))
выводит ссылки на все изображения в консоль.new URLSearchParams(location.search).get('sourceid')
вернет значение параметра 'sourceid'.Window.length
.window.requestIdleCallback(func)
вызывает функцию func во время простоя браузера.Автор: Eblonko
Источник [8]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/199880
Ссылки в тексте:
[1] Presentation API: https://www.w3.org/TR/2016/CR-presentation-api-20160714/
[2] .insertRow()
: https://developer.mozilla.org/ru/docs/Web/API/HTMLTableElement/insertRow
[3] .deleteRow()
: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/deleteRow
[4] <details>
: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
[5] TreeWalker: https://developer.mozilla.org/en/docs/Web/API/TreeWalker
[6] NodeIterator: https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator
[7] NodeFilter: https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter
[8] Источник: https://habrahabr.ru/post/312812/?utm_source=habrahabr&utm_medium=rss&utm_campaign=sandbox
Нажмите здесь для печати.