![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_HNCUJPfJkRfyEDLwNGEywQ-1024x469.gif\")
Промисы в JavaScript на самом деле совсем не сложные. Тем не менее, многие люди находят затруднительным их понимание с первых моментов изучения. Поэтому, снизу всё будет описано способом для начинающих, чтобы читающий понял материал полностью и объемно. Помните, что промисы лежат в основе async/await и их понимание, можно сказать, что обязательно для работы с асинхронным JavaScript.
Итак, вкратце про промисы: “Представьте, что вы ребенок. Ваша мама обещает вам, что вы получите новый телефон на следующей неделе.”
\n\n\n\nВы не знаете, получите ли вы его до следующей неделе. Ваша мама может купить вам совершенно новый телефон, а может просто этого не сделать, к примеру, потому что она будет не в настроении 🙁
\n\n\n\nЭто и есть промис. От английского promise — обещать. Небольшое уточнение, пожалуйста, не усложняйте понимание другим с произношением, так как во всём русскоязычном мире принято говорить “промис” в случае с JavaScript.
\n\n\n\nИтак, у промиса есть 3 состояния. Это:
\n\n\n\n1. Промис в состоянии ожидания (pending). Когда вы не знаете, получите ли вы мобильный телефон к следующей неделе или нет.
2. Промис решен (resolved). Вам реально купят новый телефон.
3. Промис отклонен (rejected). Вы не получили новый мобильный телефон, так как всё-таки, мама была не в настроении.
Давайте переведем все это в JavaScript.
\n\n\n\n/_ ES5 _/\nvar isMomHappy = false;\n\n// Promise\nvar willIGetNewPhone = new Promise(\n function (resolve, reject) {\n if (isMomHappy) {\n var phone = {\n brand: 'Samsung',\n color: 'black'\n };\n resolve(phone); // Всё выполнено\n } else {\n var reason = new Error('mom is not happy');\n reject(reason); // reject\n }\n\n }\n);Код выше довольно выразителен и говорит сам за себя.
\n\n\n\n1. У нас есть булин isMomHappy, чтобы определить в каком расположении духа мама.
2. У нас есть промис willIGetNewPhone. Этот промис может быть как в состоянии resolved, то есть, если вы получаете мобильный телефон, а также может быть в состоянии rejected, то есть если ваша мама не в настроении и вы не получаете мобильный телефон.
3. Тут у нас стандартный синтаксис для определения нового промиса, как в MDN документации. То есть синтаксис промиса выглядит таким образом.
\n\n\n\nnew Promise(/* Выполняемая функция */ function (resolve, reject) { … } );4. Когда вам нужно это запомнить, когда результат успешен, вызывайте resolve(ваше значение при успехе), если результат не успешен, вызывайте reject(ваше значение при неудаче, соответственно). В нашем случае мама в настроении и мы получим телефон. Следовательно, мы вызываем resolve функцию с переменной phone. Если ваша мама не в настроении, мы вызовем функцию reject с reason, то есть reject(reason).
Теперь у нас есть промис, давайте применим его:
\n\n\n\n/_ ES5 _/\n...\n\n// Вызываем промис\nvar askMom = function () {\n willIGetNewPhone\n .then(function (fulfilled) {\n // yay, you got a new phone\n console.log(fulfilled);\n // output: { brand: 'Samsung', color: 'black' }\n })\n .catch(function (error) {\n // oops, mom don't buy it\n console.log(error.message);\n // output: 'mom is not happy'\n });\n};\n\naskMom();1. Мы вызываем функцию в askMom. В этой функции, мы применим наш промис willIGetNewPhone.
2. Нам надо сделать одно действие, чтобы промис был решен или отклонен, тут мы будем использовать .then и .catch.
3. В нашем примере, у нас function(fulfilled) {…} в .then. Какое значение у fulfilled? fulfilled значение это точное значение в вашем промисе resolve(значение при успехе). Следовательно, это будет phone.
4. У нас есть function(error) {…} в .catch. Какое значение будет у error? Как вы могли предположить, error значение именно то, которое вы указали в промисе reject(значение при неудаче). Следовательно, в этом случае это будет reason.
Давайте запустим этот пример и увидим результат!
\n\n\n\n\n\n\n\nДа, в промисах есть цепочки.
\n\n\n\nДавайте представим, что вы ребенок и обещали своему другу, что покажете ему новый телефон, когда вам его купят. Это будет ещё один промис.
\n\n\n\n// 2й промис\nvar showOff = function (phone) {\n return new Promise(\n function (resolve, reject) {\n var message = 'Hey friend, I have a new ' +\n phone.color + ' ' + phone.brand + ' phone';\n\n resolve(message);\n }\n );\n};В этом примере вы уже наверное поняли, что мы не вызывали reject. Так как, в принципе, это опционально.
Мы вообще можем сократить этот пример, используя promise.resolve.
// 2й промис\nvar showOff = function (phone) {\nvar message = 'Hey friend, I have a new ' +\n phone.color + ' ' + phone.brand + ' phone';\nreturn Promise.resolve(message);\n};А теперь давайте свяжем наши промисы. Вы — ребенок и можете запустить showOff промис только после промиса willIGetNewPhone.
// Вызываем промис\nvar askMom = function () {\n willIGetNewPhone\n .then(showOff) // связываем\n .then(function (fulfilled) {\n console.log(fulfilled);\n // output: 'Hey friend, I have a new black Samsung phone.'\n })\n .catch(function (error) {\n // oops, mom don't buy it\n console.log(error.message);\n // output: 'mom is not happy'\n });\n};Вот так легко связывать промисы.
\n\n\n\nПромисы асинхронны. Давайте выведем сообщение перед и после вызовом промиса.
\n\n\n\n// вызываем наш промис\nvar askMom = function () {\n console.log('before asking Mom'); // Выводим в консоль до\n willIGetNewPhone\n .then(showOff)\n .then(function (fulfilled) {\n console.log(fulfilled);\n })\n .catch(function (error) {\n console.log(error.message);\n });\n console.log('after asking mom'); // Выводим в консоль после\n}Какова последовательность ожидаемого вывода? Возможно вы ожидали.
\n\n\n\n1. before asking Mom\n2. Hey friend, I have a new black Samsung phone.\n3. after asking momНо на самом деле вывод будет таким:
\n\n\n\n1. before asking Mom\n2. after asking mom\n3. Hey friend, I have a new black Samsung phone.![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_OvKCGPqCNejlME6LzY-edA.gif\")
Почему? Потому что жизнь (или JS) никого не ждёт.
\n\n\n\nВы, ребенок, не перестали бы играть в ожидании промиса от вашей мамы. Не так ли? Это то, что мы называем асинхронность, код будет запущен без блокирования или ожидания результата. Все что должно подождать промиса перед выполнением, вы вставляете в .then .
ES 5 — поддерживают почти все браузеры. Демо код работает в ES5 среде (Все основные браузеры + NodeJS), если бы вы подключили библиотеку промисов Bluebird. Почему так? Потому что ES5 не поддерживает промисы из коробки. Другая знаменитая библиотека промисов это Q, от Криса Коваля.
\n\n\n\nES6 / ES2015 — демо код сработает прямо из коробки, так как ES6 поддерживает промисы естественным путём. Более того, с ES6 функциями, мы можем ещё круче упростить код с помощью => и использовать const и let.
/_ ES6 _/\nconst isMomHappy = true;\n\n// Промис\nconst willIGetNewPhone = new Promise(\n (resolve, reject) => { // fat arrow\n if (isMomHappy) {\n const phone = {\n brand: 'Samsung',\n color: 'black'\n };\n resolve(phone);\n } else {\n const reason = new Error('mom is not happy');\n reject(reason);\n }\n\n }\n);\n\nconst showOff = function (phone) {\n const message = 'Hey friend, I have a new ' +\n phone.color + ' ' + phone.brand + ' phone';\n return Promise.resolve(message);\n};\n\n// Вызываем промис\nconst askMom = function () {\n willIGetNewPhone\n .then(showOff)\n .then(fulfilled => console.log(fulfilled)) // fat arrow\n .catch(error => console.log(error.message)); // fat arrow\n};\n\naskMom();Обратите внимание, что все var заменены на const. Все function(resolve, reject) были упрощены на (resolve, reject) => .
ES7 — Async/await делают синтаксис визуально лучше. ES7 представил async и await синтаксис. Это делает асинхронный синтаксис визуально лучше и проще для понимания, без .then и .catch . Перепишем свой пример с ES7 синтаксисом.
/_ ES7 _/\nconst isMomHappy = true;\n\n// Промис\nconst willIGetNewPhone = new Promise(\n (resolve, reject) => {\n if (isMomHappy) {\n const phone = {\n brand: 'Samsung',\n color: 'black'\n };\n resolve(phone);\n } else {\n const reason = new Error('mom is not happy');\n reject(reason);\n }\n\n }\n);\n\n// 2й промис\nasync function showOff(phone) {\n return new Promise(\n (resolve, reject) => {\n var message = 'Hey friend, I have a new ' +\n phone.color + ' ' + phone.brand + ' phone';\n\n resolve(message);\n }\n );\n};\n\n// Вызываем промис\nasync function askMom() {\n try {\n console.log('before asking Mom');\n\n let phone = await willIGetNewPhone;\n let message = await showOff(phone);\n\n console.log(message);\n console.log('after asking mom');\n }\n catch (error) {\n console.log(error.message);\n }\n}\n\n(async () => {\n await askMom();\n})();1. Всегда, когда вам нужно возвратить промис в функцию, вы ставите спереди async к этой функции. Для примера, async function showOff(phone)
2. Всякий раз, когда вам надо вызвать промис, вам надо вставить await. Для примера, let phone = await willIGetNewPhone; и let message = await showOff(phone);
3. Используйте try { … } catch(error) { … } , чтобы словить ошибку промиса, отклоненную промисом.
Зачем они нам нужны? Как выглядел мир до промисов? Перед ответом на эти вопросы, давайте вернемся к основам.
\n\n\n\nДавайте посмотрим на эти два примера, каждый пример делает сложение двух чисел, один пример с нормальной функцией, другой с удаленной.
\n\n\n\nНормальная функция для сложения чисел.
\n\n\n\n// обычным образом складываем два числа\nfunction add (num1, num2) {\n return num1 + num2;\n}\nconst result = add(1, 2); // сразу же получаем результат 3Асинхронная функция для сложения двух чисел:
\n\n\n\n// удаленно складываем два числа\n// получаем результат вызывая API\nconst result = getAddResultFromServer('http://www.example.com?num1=1&num2=2');\n// Получаем = \"undefined\"Если вы сложите числа нормальной функцией, то вы сразу же получите результат. Тем не менее, если в вашем случае нужен удаленный запрос для получения результата, то вам нужно подождать, тут вы не сможете получить результат мгновенно.
\n\n\n\nИли таким способом вы вообще не можете знать — получите ли вы результат, потому что сервер может просто упасть, тормознуть с ответом и т. п. Вам не нужно, чтобы весь процесс был заблокирован, пока вы ждете результат.
\n\n\n\nВызов API, скачивание файлов, чтение файлов — всё это те обычные async операции, которые вы можете выполнять.
\n\n\n\nДолжны ли мы использовать промисы для каждого асинхронного запроса? Нет. До промисов, мы используем колбэки. Колбэки это просто функция, которую вы вызываете, когда получаете отдаваемый результат. Давайте модифицируем предыдущий пример, чтобы разрешить колбэк.
\n\n\n\n// Удаленно прибавляем два числа\n// Получаем результат вызывая API\nfunction addAsync (num1, num2, callback) {\n // Используем jQuery getJSON callback API\n return $.getJSON('http://www.example.com', {\n num1: num1,\n num2: num2\n }, callback);\n}\n\naddAsync(1, 2, success => {\n // callback\n const result = success; // Получаем 3\n});Синтаксис ок, зачем нам тогда промисы?
\n\n\n\nЧто если вы захотите сделать последующее асинхронное действие?
\n\n\n\nДавайте представим, что вместо простого сложения чисел единожды, нам надо будет сделать это 3 раза. В обычной функции, мы делаем это:
\n\n\n\n// Добавляем два числа обычным способом\nlet resultA, resultB, resultC;\n\n function add (num1, num2) {\n return num1 + num2;\n}\n\nresultA = add(1, 2); // resultA = 3\nresultB = add(resultA, 3); // resultB = 6\nresultC = add(resultB, 4); // resultC = 10\n\nconsole.log('total' + resultC);\nconsole.log(resultA, resultB, resultC);Как это выглядит с колбэками?
\n\n\n\n// Удаленно добавляется два числа\n// Получаем результат вызывая API\nlet resultA, resultB, resultC;\n\nfunction addAsync (num1, num2, callback) {\n // use the famous jQuery getJSON callback API\n return $.getJSON('http://www.example.com', {\n num1: num1,\n num2: num2\n }, callback);\n}\n\naddAsync(1, 2, success => {\n // callback 1\n resultA = success; // Получаем 3\n\n addAsync(resultA, 3, success => {\n // callback 2\n resultB = success; // Получаем 6\n\n addAsync(resultB, 4, success => {\n // callback 3\n resultC = success; // Получаем 10\n\n console.log('total' + resultC);\n console.log(resultA, resultB, resultC);\n });\n });\n});Этот синтаксис менее дружелюбен. Он выглядит как пирамида, но люди обычно называют подобное «колбэк адом», потому что колбэки, вложенные в колбэки, кхм, представьте, что у вас 10 колбэков и ваш код будет вложен 10 раз.
\n\n\n\nПромисы приходят на помощь. Давайте посмотрим на тот же код, но по версии промисов.
\n\n\n\n// Складываем два числа удаленно\nlet resultA, resultB, resultC;\nfunction addAsync(num1, num2) {\n// ES6 подтягивает API, который возвращает промис.\nreturn fetch(`http://www.example.com?num1=${num1}&num2=${num2}`)\n .then(x => x.json());\n}\n\naddAsync(1, 2)\n .then(success => {\n resultA = success;\n return resultA;\n })\n .then(success => addAsync(success, 3))\n .then(success => {\n resultB = success;\n return resultB;\n })\n .then(success => addAsync(success, 4))\n .then(success => {\n resultC = success;\n return resultC;\n })\n .then(success => {\n console.log('total: ' + success)\n console.log(resultA, resultB, resultC)\n });С промисами, мы выравниваем колбэк с .then. В этом случае, это выглядит чище, так как нет вложенных колбэков. Конечно же с ES7 async синтаксисом, мы можем даже улучшить этот пример, но это уже на ваше усмотрение.
Перед тем как закончить с промисами, есть кое-что, что пришло для того, чтобы облегчить работу с асинхронными данными — это Observables.
\n\n\n\nObservables — это ленивые потоки событий, которые могут выдать ноль или больше событий, а могут и вообще не закончиться.
Некоторые ключевые различия между промисами и observables:
\n\n\n\nОни отменяемые
\n\n\n\nОни ленивы/медленны
\n\n\n\nДавайте посмотрим на тоже самое демо, только написанное с помощью observables. В этом примере, я использую RxJS.
let Observable = Rx.Observable;\nlet resultA, resultB, resultC;\n\nfunction addAsync(num1, num2) {\n // Используем ES6 fetch API, который возвращает промис\n const promise = fetch(`http://www.example.com?num1=${num1}&num2=${num2}`)\n .then(x => x.json());\n\n return Observable.fromPromise(promise);\n}\n\naddAsync(1,2)\n .do(x => resultA = x)\n .flatMap(x => addAsync(x, 3))\n .do(x => resultB = x)\n .flatMap(x => addAsync(x, 4))\n .do(x => resultC = x)\n .subscribe(x => {\n console.log('total: ' + x)\n console.log(resultA, resultB, resultC)\n });Observable.fromPromise конвертит промис в observable поток
.do и .flatMap среди некоторых операторов доступных для Observables
Потоки ленивы. Наш addAsync запускается, когда мы .subscribe на него.
Observables могут делать много забавных вещей довольно легко. Для примера, delay добавляет функцию за 3 секунды с всего-лишь одной строкой кода или пробовать заново, так что вы можете делать запрос определенное количество раз.
…\naddAsync(1,2)\n .delay(3000) // Задержка в 3 секунды\n .do(x => resultA = x)\n…Узнайте про колбэки и промисы. Поймите их и используйте их. Не беспокойтесь о Observables, пока что. Все трое могут повлиять процесс разработки, но всё это будет зависеть от ситуации.
\n","date":"2021-02-25T19:37:43.000Z","title":"Промисы в JavaScript для чайников","id":"844bc916-cd14-5c39-b6a5-4373d249aa0c","excerpt":"В этой статье вы узнаете что такое промисы в JavaScript и как с ними работать
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/jspromisesfdsf.jpg"}}},{"node":{"slug":"vse-chto-nuzhno-znat-ob-async-await-tsikly-kontrol-potokov-ogranicheniya","content":"\nВ этой статье вы узнаете как использовать async/await в JavaScript, применять в них циклы и контролировать поток.
\n\n\n\n\n\n\n\nС момента своего официального дебюта в ES8, async/await стал главным нововведением в плане будущего JavaScript. Каждый день новые NPM пакеты начинают поддерживать промисы, промисы которые всё ещё будучи новыми, приводят нас к относительно старому синтаксису ( С# помните?), в наши дни вы даже можете найти util.promisify в ядре Node.js, который позволяет упростить конверсию колбэков в промисы.
Советую предварительно прочитать статью — Полное понимание синхронного и асинхронного JavaScript с Async/Await
\n\n\n\nAsync/await был неким универсальным решением, которого все так ждали при самом появлении Node. Но сейчас мы смотрим на него, как на будущее не только Node, а всего JavaScript. Пока что я не уверен в том, что есть достаточно ресурсов для того, чтобы окунуться в детали этого превосходного функционала. В этой статье мы сделаем именно это, посмотрим на ежедневные примеры использования и некоторые уловки, которые могли бы вам избавиться от зависимости caolan/async.
Перед тем как мы затронем темы параллельной работы и лимитирования в циклах, давайте вернёмся к основам. Всем известный паттерн async/await представляет собой простое ожидание промиса, получение значения и продолжение функции, давайте рассмотрим момент, когда нам надо получить данные пользователя и основываясь на объекте пользователя, получить конкретный новостной поток, это может быть легко реализовано с помощью добавления async нашей функции getUser и последующего использования await перед каждым запросом функции, возвращающей промис:
const getUser = async (query) => {\n const user = await Users.findOne(query);\n const feed = await Feeds.findOne({ user: user._id });\n \n return { user, feed };\n};\n\n// getUser will return a promise\ngetUser({ username: 'test' }).then(...);Простой пример использования, который бы сработал на любой промисообразной функции или библиотеке, но что если мы хотим использовать старые добрые колбэки с промисами? Если вы уже применяли petkaantonov/bluebird, то вы возможно уже знакомы методом promisify, к большой радости, если вы используете Node 8.0 и выше, то вы можете сэкономить несколько минут своего времени и не устанавливать этот модуль, а вместо этого использовать схожий функционал, доступный уже в самом Node, а именно Util#promisify, который конвертирует error first колбэки (Это колбэки, которые передают ошибку и данные, первый аргумент сохраняется за объектом ошибки, то есть если произойдёт ошибка, то он вернётся с первым аргументом err. А за вторым аргументом колбэка сохраняются данные любой успешной операции, при этом err будет выставлен на null и все данные будут переданы во втором аргументе)
const fs = require('fs');\nconst { promisify } = require('util');\n\n// Function#bind as needed\nconst readFile = promisify(fs.readFile);\nconst writeFile = promisify(fs.writeFile);\n\nconst transform = () => /* ... */;\n\nconst transformFileAsync = async (source, dest) => {\n const data = await readFile(source);\n // Делаем некоторое изменение \n const transformedData = tranform(data);\n \n await writeFile(dest, transformedData);\n};\n\ntransformFileAsync('x.js', 'y.js').then(...).catch(...);Обратите внимание, что с v9.4.0, возвращение нескольких аргументов с Util#promisify доступно только внутри Node и если вы находитесь вне среды Node.js, то вы можете применить Bluebird, а именно Promise#promisify, как и указывалось выше.
Один факт, который вы должны помнить, невзирая на некоторые неверные представления, бушующие вокруг этой темы — async/await это не просто синтаксический сахар промисов, он ещё и несёт в себе свойства промисов, которые могут очень помочь при дебаггинге. Одним из огромных преимуществ в плане дебаггинга и возможностей обработки ошибок является всемогущий, но навряд ли когда-либо кем-то любимый try/catch блок. Отлов синхронных и асинхронных ошибок внутри одного блока кода ещё никогда не был так прост.
Чтобы показать это, давайте напишем промис, который сработает через 100 миллисекунд.
\n\n\n\nconst PromiseThatThrows = (message) => new Promise((resolve, reject) => {\n // Появится после 100мс с новой ошибкой\n setTimeout(() => reject(new Error(message))), 100);\n};Мы можем ловить ошибки из этого промиса в async функции, используя обычный try/catch блок, хоть следующая строка выкинет синхронную ошибку, она никогда не будет сработана:
const throwsLater = async () => {\n await PromiseThatThrows('Some error');\n};\n\nasync () => {\n try {\n // Обратите внимание, что без await\n // ошибка никогда не будет\n // отловлена\n await throwsLater;\n } catch (error) {\n console.log(error.message);\n // Выведет: Some error\n }\n}Как и с catch в промисе, вы можете отловить ошибку, происходящую в потоке:
const throwsLater = async () => {\n await PromiseThatThrows('Some error');\n};\n\nasync () => {\n try {\n // Обратите внимание, что без await\n // ошибка никогда не будет\n // отловлена\n await throwsLater;\n } catch (error) {\n console.log(error.message);\n // Выведет: Some error\n }\n}Запускаете ли вы таски параллельно, планируете цикл или создаёте каскадируемую структуру или пайплайн, async/await может упростить то, во что превращается ваш процесс, в коде с эффективным и читаемым контролем потока. Давайте пробежимся по популярным паттернам:
Нет конкретного синтаксиса для параллельного выполнения с помощью async/await, но мы можем применить Promise#all с массивом промисов, чтобы получить ожидаемые результаты:
const [user1, user2] = await Promise.all([db.get('user1'), db.get('user2')]);Promise#all комбинирует в себе список промисов в одном, другом промисе, который отдаст все готовые значения этих промисов в массиве, когда те будут выполнены. Это происходит параллельно и нам не нужно идти на какие-либо ухищрения и выходить за пределы этой простой и элегантной функции.
Пожалуй самый малоизвестный герой саги об async/await это таймауты в промисах. Это эффективно и необходимо, особенно тогда, когда используется в контексте цикла (смотрите отложенный цикл ниже), мы можем оборачивать обычные таймеры (setTimeout, setImmediate) в промисы, например как тут:
const immediatePromise = () => new Promise((resolve) => setImmediate(resolve));\n\nconst timeoutPromise = (timeout) => new Promise((resolve) => setTimeout(resolve, timeout));Мы можем пустить эти функции в дело, создав асинхронную паузу (без блокирования процесса), между двумя функциями, вне зависимости от того синхронные они или асинхронные:
\n\n\n\nconst z = async () => {\n await x();\n await timeoutPromise(1000); // Wait 1 second\n \n // Можете рекурсировать z, если надо\n return y();\n}Таким образом мы никогда не покинем контекст функции, что ведёт к более элегантному коду, который использовался должным образом.
\n\n\n\nКонтролировать потоки невообразимо легко с помощью async/await, но моя любимая тема в них это циклы, простой асинхронный цикл может быть представлен несколькими способами и конечно же, он будет выполняться параллельно. Поехали.
\n\n\n\nЦикл по заданному количеству элементов, который делает ряд асинхронных операций, в нашем примере, который будет ниже, на каждом шаге цикл будет останавливаться, чтобы подтянуть нужную информацию из базы данных и вывести результат в консоль, а затем продолжить уже с следующим элементом, и таким образом один за одним создаётся последовательный цикл:
\n\n\n\nasync (items) => {\n for (let i = 0; i < items.length; i++) {\n const result = await db.get(items[i]);\n console.log(result);\n }\n}Мы можем смело применить концепцию таймаутов в нашем цикле, для примера, если нам нужно создать метод, который бы добавлял произвольное число в массив каждую секунду на протяжении десяти секунд, мы бы могли использовать setTimeout и setImmediate с счетчиком или цикл ожидающий timeoutPromise, который вы увидите ниже:
const randForTen = async () => {\n let results = [];\n \n for (let i = 0; i < 10; i++) {\n await timeoutPromise(1000);\n results.push(Math.random());\n }\n \n return results;\n}И мы можем уйти ещё дальше, применив условные операторы с setInterval, на примере цикла while:
const runFor = async (time, func, interval) => {\n // Запуск интервала до истечения времени\n while (time > Date.now()) {\n await timeoutPromise(interval);\n // Обратите внимание, что вам нужно учесть\n // время выполнения функции func()\n // если она асинхронная\n func();\n }\n};\n\nrunFor(Date.now() + 2000, () => console.count('time'), 1000);\n// Вывод:\n// time: 1\n// time: 2Если это работает параллельно, делайте это параллельно. Параллельные циклы могут быть созданы добавлением промиса в массив. Сам промис при этом обратится в значение, следовательно все промисы запустятся в одно и тоже время и каждый будет иметь своё время для завершения, конечные результаты будут автоматически сгруппированы Promise#all:
async (items) => {\n let promises = [];\n \n for (let i = 0; i < items.length; i++) {\n promises.push(db.get(items[i]));\n }\n \n const results = await Promise.all(promises);\n console.log(results);\n}Это можно сделать куда более элегантно с Array#map и это куда более функциональнее для применения в реальных кейсах, делая маппинг массива элементов в массив промисов и ожидая их значение.
async (items) => {\n // Помните, что асинхронные функции возвращают промисы\n const promises = items.map(async (item) => {\n const result = await db.get(item);\n // Вывод в консоль результатов по их завершению\n console.log(result);\n return result;\n });\n const results = await Promise.all(promises);\n console.log(results);\n}Ещё одной не очень изученной темой является выставление ограничений для контроля общего количества выполняемых задач параллельно с async/await. Если вы заядлый пользователь coalan/async, то скорее всего уже использовали Async#parallelLimit или Async#eachLimit, но не пугайтесь, установка ограничений возможна. Сейчас мы вернёмся к нашей магии промисов и начнём гонку (от promise.race())!
Promise#race возвратит промис, который решится в тот момент, когда первый элемент из заданного списка промисов будет полностью выполнен.
Подробно про промисы можно прочитатть в этой статье — Промисы для чайников
\n\n\n\nПростой race можно создать, передав список промисов, который в нашем случае, вернёт асинхронную функцию, которая решится за произвольное количество времени:
\n\n\n\nconst randAsyncTimer = (i) => {\n // Таймаут в одну секунду\n const timeout = Math.floor(Math.random() * 1000);\n return new Promise((resolve) => setTimeout(() => resolve(i), timeout));\n};\n\nasync () => {\n let calls = [randAsyncTimer(1), randAsyncTimer(2), randAsyncTimer(3)];\n // Начинаем гонку\n const result = await Promise.race(calls);\n console.log(result);\n // Возможные выводы будут от 1 до 3\n}Первый решенный промис и победит в гонке, став результатом выведенным в консоль.
\n\n\n\nМы можем использовать почти всё, что мы обсудили выше, для создания функции, которая выполняет другую асинхронную функцию параллельно с заданным лимитом. Реальным примером тут будет процесс создания списка скриншотов страниц, но только 5 за раз.
\n\n\n\nЧтобы сделать это с промисами и чистым async/await, нам понадобиться получить способ хранения промисов, которые уже сейчас запущены или другими словами, которые ещё не решены. К сожалению, это невозможно сделать при помощи стандартной спецификации промисов, поэтому мы будем использовать Set для хранения и удаления промисов, которые запущены в данный момент:
async (promises) => {\n let inFlight = new Set();\n \n return promises.map((promise) => {\n // Добавляет промис в inFlight Set\n inFlight.add(promise);\n // Удаляет промис из Set, когда тот решён\n promise.then(() => inFlight.delete(promise));\n });\n}Далее мы применим Set.size, чтобы проверить общее число запущенных промисов, это позволит нам определить сколько ещё итераций нашего цикла мы можем продолжить.
Далее, мы используем Promise#race как часть нашего арсенала по контролю потока. Что нам нужно, так это способ остановить итерирование цикла (в этом случае Array#map) до момента, пока следующий промис будет решён (мы будем использовать race для этого) и проверить то каково количество запущенных промисов и не превышает ли оно нужный нам лимит, если да, то мы применим ещё один race. Это довольно легко сделать при помощи следующего while цикла:
while(inFlight.size >= limit) {\n await Promise.race(inFlight);\n}Объединив оба, мы сможем закончить с parallelLimit:
const parallelLimit = async (funcList, limit = 10) => {\n let inFlight = new Set();\n \n return funcList.map(async (func, i) => {\n // Придерживаем цикл, другим циклом\n // пока следующий промис решается\n while(inFlight.size >= limit) {\n await Promise.race(inFlight);\n }\n \n console.log(`STARTING ROUND->${i} SIZE->${inFlight.size}`);\n \n const promise = func();\n // Add promise to inFlight Set\n inFlight.add(promise);\n // Добавляем промис inFlight Set\n await promise;\n inFlight.delete(promise);\n });\n};\n(async () => {\n const timeoutPromise = (timeout) => {\n return new Promise((resolve) => setTimeout(resolve, timeout));\n };\n const waitTwoSeconds = async () => await timeoutPromise(2000);\n const promises = await parallelLimit([\n waitTwoSeconds,\n waitTwoSeconds,\n waitTwoSeconds,\n waitTwoSeconds,\n waitTwoSeconds\n ], 2);\n \n await Promise.all(promises);\n console.log(\"DONE\");\n})();В этой статье вы узнаете как использовать async/await в JavaScript, применять в них циклы и контролировать поток.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/controlflownsk.jpg"}}},{"node":{"slug":"polnoe-ponimanie-syncronnogo-i-asyncronnogo-javascript-s-async-await","content":"\nВ этой статье вы узнаете о том, что такое синхронное и асинхронное программирование в JavaScript и как применяя эти знания работать с Async/Await.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_WjaiS6QK3WvUeD6cNyB3rw.jpeg\")
Недавно мы вели беседу с несколькими начинающими JS разработчиками, относительно того, как JS распределяет память и как парсится код, ну и само собой как он выполняется. Это одна из самых важных тем, которая никогда не являлась частью какой-либо программы обучения, но её, в принципе и не обязательно знать, чтобы написать программу на JavaScript. Такие темы очень важны для любопытных разработчиков, которые серьёзно относятся к своему делу. Я решил написать о ней, так как я нахожу её довольно неоднозначной, а люди имеют свойство сравнивать вещи, в особенности это склонны делать те, кто знаком с такими языками программирования как PHP, C++, Java и т.д, но учтите, что JavaScript это дикий зверь и с самого начала у меня он забрал довольно прилично времени для того, чтобы осознать некоторые важные аспекты, например то, как будучи однопоточным, JavaScript может быть синхронным и неблокируемым процессом?
\n\n\n\nТеперь перед тем как мы копнем глубже, давайте проясним основную концепцию и разницу между JavaScript Engine (движок) и JavaScript Run-time Environment.
\n\n\n\nДвижок JavaScript это программа, которая используется для обработки заданного кода и конвертирования его в конкретные команды для их выполнения.
\n\n\n\nС другой стороны, JavaScript Run-time Environment это среда, отвечающая за создание экосистемы с возможностями, сервисами и поддержкой, такими как массивы, функции, ключевые библиотеки и тп, которые необходимы для того, чтобы код запустился верно.
\n\n\n\nПочти все браузеры имеют на борту JavaScript движок. Самые популярные это V8 в Google Chrome и Node.js, SpiderMonkey от Мазилы, Chakra для IE и т.д. Хоть все эти браузеры и выполняют JavaScript по-разному, но под капотом, они все работают по старой доброй модели:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_FpbITfdk2y8l2YnqXuY58w.png\")
Call Stack, Web APIs, Event loop, асинхронная очередь заданий, очередь на рендер и т.д. Все мы слышали эти шумные термины в нашей ежедневной работе. В совокупности, все они работают вместе, чтобы перевести и выполнить синхронные и асинхронные блоки кода, которые мы пишем каждый день. Давайте заглянем глубже в эту модель и попытаемся понять, что они делают и что самое важное — как они это делают.
\n\n\n\nЧто означает синхронность? Скажем, что у нас есть 2 строчки кода. Первая идет за второй. Синхронность означает то, что строка 2 не может запуститься до тех пор, пока строка 1 не закончит своё выполнение.
\n\n\n\nJavaScript сам по себе однопоточный, что означает то, что только один блок кода может запускаться за раз. Так как движок JS выполняет наш код, обрабатывая строку за строкой, он использует один стек вызова, чтобы продолжать отслеживать код, который выполняется в соответствии с установленным порядком. Тоже самое, что и делает стек — структура данных, которая записывает строки выполняемых инструкций и выполняет их в стиле LIFO, то есть Last In First Out, что переводится как, “последний пришел — первый обслужен”. Давайте посмотрим на живом примере как это происходит и работает, вот function foo() { foo() отправляется в стек и затем, когда выполнение foo() доходит до return;} foo() прекращается и выкидывается из стека вызовов.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_k62uibx1CIMcNkKwCq38iA.png\")
Что происходит в Exercise 1: Итак, схема выше показывает нам типичное линейное выполнение кода. Когда код из трех console.log объявлений отдается в JS.
Шаг 1: console.log(\"Print 1\") отправляется в стек вызовов и выполняется, после того, как процесс завершится, он будет выкинут из стека. Теперь стек пуст и готов к следующим инструкциям на выполнение.
Шаг 2: Следующей инструкцией на выполнение является console.log(\"Print 2\");, который также отправляется в стек и после выполнения оттуда также выкидывается. Всё повторяется до тех пор, пока не останется ничего для выполнения.
Давайте посмотрим на следующий пример:
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_H7tHQial9jWqjWysxK_Ycg.png\")
Exercise 2: что же тут происходит на самом деле:
Шаг 1: В стек вызовов попадает первое выполняемое объявление нашего скрипта — вызов функции First(). Во время выполнения в области видимости функции First(), наш движок встречает вызов ещё одной функции — Second().
Шаг 2: Следовательно, вызов функции Second() отправляется в стек вызовов и движок начинает выполнение её содержимого, снова встречаясь с ещё одной функцией Third() внутри Second().
Шаг 3: Функция Third() также отправляется в стек запросов и движок начинается её выполнение. Пока функции Second() и First() находятся в стеке и ждут своей очереди в соответствии с порядком.
Шаг 4: Когда движок сталкивается с return; внутри функции Third(), то это означает завершение Third(). Следовательно Third() выкидывается из стека как завершенное исполнение. На этом моменте движок возвращается к выполнению Second().
Шаг 5: Итак, как только движок столкнется с return;, функция Second() будет выкинута из стека и начнется выполнение First(). Теперь тут нет объявления return внутри области видимости First(), так что выполнится только код до конца его области видимости и First() будет выкинут из стека на шаге 6.
Вот то, как браузер работает с синхронными задачами без привлечения чего-либо ещё, кроме “легендарного” стека вызовов. Но всё становится куда сложнее, когда JavaScript сталкивается с асинхронными задачами.
\n\n\n\nЧто такое вообще — асинхронность? В отличие от синхронности, асинхронность это модель поведения. Предположим, что у нас есть две строчки кода, первая за второй. Первая строка это код которому нужно время. Итак, первая строка начинает запуск в фоновом режиме, позволяя второй строке запуститься без ожидания завершения первой строки.
\n\n\n\nНам нужно такое поведение в случае, когда что-то подтормаживает и требует времени. Синхронность может казаться прямолинейной и незатейливой, но всё же может быть ещё и медленной. Такие задачи, как обработка изображений, операции с файлами, создание запросов сети и ожидание ответа — всё это может тормозить и быть долгим, производя огромные расчеты в 100 миллионов циклов итераций. Так что такие вещи в стеке запросов превращаются в “задержку”, ну или “blocking” по-английски. Когда стек запросов заблокирован, браузер препятствует вмешательству пользователя и выполнению другого кода до тех пор, пока “задержка” не выполнится и не освободит стек запросов. Таким образом асинхронные колбэки (callback) используются в таких ситуациях.
\n\n\n\nПример: Видимо функция setTimeout() это простейший способ продемонстрировать основы асинхронного поведения.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_qjshm7qjEtLTPUDwjFuHBg.png\")
Exercise 3: Давайте рассмотрим стек запросов, который только что увидели:
Шаг 1: Как и обычно console.log(\"Hello \") отправляется в стек первым и сразу же из него выкидывается после выполнения.
Шаг 2: setTimeout() отправляется в стек, но обратите внимание на то, что console.log(\"Siddhartha\") не может сразу выполниться, так как стоит отсрочка на 2 секунды. Так что пока эта функция для нас исчезнет, но мы позже разберем этот вопрос.
Шаг 3: Само собой, следующая строка это console.log(\" I am \"), которая отправляется в стек, выполняется и тут же выкидывается из него.
Шаг 4: Сейчас стек запросов пуст и в ожидании.
\n\n\n\nШаг 5: Внезапно console.log( \"Siddhartha\" ) обнаруживается в стеке, после 2-х секунд задержки. Далее setTimeout() выполняется и сразу после этого выкидывается из стека. На 6-м шаге, наш стек оказывается пустым.
Это говорит о том, что пусть даже JavaScript и однопоточный, мы можем достичь согласованности действий через асинхронное исполнение задач.
\n\n\n\nТеперь у нас осталось несколько вопросов:
\n\n\n\nВопрос 1: Что случилось с setTimeout()?
Вопрос 2: Откуда оно вернулось?
Вопрос 3: И как это вообще произошло?
И тут появляется Event Loop (Или цикл обработки событий) и Web API. Давайте представим каждого из вышесказанных и ответим на эти три вопроса в нашей следующей схеме.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_RkX7j_slzq7VC8_pwxG9jw-561x1024.png\"){kind=spacer}
Exercise 4: Давайте разберемся.
Шаг 2: С этого момента setTimeout(callback, 2000) отправляется в стек запросов. Как мы можем видеть, тут имеются компоненты callback и задержка в 2000ms. setTimeout() не является частью JavaScript движка, это по сути Web API включенное в среду браузера как дополнительный функционал.
Шаг 3: Итак, Web API браузера берет на себя callback и запускает таймер в 2000ms, оставляя на фоне setTimeout(), которое сделало свою работу и выкинуто из стека. Вот и ответ на первый вопрос.
Шаг 4: Следующая строка в нашем скрипте это console.log( \"I am\" ), отправленное в стек и выкинутое оттуда после выполнения.
Шаг 5: Теперь у нас есть callback в WebAPI, который собирается сработать по прошествии 2000ms. Но WebAPI не может напрямую как попало закидывать что-то в стек запросов, потому что это может создать прерывание для другого кода, выполняемого в JavaScript движке, именно в этот момент. Так что callback поставится в очередь выполнения задач после 2000ms. А теперь WebAPI пуст и свободен.
\n\n\n\nШаг 6: Цикл событий или Event Loop — ответственный за взятие первого элемента из очереди задач и передачу его в стек запросов, только тогда, когда стек пуст и свободен. На этом шаге нашего уравнения, стек запросов пуст.
\n\n\n\nШаг 7: Итак, callback отправлен в стек запросов, так как он был пуст и свободен. И тут же выполнился. Так что ответ на второй вопрос готов.
\n\n\n\nШаг 8: Далее идет выполнение кода console.log(\"Siddhartha\"), который находится в области видимости callback, следовательно, console.log(\"Siddhartha\") отправляется в стек запросов.
Шаг 9: После того, как console.log(\"Siddhartha\") выполнен, он выкидывается из стека запросов и JavaScript приходит к завершению выполнения callback. Который в свою очередь после своего завершения будет выкинут из стека запросов. А вот и ответ на вопрос как.
Итак, это была довольно простая демонстрация происходящего, но всё может стать сложнее в некоторых ситуациях, например тогда, когда есть несколько setTimeout в очереди — в общем результаты разнятся от того что обычно ожидается.
Далее мы попытаемся понять синтаксис async/await, погружаясь ещё глубже в то, что же это на самом деле и как это работает.
У большинства разработчиков неоднозначное отношение к JavaScript, отчасти из-за того, что они становятся жертвами одного из его лучших качеств: он легко учится, но тяжело применяется. Это легко подметить взглянув на то, сколько разработчиков склонны полагать, что этот язык работает сугубо однопоточно, но на самом деле всё происходит по-другому если взглянуть под капот. Именно эта разница проявляется в деталях и вызывает разочарование.
\n\n\n\nДля примера, я не сомневаюсь в том, что изменения в стандартах вызвали у многих из вас недопонимание о поведении языка, например как с классами. В JavaScript нет классов, в реальности JavaScript использует Prototypes, синглтон объекты, из которых наследуются другие объекты. По факту, все объекты в JavaScript имеют прототип из которого они наследуются. Это означает то, что классы в JS на самом деле не ведут себя как классы. Класс это схема для создания экземпляров объекта, а prototype это экземпляр, которому другие экземпляры объекта передают работу, prototype это не схема и не шаблон, он просто есть и всё.
\n\n\n\nИменно поэтому вы можете добавить новый метод для Array и тут же все массивы смогут его использовать. Это можно сделать в среде выполнения, затронув объект, ставший экземпляром.
\n\n\n\nvar someArray = [1, 2, 3];\nArray.prototype.newMethod = function() {\n console.log(‘I am a new method!’);\n};\n\nsomeArray.newMethod(); // I am a new method!\n\n// Код выше был бы невозможен с реальными классами, так как изменение схемы, не изменяет того, что было сделано с ним.В общем, классы в JavaScript это синтаксический сахар для прототипизирования.
\n\n\n\nЯ хочу тут сделать акцент на том, что вам надо выучить то, как язык работает на самом деле, кроме своего синтаксиса, если вы хотите полностью понять его возможности и ограничения.
\n\n\n\nАсинхронные функции это дополнение к языку, уже включенное в последний драфт EcmaScript. Вы можете смело их использовать с применением Babel.
\n\n\n\nasync/await пытается решить одну из главных головных болей языка со времен его появления: это асинхронность. То, как работает концепция асинхронного кода, вы прочитали в первой части этой статьи, если вы ещё не поняли, то обязательно перечитайте и поймите перед тем как читать дальше.
На протяжении многих лет у нас было несколько способов работы с асинхронностью без всякого сумасшествия в коде. В большинстве случаев, мы полагались просто на Callbacks:
setTimeout(function() {\n console.log(\"This runs after 5 seconds\");\n}, 5000);\n\nconsole.log(\"This runs first\");Всё это хорошо, но что если мы столкнемся с последовательностью?
\n\n\n\ndoThingOne(function() {\n doThingTwo(function() {\n doThingThree(function() {\n doThingFour(function() {\n // Oh no\n });\n });\n });\n});То, что вы видите выше иногда называется Pyramid of Doom и Callback Hell.
\n\n\n\nПромисы это очень мудрый и хороший способ работы с асинхронным кодом.
\n\n\n\nВ этой статье вы можете понять с самого начала, что такое промисы и как они работают — Промисы в JavaScript для чайников.
\n\n\n\n
Промис это объект, который представляет собой асинхронный таск, который должен завершиться. При использовании это выглядит как-то так:
function buyCoffee() {\n return new Promise((resolve, reject) => {\n asyncronouslyGetCoffee(function(coffee) {\n resolve(coffee);\n });\n });\n}buyCoffee возвращает промис, который является процессом покупки кофе. Функция resolve указывает промису на то, что он выполнен. Он получает значение как аргумент, который будет доступен в промисе позже.
В самом экземпляре промиса есть два основных метода:
\n\n\n\nthen — запускает колбек, который вы передали, когда промис завершен.
catch — запускает колбек, который вы передали, когда что-то идет не так, что вызывает reject вместо resolve. Reject вызывает как вручную, так и автоматически, если необработанное исключение появилось внутри кода промиса.
Важно: промисы которые были выкинуты из-за исключения, поглотят это исключение. Это означает то, что если ваши промисы не связаны должным образом или нет вызова catch в каком-либо промисе из цепочки, то вы обнаружите, что ваш код просто втихую порушится, что может быть очень разочаровывающе, так что избегайте таких ситуаций.
У промисов есть и другие очень интересные свойства, которые позволяют им быть связанными. Предположим, что у нас есть другие функции, которые отдают промис. Мы могли бы сделать так:
\n\n\n\nbuyCoffee()\n .then(function() {\n return drinkCoffee();\n })\n .then(function() {\n return doWork();\n })\n .then(function() {\n return getTired();\n })\n .then(function() {\n return goToSleep();\n })\n .then(function() {\n return wakeUp();\n });В этом случае использование колбеков было бы ужасным для поддержания кода и его чистоты.
Если вы не использовали промисы, то код выше может выглядеть непонятным, так как промисы, которые отдают промисы в своем методе then, вернут промис, который решается только когда возвращенный промис сам решается. И они сделают это со значением возвращенного промиса. В общем извините, по-другому это нельзя сказать.
А вот и пример:
\n\n\n\nconst firstPromise = new Promise(function(resolve) {\n return resolve(\"first\");\n});\nconst secondPromise = new Promise(function(resolve) {\n resolve(\"second\");\n});\nconst doAllThings = firstPromise.then(function() {\n return secondPromise;\n});\ndoAllThings.then(function(result) {\n console.log(result); // This logs: \"second\"\n});Итак, мы уже почти подошли к самому интересному.
\n\n\n\nAsync функции, это функции, которые возвращают промисы. Это так. Вот почему я выделил время, чтобы кратко объяснить, что же такое промисы, так как чтобы реально понять Async/Await, вам надо знать то, как работают эти самые промисы. Это как с примером про классы в JavaScript, где вам нужно понимать прототипирование.
Async функции. Они объявляются добавлением слова async, например async function doAsyncStuff() { …code }
Ваш код может встать на паузу в ожидании Async функции с await
Await возвращает то, что асинхронная функция отдаёт при завершении.
Await может быть использовано только внутри async функции.
Если асинхронная функция выдает исключение, то оно поднимется к родительской функции, как в обычном JavaScript и может быть перехвачено с try/catch. Как и в промисах, исключения будут проглочены, если они не будут перехвачены где-нибудь в цепочке кода. Это говорит о том, что вы всегда должны использовать try/catch, всякий раз когда запускается цепочка вызовов Async функций. Хорошей практикой является включение хотя бы одного try/catch в каждую цепочку, если только в игнорировании этого совета нет абсолютной необходимости. Это даст одно единственное место для работы с ошибками во время работы async и сподвигнет вас правильно связать ваши запросы async функций.
Давайте посмотрим на код:
\n\n\n\n// Просто рандомные асинхронные функции, работающие со значением\nasync function thingOne() { … }\nasync function thingTwo(value) { … }\nasync function thingThree(value) { … }\nasync function doManyThings() {\n var result = await thingOne();\n var resultTwo = await thingTwo(result);\n var finalResult = await thingThree(resultTwo);\n return finalResult;\n}\n// Вызовите doManyThings()Это то, как выглядит async/await, он очень схож с синхронным кодом, а синхронный код куда проще понять.
Итак, теперь doManyThings() это тоже асинхронная функция, как нам ожидать её? Да никак. Не с нашим новым синтаксисом. У нас есть три варианта:
2. Запустите её внутри ещё одной асинхронной функции, обернутой в блок try/catch.
3. Или используйте как промис.
\n\n\n\n// Вариант 1:\ndoManyThings();\n// Вариант 2:\n(async function() {\n try {\n await doManyThings();\n } catch (err) {\n console.error(err);\n }\n})();\n// Вариант 3:\ndoManyThings().then((result) => {\n // Делаем штуки, которым нужно подождать нашей функции\n}).catch((err) => {\n throw err;\n});Снова функции, которые возвращают промисы.
Итак, под конец я бы хотел показать несколько примеров того, как async/await приблизительно переходят в промисы. Я надеюсь, что это поможет вам увидеть то, как async функции выполняют роль синтаксического сахара для создания функций, которые отдают и ожидают промисы.
Простая async функция:
// Async/Await version\nasync function helloAsync() {\n return \"hello\";\n}\n// Promises version\nfunction helloAsync() {\n return new Promise(function (resolve) {\n resolve(\"hello\");\n });\n}Async функция, которая ожидает результат другой async функции:
\n\n\n\n// == Async/Await version ==\nasync function multiply(a, b) {\n return a * b;\n}\nasync function foo() {\n var result = await multiply(2, 5);\n return result;\n}\n// Ошибки полетят сюда\n(async function () {\n var result = await foo();\n console.log(result); // Logs 5\n})();\n// == Promises version ==\nfunction multiply(a, b) {\n return new Promise(function (resolve) {\n resolve(a * b);\n });\n}\nfunction foo() {\n return new Promise(function(resolve) {\n multiply(2, 5).then(function(result) {\n resolve(result);\n });\n );\n}\n// Ошибки полетят сюда\nnew Promise(function() {\n foo().then(function(result) {\n console.log(result); // Logs 5\n });\n});Пример, на который важно обратить внимание
Вот пример того, почему понимание того, как работает async/await реально важно.
async function foo() {\n someArray.forEach(function (value) {\n doSomethingAsync(value);\n });\n}Пока что всё хорошо, мы параллельно выполняем doSomethingAsync несколько раз, так как мы не используем await. Но как бы мы это выполнили с ним?
Явно не так:
\n\n\n\nasync function foo() {\n someArray.forEach(function (value) {\n await doSomethingAsync(value);\n });\n}Пример выше выдаст синтаксическую ошибку, так как мы передаем forEach синхронную функцию.
Не проблема, верно? Нам всего-лишь надо передать ей async функцию. А вот и нет.
async function foo() {\n someArray.forEach(async function (value) {\n await doSomethingAsync(value);\n });\n}Что тут не так? Давайте посмотрим на то, как это интерпретируется. Я не будут многословным с промисами и объясню максимально просто то, как это было бы в случае с ними:
\n\n\n\nfunction foo() {\n someArray.forEach(function () {\n // отдаётся промис\n return doSomethingAsync(value);\n });\n}Проблема в том, что forEach не ожидает async функции или выражаясь промисами, она не ждет пока одна итерация вернет промис, чтобы завершить предыдущую.
Также, в наших примерах, нам не надо было ожидать вызова forEach.
Так как теперь решить эту проблему? К сожалению, мы не можем использовать forEach. По факту, никакие синхронные итераторы не будут работать. Нам нужны итераторы, которые знают как работать с промисами.
И есть один, который будет. Это современная версия цикла for, “for of”, которая понимает await для промисов.
Это сработает:
\n\n\n\nfor (item of someArray) {\n await foo();\n}Если вы не можете использовать “for of”, то вы можете применить итератор, который поддерживает промисы или использовать библиотеку, такую как bluebird Promise.each
В общем, поймите промисы и вы поймете async/await.
Я надеюсь, что это прояснило картину, async/await это просто, если вы хорошо понимаете промисы.
В этой статье вы узнаете о том, что такое синхронное и асинхронное программирование в JavaScript и как применяя эти знания работать с Async/Await.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/awaitpic.jpg"}}},{"node":{"slug":"samie-neobhodimie-strokovie-i-chislovie-metody-v-javascript","content":"\nВ этой статье, а скорее памятке, вы найдете все самые необходимые методы для работы со строками и числами (за исключением Math)в JavaScript, которые нужно просто знать, чтобы не городить огородов, а воспользоваться методами, доступными “из коробки”.
У объекта String есть один статический метод, String.fromCharCode(), который обычно используют для создания строкового представления последовательности Unicode символов. В этом примере мы делаем простую строку с использованием ASCII кодов:
String.fromCodePoint(70, 108, 97, 118, 105, 111) //'Flavio'Вы также можете использовать восьмеричные и шестнадцатеричные числа:
\n\n\n\nString.fromCodePoint(0x46, 0154, parseInt(141, 8), 118, 105, 111) //'Flavio'Все другие, описанные ниже методы, это методы “из коробки”, которые работают на строках.
\n\n\n\nОтдаёт символ под заданным индексом i.
Примеры:
\n\n\n\n'Flavio'.charAt(0) //'F'\n'Flavio'.charAt(1) //'l'\n'Flavio'.charAt(2) //'a'Если вы зададите индекс, который не подходит по строке, то на выходе вы получите уже пустую строку.
\n\n\n\nВ JavaScript нет типа char, так что char это строка с длиной 1.
Отдаёт код символа под индексом i. Как и с charAt(), отдаёт Unicode 16-битное целое число, представляющее символ:
'Flavio'.charCodeAt(0) //70\n'Flavio'.charCodeAt(1) //108\n'Flavio'.charCodeAt(2) //97Вызов toString() после него, отдаст шестнадцатеричное число, которое вы можете найти в любой Unicode таблице, такой как эта.
Этот метод был представлен уже в ES2015, чтобы работать с Unicode символами, которые не могут быть представлены как единичная 16-ти битная Unicode единица и которым вместо этого нужно их две.
\n\n\n\nИспользуя charCodeAt(), вам надо получить первый и второй, и затем совместить их. Используя codePointAt() вы получаете весь символ в одном запросе.
К примеру, этот китайский символ “𠮷” состоит из двух UTF-16 частей:
\n\n\n\n\"𠮷\".charCodeAt(0).toString(16) //d842\n\"𠮷\".charCodeAt(1).toString(16) //dfb7Комбинируем эти два unicode символа:
\n\n\n\n\"\\ud842\\udfb7\" //\"𠮷\"Вы можете получить тот же результат, но только используя codePointAt():
\"𠮷\".codePointAt(0) //20bb7Если вы создаете новый символ, комбинируя эти unicode символы:
\n\n\n\n\"\\u{20bb7}\" //\"𠮷\"Объединяет актуальную строку со строкой str.
Пример:
\n\n\n\n'Flavio'.concat(' ').concat('Copes') //'Flavio Copes'Вы можете указывать сколько угодно аргументов и в таком случае, все эти аргументы будут объединены в строку.
\n\n\n\n'Flavio'.concat(' ', 'Copes') //'Flavio Copes'Проверяет заканчивается ли строка со значением другой строки str.
'JavaScript'.endsWith('Script') //true\n'JavaScript'.endsWith('script') //falseВы можете передать второй параметр с целым числом и endWith() будет рассматривать оригинальную строку, как если бы она этой заданной длины:
'JavaScript'.endsWith('Script', 5) //false\n'JavaScript'.endsWith('aS', 5) //trueПроверяет есть ли в строке значение строки str.
'JavaScript'.includes('Script') //true\n'JavaScript'.includes('script') //false\n'JavaScript'.includes('JavaScript') //true\n'JavaScript'.includes('aSc') //true\n'JavaScript'.includes('C++') //falseincludes() также принимает второй опциональный параметр, целое число, которое указывает на позицию с которой начинать поиск.
'a nice string'.includes('nice') //true\n'a nice string'.includes('nice', 3) //false\n'a nice string'.includes('nice', 2) //trueДаёт позицию начала заданной строки str в строке, на которой применяется метод.
'JavaScript'.indexOf('Script') //4\n'JavaScript'.indexOf('JavaScript') //0\n'JavaScript'.indexOf('aSc') //3\n'JavaScript'.indexOf('C++') //-1Вы можете передать второй параметр, чтобы указать точку старта:
\n\n\n\n'a nice string'.indexOf('nice') !== -1 //true\n'a nice string'.indexOf('nice', 3) !== -1 //false\n'a nice string'.indexOf('nice', 2) !== -1 //trueДаёт позицию последнего появления строки str в актуальной строке.
Отдаёт -1, если поисковая строка не найдена.
'JavaScript is a great language. Yes I mean JavaScript'.lastIndexOf('Script') //47\n'JavaScript'.lastIndexOf('C++') //-1Этот метод сравнивает строки и возвращает число (отрицательное или положительное), которое говорит, является ли данная строка меньше, равной или больше, чем строка переданная как аргумент, но в зависимости от языка.
\n\n\n\nЯзык определяется настоящим местоположением или вы можете указать его, как второй аргумент:
\n\n\n\n'a'.localeCompare('à') //-1\n'a'.localeCompare('à', 'it-IT') //-1Очень часто его используют для сортировки массивов:
\n\n\n\n['a', 'b', 'c', 'd'].sort((a, b) => a.localeCompare(b))Где бы вы обычно использовали:
\n\n\n\n['a', 'b', 'c', 'd'].sort((a, b) => (a > b) ? 1 : -1)Только тут мы можем это сделать с помощью localeCompare(), который позволит нам работать с алфавитами по всему миру.
\n\n\n\nОбъект переданный как третий аргумент, может быть использован для передачи дополнительных условий. Посмотрите все возможные значения для этих условий на MDN.
\n\n\n\nА вот работа с регулярными выражениями RegEx.
\n\n\n\n'Hi Flavio'.match(/avio/)\n// Array [ 'avio' ]\n\n'Test 123123329'.match(/\\d+/)\n// Array [ \"123123329\" ]\n\n'hey'.match(/(hey|ho)/)\n//Array [ \"hey\", \"hey\" ]\n\n'123s'.match(/^(\\d{3})(\\w+)$/)\n//Array [ \"123s\", \"123\", \"s\" ]\n\n'123456789'.match(/(\\d)+/)\n//Array [ \"123456789\", \"9\" ]\n\n'123s'.match(/^(\\d{3})(?:\\s)(\\w+)$/)\n//null\n\n'123 s'.match(/^(\\d{3})(?:\\s)(\\w+)$/)\n//Array [ \"123 s\", \"123\", \"s\" ]\n\n'I saw a bear'.match(/\\bbear/) //Array [\"bear\"]\n\n'I saw a beard'.match(/\\bbear/) //Array [\"bear\"]\n\n'I saw a beard'.match(/\\bbear\\b/) //null\n\n'cool_bear'.match(/\\bbear\\b/) //nullВ Unicode есть четыре главные формы нормализации. Их коды это NFC, NFD, NFKC и NFKD. На Википедии есть хорошая статья про это.
Метод normalize() возвращает строку, нормализованную в соответствии с указанной формой, которую вы передаёте как параметр. (NFC используется как стандарт, если она не указана в ручную).
Вот пример с MDN:
\n\n\n\n'\\u1E9B\\u0323'.normalize() //ẛ̣\n'\\u1E9B\\u0323'.normalize('NFD') //ẛ̣\n'\\u1E9B\\u0323'.normalize('NFKD') //ṩ\n'\\u1E9B\\u0323'.normalize('NFKC') //ṩСмысл этого метода в том, чтобы добавлять в строку символы и пробелы, пока она не достигнет заданной длины.
\n\n\n\npadEnd() был представлен в ES2017, как метод добавляющий символы в конец строки.
\n\n\n\npadEnd(targetLength [, padString])Простое применение:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_JSuONO5pkEkHrtlPbayDUQ.png\")
Смысл этого метода в том, чтобы добавлять строки или символы как в предыдущем методе, но уже с самого начала строки:
\n\n\n\npadStart(targetLength [, padString])![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_LeXUASRJJwHSpxc8fn02PA.png\")
Этот метод был представлен в ES2015 и повторяет строки заданное количество раз:
\n\n\n\n'Ho'.repeat(3) //'HoHoHo'Отдает пустую строку, если параметр не указан или параметр равен нулю. А в случае с отрицательным числом вы получите RangeError.
\n\n\n\nЭтот метод находит первое упоминание str1 в заданной строке и заменяет его на str2.
Отдаёт новую строку, не трогая оригинальную.
\n\n\n\n'JavaScript'.replace('Java', 'Type') //'TypeScript'Вы можете передать регулярное выражение как первый аргумент:
\n\n\n\n'JavaScript'.replace(/Java/, 'Type') //'TypeScript'replace() заменяет только первое упоминание, но а если вы будете использовать regex как поиск строки, то вы можете использовать (/g):
'JavaScript JavaX'.replace(/Java/g, 'Type') //'TypeScript TypeX'Второй параметр может быть функцией. Эта функция будет вызвана с заданным количеством аргументов, когда найдётся совпадение (или каждое совпадение в случае с regex /g):
Отдающееся значение функции заменит совпадающую часть строки.
\n\n\n\nПример:
\n\n\n\n'JavaScript'.replace(/Java/, (match, index, originalString) => {\n console.log(match, index, originalString)\n return 'Test'\n}) //TestScriptЭто работает и для обычных строк, а не только для регулярок:
\n\n\n\n'JavaScript'.replace('Java', (match, index, originalString) => {\n console.log(match, index, originalString)\n return 'Test'\n}) //TestScriptВ случае c regex, когда выбираются группы, все эти значения будут переданы как аргументы прямо после параметра совпадения.
\n\n\n\n'2015-01-02'.replace(/(?<year>\\d{4})-(?<month>\\d{2})-(?<day>\\d{2})/, (match, year, month, day, index, originalString) => {\n console.log(match, year, month, day, index, originalString)\n return 'Test'\n}) //TestОтдаёт расположение первого совпадения строки str в заданной строке.
Этот метод отдаёт индекс начала упоминания или -1, если такого не было найдено.
'JavaScript'.search('Script') //4\n'JavaScript'.search('TypeScript') //-1Вы можете использовать регулярные выражения (и на самом деле, даже если вы передаёте строку, то внутренне оно тоже применяется как регулярное выражение).
\n\n\n\n'JavaScript'.search(/Script/) //4\n'JavaScript'.search(/script/i) //4\n'JavaScript'.search(/a+v/) //1В этой статье подробно рассказывается про метод slice() и его родственников.
\n\n\n\nОтдает новую строку, которая является частью строки на которой применялся метод, от позиций begin до end.
Оригинальная строка не изменяется.
\n\n\n\nend опциональна.
'This is my car'.slice(5) //is my car\n'This is my car'.slice(5, 10) //is myЕсли вы выставите первым параметром отрицательное число, то начальный индекс будет считаться с конца и второй параметр тоже должен быть отрицательным, всегда ведя отсчет с конца:
\n\n\n\n'This is my car'.slice(-6) //my car\n'This is my car'.slice(-6, -4) //myЭтот метод вырезает строку при её нахождении в строке на которой применяется метод (чувствительный к регистру) и отдаёт массив с токенами.
\n\n\n\nconst phrase = 'I love my dog! Dogs are great'\nconst tokens = phrase.split('dog')\n\ntokens //[\"I love my \", \"! Dogs are great\"]Проверяет начинается ли строка со значения str.
Вы можете вызвать startWith() на любой строке, указать подстроку и проверить отдаёт результат true или false.
'testing'.startsWith('test') //true\n'going on testing'.startsWith('test') //falseЭтот метод допускает второй параметр, который позволит вам указать с какого символа вам надо начать проверку:
\n\n\n\n'testing'.startsWith('test', 2) //false\n'going on testing'.startsWith('test', 9) //trueЭтот метод отдаёт новую строку, которая представляет собой изначальную строку в нижнем регистре, в соответствии с нормами разметки указанной локали.
\n\n\n\nСобственно, первый параметр представляет локаль, но он опционален. Если его пропустить, то будет использоваться актуальная локаль:
\n\n\n\n'Testing'.toLocaleLowerCase() //'testing'\n'Testing'.toLocaleLowerCase('it') //'testing'\n'Testing'.toLocaleLowerCase('tr') //'testing'Как и всегда, мы можем не осознавать все преимущества интернационализации, но я читал на MDN, что правила разметки текста в турецком языке отличаются от других языков, чьё описание основано на латинице.
\n\n\n\nВ общем, это как и toLowerCase(), но с учетом локали.
Этот метод отдаёт новую строку, которая представляет собой изначальную строку в верхнем регистре, в соответствии с нормами разметки указанной локали.
\n\n\n\nПервым параметром указывается локаль, но это опционально, как и в случае с методом выше:
\n\n\n\n'Testing'.toLocaleUpperCase() //'TESTING'\n'Testing'.toLocaleUpperCase('it') //'TESTING'\n'Testing'.toLocaleUpperCase('tr') //'TESTİNG'Этот метод отдаёт новую строку с текстом в нижнем регистре.
\n\n\n\nНе изменяет изначальную строку.
\n\n\n\nНе принимает параметры.
\n\n\n\nИспользование:
\n\n\n\n'Testing'.toLowerCase() //'testing'Работает как и toLocaleLowerCase(), но не учитывает локали.
Отдает строку из заданного строчного объекта.
\n\n\n\nconst str = new String('Test')\nstr.toString() //'Test'Отдаёт новую строку с текстом в верхнем регистре.
\n\n\n\nНе изменяет оригинальную строку.
\n\n\n\nНе принимает параметры.
\n\n\n\nИспользование:
\n\n\n\n'Testing'.toUpperCase() //'TESTING'Если вы передадите пустую строку, то он возвратит пустую строку.
\n\n\n\nМетод похож на toLocaleUpperCase(), но не принимает параметры.
Отдает новую строку удаляя пробелы вначале и в конце оригинальной строки.
\n\n\n\n'Testing'.trim() //'Testing'\n' Testing'.trim() //'Testing'\n' Testing '.trim() //'Testing'\n'Testing '.trim() //'Testing'Отдаёт новую строку, удаляя пробелы только из конца оригинальной строки.
\n\n\n\n'Testing'.trimEnd() //'Testing'\n' Testing'.trimEnd() //' Testing'\n' Testing '.trimEnd() //' Testing'\n'Testing '.trimEnd() //'Testing'Отдаёт новую строку, удаляя пробелы из начала оригинальной строки.
\n\n\n\n'Testing'.trimStart() //'Testing'\n' Testing'.trimStart() //'Testing'\n' Testing '.trimStart() //'Testing '\n'Testing'.trimStart() //'Testing'Отдает строчное представление заданного строчного объекта:
\n\n\n\nconst str = new String('Test')\nstr.valueOf() //'Test'Это тоже самое, что и toString()
\n\n\n\nТеперь пройдемся по числовым методам.
Отдаст true, если переданное значение является целым числом. Всё иное, такое как, логические значения, строки, объекты, массивы, отдают false.
Number.isInteger(1) //true\nNumber.isInteger(-237) //true\nNumber.isInteger(0) //true\n\nNumber.isInteger(0.2) //false\nNumber.isInteger('Flavio') //false\nNumber.isInteger(true) //false\nNumber.isInteger({}) //false\nNumber.isInteger([1, 2, 3]) //falseNaN это особый случай. Число является NaN, только если оно NaN или если это выражения деления ноль на ноль, что отдаёт NaN. Во всех других случаях мы можем передать ему что захотим, но получим false:
Number.isNaN(NaN) //true\nNumber.isNaN(0 / 0) //true\n\nNumber.isNaN(1) //false\nNumber.isNaN('Flavio') //false\nNumber.isNaN(true) //false\nNumber.isNaN({}) //false\nNumber.isNaN([1, 2, 3]) //falseЧисло может удовлетворять Number.isInteger(), но не Number.isSafeInteger(), если оно заходит за пределы безопасных целых чисел.
Так что, всё что выше 2⁵³ и ниже -2⁵³ не является безопасным.
\n\n\n\nNumber.isSafeInteger(Math.pow(2, 53)) // false\nNumber.isSafeInteger(Math.pow(2, 53) - 1) // true\nNumber.isSafeInteger(Math.pow(2, 53) + 1) // false\nNumber.isSafeInteger(-Math.pow(2, 53)) // false\nNumber.isSafeInteger(-Math.pow(2, 53) - 1) // false\nNumber.isSafeInteger(-Math.pow(2, 53) + 1) // trueПарсит аргумент как дробное число и отдаёт его. Аргумент при этом является строкой:
\n\n\n\nNumber.parseFloat('10') //10\nNumber.parseFloat('10.00') //10\nNumber.parseFloat('237,21') //237\nNumber.parseFloat('237.21') //237.21\nNumber.parseFloat('12 34 56') //12\nNumber.parseFloat(' 36 ') //36\nNumber.parseFloat('36 is my age') //36\n\nNumber.parseFloat('-10') //-10\nNumber.parseFloat('-10.2') //-10.2Как вы видите Number.parseFloat() довольно гибок. Он также может конвертировать строки со словами, выделяя только первое число, но в этом случае строка должна начинаться с числа:
Number.parseFloat('I am Flavio and I am 36') //NaNПарсит аргумент как целое число и отдаёт его:
\n\n\n\nNumber.parseInt('10') //10\nNumber.parseInt('10.00') //10\nNumber.parseInt('237,21') //237\nNumber.parseInt('237.21') //237\nNumber.parseInt('12 34 56') //12\nNumber.parseInt(' 36 ') //36\nNumber.parseInt('36 is my age') //36Как вы видите Number.parseInt() тоже гибок. Он также может конвертировать строки со словами, выделяя первое число, строка должна начинаться с числа.
Number.parseInt('I am Flavio and I am 36') //NaNВы можете передать второй параметр, чтобы указать систему счисления. Десятичная стоит по-дефолту, но вы можете применять восьмеричные и шестнадцатеричные числовые конверсии:
\n\n\n\nNumber.parseInt('10', 10) //10\nNumber.parseInt('010') //10\nNumber.parseInt('010', 8) //8\nNumber.parseInt('10', 8) //8\nNumber.parseInt('10', 16) //16В этой статье, а скорее памятке, вы найдете все самые необходимые методы для работы со строками и числами (за исключением Math)в JavaScript, которые нужно просто знать, чтобы не городить огородов, а воспользоваться методами, доступными “из коробки”.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/samieneobkjfnk.jpg"}}},{"node":{"slug":"recursivno-opredelyaem-chisla-fibonacci-s-pomoshiu-memoizacii-v-javascript","content":"\nВ этой статье рассказывается о том, как определить и оперировать числами Фибоначчи с помощью рекурсии и мемоизации на JavaScript.
\n\n\n\nЯ постепенно расскажу про каждый момент в этой задаче, с объяснениями и примерами кода.
\n\n\n\nP.S Очень надеюсь, что эта статья поможет явисту Ростиславу узнать, что такое мемоизация и рекурсивный ряд чисел Фибоначчи.
\n\n\n\nВообще, рекурсивный подход в решении этой задачи считается плохой практикой из-за высокого runtime complexity. Это решение будет O(log n). А если представить большие числа, то сложно представить насколько тяжелой будет операция.
\n\n\n\nДавайте посмотрим на рекурсивное решение этой задачки:
\n\n\n\nconst fibo = (n) => { \n if (n < 2) {\n return n;\n }\n return fibo(n - 1) + fibo(n - 2);\n};Суть в том, что мы последовательно запускаем функцию внутри себя же, делая ряд вычислений. Но давайте разберемся, что же там происходит на самом деле. Вот визуальное представление:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/fibkjnfklj.jpeg\")
Давайте взглянем на три блока слева. А именно f(2) и затем на f(1) и f(0). Тут мы находим второй элемент в ряде чисел, начинающимся с 0.
Напоминаю, ряд чисел Фибоначчи это:
\n\n\n\n\n\n\n\n0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144 и так далее.
Тут мы отдаем fibo значение 2, так как мы хотим высчитать fibo(2). Как вы видите сверху мы видим специальное условие когда число равно 2-м и не меньше двух.
Дальше отработают следующие строчки кода:
\n\n\n\nfibo(n - 1) + fibo(n - 2)
Замените n на 2 и мы получим fibo(1) + fibo(0)
Следующим шагом будет нахождение значений двух условий, а именно fibo(0) и fibo(1). Тут для каждого случая нам придётся заново запускать метод fibo и именно в этом моменте и начинается рекурсия.
В общем, мы получаем буквально следующее:
\n\n\n\nfibo(2) = fibo(1) + fibo(0) = 1 + 0 = 1
Давайте ещё немного разберем рекурсию, но уже с fibo(3).
fibo(3) = fibo(2) + fibo(1)
Используя рекурсию мы получаем мы получаем следующее продолжение:
\n\n\n\nfibo(2) + fibo(1), где fibo(2) рекурсивно станет (fibo(1) + fibo(0)) + fibo(1), где в результате мы получим 1 + 0 + 1 = 2.
Сейчас структура древа, описанного выше должна стать для вас более понятной. Рекурсия будет происходить вплоть до конца каждой ветви пока значение не будет 1 или 0.
А теперь самое интересное. Посмотрите на количество одинаковых аргументов в этом древе. Их несколько: 4, 3, 2 и все они будут отрабатывать снова и снова при вызове рекурсии.
И тут нам на помощь приходит мемоизация.
\n\n\n\nМемоизация это имплементация сложных рекурсивных или же итеративных функций более быстрым способом. Как? Кэшируя значения отдаваемые функцией при её первоначальном запуске.
\n\n\n\nКогда мы отдаём функции мемоизации уже использованное значение, то оно отдаст готовое значение, сохраненное в кэше и не будет запускать функцию снова. К чему это приведет? К тому ускорению производительности, очевидно же. Вашему коду не надо будет пересчитывать то, что уже давно посчитано.
\n\n\n\nКруто звучит, да? Тогда давайте посмотрим на пример мемоизации, что понять его более детально:
\n\n\n\nfunction memo(func){\n const cache = {};\n return function(){\n const key = JSON.stringify(arguments);\n if (cache[key]){\n return cache[key];\n }\n else{\n val = func.apply(null, arguments);\n cache[key] = val;\n return val; \n }\n }\n};Мы отдаём так называемое анонимное замыкание, которое может наследовать любую переменную или в нашем случае функцию, переданную memo. Затем мы можем смело играться с объектом аргументов этой функции.
\n\n\n\nconst memoFib = memo((n) => {\n if (n < 2) {\n return n;\n }\n return memoFib(n - 1) + memoFib(n - 2);\n});Например, запустив её с memoFib(8) мы получим 21, а объект с мемоизированными значениями будет выглядеть так:
{\n\t {\"0\":0}: 0,\n\t {\"0\":1}: 1,\n\t {\"0\":2}: 1,\n\t {\"0\":3}: 2,\n\t {\"0\":4}: 3,\n\t {\"0\":5}: 5,\n\t {\"0\":6}: 8,\n\t {\"0\":7}: 13\n}В этой статье рассказывается о том, как определить и оперировать числами Фибоначчи с помощью рекурсии и мемоизации на JavaScript.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/recursivefibonaccikfjn.jpg"}}},{"node":{"slug":"kak-rabotaet-delegirovanie-sobityi-v-javascript","content":"\nОчень доходчивая статья о том, как работает делегирование событий в JavaScript и как не запутаться в слушателях событий.
\n\n\n\n\n\n\n\nЧтобы понять делегирование событий в JavaScript, вам сначала надо понять работу слушателей самих событий (ну или event listeners).
\n\n\n\nЯ не очень люблю описывать вещи словами из их названия, но тут уж некуда деваться, слушатели событий следят за срабатыванием самих событий на странице. Вот, собственно и всё.
\n\n\n\nСобытием в JavaScript можно назвать то, что “происходит с HTML элементом”, а происходить с ним может много чего.
\n\n\n\nchange — срабатывает тогда, когда что-то поменялось в HTML элементе.
click — когда пользователь кликает на элемент.
mouseover — когда пользователь наводит мышь на HTML элемент.
mouseout — когда пользователь отводит мышку от элемента.
keydown — когда пользователь кликает на клавиатуру.
load — когда браузер заканчивает загрузку страницы.
addEventListener()
Чтобы добавить слушатель событий к HTML элементу, вы можете использовать addEventListner() метод.
Пример addEventListener()\n\nconst character = document.getElementById(\"disney-character\");\ncharacter.addEventListener('click', showCharactersName);Первая часть кода это то, что мы будем слушать, в нашем случае это просто HTML элемент. Но в JavaScript можно слушать просто неописуемое изобилие вещей на странице и не только. Это может быть HTML элемент на странице, это может быть сам документ или это может быть окно браузера. В общем, это объект высшего порядка в client-side JavaScript который охватывает почти всё. Но всё же, в большинстве случаев это HTML элементы. Вторая часть кода это уже сам слушатель.
\n\n\n\neventListener:Когда пользователь кликает на HTML элемент, с id disnay-character, то слушатель событий срабатывает и вызывает функцию showCharactersName.
Слушатели событий выставляются после загрузки страницы. Так что, когда вы впервые открываете сайт, браузер скачивает, считывает и выполняет JavaScript.
\n\n\n\nconst character = document.getElementById(\"disney-character\");\n\ncharacter.addEventListener('click', showCharactersName);В коде выше, при загрузке страницы, слушатель событий находит HTML элемент с id disnay-character и выставляет на него слушатель события по клику.
Вся эта конструкция будет успешно работать, если элемент уже существует на странице. Но что происходит со слушателем событий, когда элемент добавляется в DOM уже после загрузки страницы?
\n\n\n\nИменно оно решает эту проблему. Чтобы понять принцип его работы, нам надо посмотреть ниже на список персонажей Disney.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_OciPJyDlVzbNeYPNBfTIkA.png\")
У этого списка есть довольно простой функционал. Именно для наших нужд мы можем добавить несколько персонажей в этот список и проверить боксы рядом с именем персонажа.
\n\n\n\nЭтот список также является динамическим. Инпуты (Mickey, Minnie, Goofy) были добавлены уже ПОСЛЕ загрузки страницы и следовательно, на них не были прикреплены слушатели событий.
\n\n\n\nДавайте посмотрим на этот код:
\n\n\n\nconst checkBoxes = document.querySelectorAll('input');\n\ncheckBoxes.forEach(input => input.addEventListener('click', ()=> alert('hi!')));\n\n//Должно выскочить окно при клике на один из инпутов(Mickey, Minnie, или Goofy)Но давайте посмотрим на HTML при загрузке страницы:
\n\n\n\n<ul class=\"characters\"></ul>А теперь давайте взглянем на HTML после загрузки страницы (из локального веб-хранилища, API запроса и т.п.):
\n\n\n\n<ul class=\"characters\">\n <li>\n <input type=\"checkbox\" data-index=\"0\" id=\"item0\">\n <label for=\"item0\">Mickey</label>\n </li>\n \n <li>\n <input type=\"checkbox\" data-index=\"1\" id=\"item1\">\n <label for=\"item1\">Minnie</label>\n </li>\n \n <li>\n <input type=\"checkbox\" data-index=\"2\" id=\"item2\">\n <label for=\"item2\">Goofy</label>\n </li>\n</ul>\n** Инпуты были добавлены в DOM после загрузки страницы и на них не висят слушатели событий.Если вы захотите кликнуть на инпуты персонажей — Mickey, Minnie, or Goody), то вы наверное ожидали бы увидеть всплывающее окно с надписью “hi!”, но так как они не были загружены на страницу при её инициализации, то и прослушиватели событий НЕ БЫЛИ добавлены на эти элементы и само собой ничего не произойдёт.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_zzKjANG7YP9bnoDhqsm9ew.gif\")
Делегированием событий.
\n\n\n\nСуть делегирования событий в том, что вместо прослушивания изменений на инпутах напрямую, нам нужно прослушивать HTML элемент, который был бы на странице при изначальной загрузке.
\n\n\n\nВ нашем примере это список ul с классом characters, который появляется при загрузке страницы. Мы можем повесить слушатель событий прямо на него.
<ul class=\"characters\"> // Родитель - всегда на странице\n <li>\n <input type=\"checkbox\" data-index=\"0\" id=\"char0\"> //ПОТОМОК 1\n <label for=\"char0\">Mickey</label>\n </li>\n \n <li>\n <input type=\"checkbox\" data-index=\"1\" id=\"char1\"> //ПОТОМОК 2\n <label for=\"char1\">Minnie</label>\n </li>\n \n <li>\n <input type=\"checkbox\" data-index=\"2\" id=\"char2\"> //ПОТОМОК 3\n <label for=\"char2\">Goofy</label>\n </li>\n</ul>Лучше рассматривать делегирование событий, как ответственных родителей и нерадивых детишек. В этом случае родители это просто боги, а детям приходиться слушать всё, что говорят их родители. Прекрасный аспект тут в том, что если бы мы добавили больше детей (или инпутов), то родители бы остались такими же в правах — они были с самого начала или другими словами, прямо с загрузки страницы.
\n\n\n\nДавайте прикрепим слушатель событий:
\n\n\n\n<ul class=\"characters\">\n</ul>\n<script>\n function toggleDone (event) {\n console.log(event.target)\n } \n const characterList = document.querySelector('.characters')\n characterList.addEventListener('click', toggleDone)\n</script>Теперь у нас есть слушатель событий на ul, а не на каждом отдельном потомке. Так что же тогда произойдет, если мы кликнем на инпут после того, как загрузилась страница и выведем в консоль event.target?
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_0vj3yxDmqI-a1_s-rB3ETA.png\")
event.target это отсылка к объекту, на котом сработало событие. Или другими словами, он указывает на HTML элемент на котором сработало событие.
Событие в нашем случае это клик. Объект на котором отработало событие это <input/>.
** label рассматривается, как часть объекта input — поэтому мы видимо их обоих**
Если мы выведем в консоль event.currentTarget — то увидим мы кое что другое.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_j2UgR5rfWILSuahqs4eMvg.png\")
event.currentTarget указывает на данную цель события, так как сам ивент уходит дальше в DOM. Он всегда ссылается на элемент к которому был прикреплен eventListener. В нашем случае этим элементом являлся неупорядоченный список characters, так что это то, что мы увидим в консоле.
Так как теперь мы знаем, что event.target указывает на элементы на которых отработало событие и также мы знаем, какой элемент нам нужно слушать, решение проблемы с делегированием для нас не является проблемой.
//делегирование событий\nfunction toggleDone (event) {\n if (!event.target.matches('input')) return\n console.log(event.target)\n //Теперь мы выбрали нужный инпут и можем начать манипуляции с DOM\n}В общем, код выше говорит нам то, что если элемент на котором отработал клик не является инпутом, то мы выходим из функции.
\n\n\n\nА если этот элемент является инпутом, то тогда мы выводим в консоль event.target и выполняем последующий JavaScript код на этом узле потомке.
Очень важно, что теперь мы можем быть уверены в том, что пользователь кликнул нужный узел потомок, пусть даже инпуты не были добавлены в DOM после начальной загрузки страницы.
\n\n\n\nЕсли вы хотите завершить чтение на этом моменте — то смело это делайте. Мы уже узнали основы делегирования событий. Но для глубокого понимания того, почему оно работает, нам нужно понять Event Bubbling.
\n\n\n\nВсякий раз, когда пользователь кликает, этот самый клик отдаётся вверх на самую высь DOM и отрабатывает событие клика на всех элементах родителя по которому был сделан клик. Вы не всегда видите эти клики, так как вы не всегда слушаете (с eventListener) клики на этих элементах, но как бы то ни было, но такое “всплытие” действий имеет место быть.
Это называется Event Bubbling (Всплытие событий) или распространением события.
\n\n\n\nЭто означает то, что всякий раз, когда вы кликаете на один из наших инпутов в DOM, вы по сути прокликиваете весь документ.
\n\n\n\nВот пример:
\n\n\n\n<div class=\"one\">\n <div class=\"two\">\n <div class=\"three\">\n </div>\n </div>\n</div>\n<script>\n const divs = document.querySelectorAll('div'); \n function logClassName(event) {\n console.log(this.classList.value);\n }\n divs.forEach(div => div.addEventListener('click', logClassName));\n</script>Выше у нас есть три дива: DIV #1, DIV #2, DIV #3. У каждого div’а есть свой прослушиватель событий и когда мы на него кликаем в браузере, то мы выводим в консоль имя класса, через функцию logClassName().
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_NwINqHz873kEH_2D9iX0ng.gif\")
Выше мы видим то, что мы бы увидели в браузере. Обратите внимание на то, как мышка кликает по третьему div’у. Как и ожидалось, когда я кликаю по нему, я вижу его класс в консоле. Но кликая по div #3, я также кликаю и по div #2 и div#1, который вывелись в консоль. Это и называется всплытием событий. Мы видим каждый класс, потому что мы добавили прослушиватель событий каждому родительскому div’у.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_txz1UUG5qc8b_B6oyClgwQ.png\")
Но вернемся к нашему примеру с делегированием события:
\n\n\n\n<ul class=\"characters\"> // Родитель -- где и находится слушатель события!\n <li>\n <input type=\"checkbox\" data-index=\"0\" id=\"char0\"> //ПОТОМОК 1\n <label for=\"char0\">Mickey</label>\n </li>\n \n <li>\n <input type=\"checkbox\" data-index=\"1\" id=\"char1\"> //ПОТОМОК 2\n <label for=\"char1\">Minnie</label>\n </li>\n \n <li>\n <input type=\"checkbox\" data-index=\"2\" id=\"char2\"> //ПОТОМОК 3\n <label for=\"char2\">Goofy</label>\n </li>\n</ul>\n<script>\n const characterList = document.querySelector('.characters');\n characterList.addEventListener('click', toggleDone);\n</script>Вернёмся к нашему примеру с делегированием событий — у нас был только один слушатель события и он был выставлен на неупорядоченный список с классом characters. Тем не менее, мы кликнули на потомка этого родительского HTML элемента, элемент input, который запустил прослушиватель событий, который привязали к списку.
В силу наличия всплытия событий, вы можете повесить eventListener на одном родительском HTML элементе, который находится выше потомков и этот прослушиватель событий будет срабатывать всякий раз, как заданное событие случиться на любом из его дочерних элементов — даже если они были добавлены после первоначальной загрузки страницы.
Без делегирования событий, вам бы пришлось перепривязывать событие по клику на каждый новый input, добавленный на страницу. Делать такую писанину довольно проблематично и обременительно. Во первых, такой подход значительно увеличит количество слушателей событий на вашей странице и их большое количество увеличит объем памяти, потребляемое вашей страницей. Что приведет к снижению производительности, что само по себе уже плохо. Во вторых, могут произойти проблемы с утечкой памяти из-за циклической привязки и отвязки слушателей событий, и удаления элементов из DOM. Но это уже выходит за рамки данной статьи.
Очень доходчивая статья о том, как работает делегирование событий в JavaScript и как не запутаться в слушателях событий.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/eventdelegatlf.jpg"}}},{"node":{"slug":"kak-rabotat-s-localstorage-v-javascript","content":"\nВ этой статье вы узнаете о том, что такое localStorage и на рабочем примере узнаем то, как с ним работать в JavaScript.
Мне нравится делать обучающие материалы о том, как создавать небольшие приложения буквально с нуля, используя чистый JavaScript. Создание to-do списка это распространенная идея для создания приложения, а без базы данных, в которую можно положить задачи, она становится особенной полезной, но добавляет некоторые сложности для начинающих.
\n\n\n\nОднако, даже без базы данных, мы можем использовать встроенное в браузер веб-хранилище, чтобы сохранять туда задачи из to-do списка.Такое приложение было бы особенно полезным для создания быстрых заметок. Вы бы просто установили ярлык на приложение при запуске новой вкладки и задачи to-do будут находиться на вашем компьютере пока вы не очистите кэш.
\n\n\n\nВот то, что мы сегодня будем делать:
\n\n\n\n\n\n\n\n\n\n\n\nДля того, чтобы понимать статью, вам нужно знать основы HTML и CSS, понимать типы данных и синтаксис JavaScript, вместе с DOM манипуляциями.
\n\n\n\nЦелью этой статьи является создание быстрого приложения, которое будет хранить to-do элементы в веб-хранилище браузера на вашем компьютере и показывать их на фронте. Посмотрите пример.
\n\n\n\nВ веб-хранилище хранятся данные пользователя браузера. Есть два типа веб-хранилищ:
\n\n\n\nlocalStorage — это данные, которые хранятся бессрочно и будут доступны даже после перезагрузки браузера.
sessionStorage — это данные, которые стираются после того, как окно браузера закрывается.
Веб-хранилище довольно удобно для сохранения данных, таких как предпочтения пользователей (светлая или темная цветовая схема на сайте и тп), сохранение товаров, положенных в корзину или запоминание того, что пользователь залогинен на сайте.
\n\n\n\nДо этого, для запоминания такого рода локальных, временных данных, использовались только кукисы. В локальном веб-хранилище вы можете хранить значительно больше данных (5MB vs 4KB) и не обращаться к ним, при каждом HTTP вызове, таким образом, это может быть лучшим вариантом для хранилища данных на стороне клиента.
\n\n\n\nВот обзор методов localStorage
setItem() — добавляет пару ключ-значение в локальное веб-хранилище
getItem() — получает значение по ключу
removeItem() — удаляет элемент по ключу
clear() — очищает хранилище
Вы можете посмотреть то, что находится в локальном хранилище, зайдя в консоль и введя в неё localStorage.
Storage {length: 0}Добавление данных в localStorage очень простой процесс, вы можете использовать setItem() метод. Я буду использовать общепринятые имена для пары ключ-значение, но они могут быть любой производной строкой.
localStorage.setItem('key', 'value')Теперь, если вы проверите localStorage в консоле, то вы там увидите новый ключ и значение.
Storage {key: \"value\", length: 1}Если вы хотите получить значение конкретного ключа, то вам надо будет использовать метод getItem().
localStorage.getItem('key')\nvalueИ наконец, вы можете удалить данные с помощью removeItem().
localStorage.removeItem('key')А используя clear(), вы очистите всё веб-хранилище.
localStorage.clear()Теперь мы можем приступить к созданию приложения.
\n\n\n\nСначала мы создадим простенькую HTML разметку в index.html. Я работаю в Primitive(мой минималистический HTML Фреймворк) для стилей, потому что это то, что я всегда использую, если мне нужен быстрый фронт.
<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n<title>New Tab App</title>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/primitive-ui/dist/css/main.css\" />\n </head>\n<body>\n <div class=\"small-container\">\n <h1>New Tab App</h1>\n<!-- more will go here -->\n </div>\n \n <script src=\"js/scripts.js\"></script>\n </body>\n</html>Тут нам надо уделить внимание настройке трёх вещей:
\n\n\n\nТекстовой input— для добавления новых элементов.
Список — то место, куда будут добавляться новые элементы на фронте.
\n\n\n\nКнопка — для сброса всех элементов.
\n\n\n\nДобавьте этот код туда, где стоит комментарий <! — more will go here — >
\n\n\n\n<form>\n <input id=\"item\" type=\"text\" placeholder=\"New\" required />\n</form>\n<h2>Items</h2>\n<ul></ul>\n<button>Clear All</button>И вот, как всё это будет выглядеть.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_Ik5BF_Om2vH9MbxVWf0u7g.png\")
Далее мы сосредоточимся на написании функционала в JavaScript.
\n\n\n\nПеред тем, как интегрировать всё это с локальным веб-хранилищем, давайте подцепим на JS форму и список, через которые мы хотим добавлять данные в input и выводить их в ul.
Для начала, я собираюсь объявить несколько переменных для элементов на странице.
\n\n\n\nconst form = document.querySelector('form')\nconst ul = document.querySelector('ul')\nconst button = document.querySelector('button')\nconst input = document.getElementById('item')Далее, я напишу функцию, которая создаст элемент li, так как этот функционал нам потребуется очень часто. Я назову функцию liMaker(). Она просто будет создавать элемент li, выставлять ему текст, который будет как параметр и добавлять созданный li в ul.
const liMaker = text => {\n const li = document.createElement('li')\n li.textContent = text\n ul.appendChild(li)\n}Далее, я собираюсь добавить прослушиватель события на форму, которая связана с submit — событие, которое будет происходить всякий раз, как мы нажмем на enter в форме.e.preventDefault() предотвратит отправку формы при сабмите, это нам не нужно, так как мы не собираемся отправлять никаких данных на сервер.
Вместо этого, форма отправит значение input. Мы вызовем функцию liMaker(), которая создаст элемент с текстом, который будет значением input и далее, мы добавим это в DOM. И под конец, мы выставим значение input на пустую строку, таким образом вам не придётся вручную стирать то, что вы только написали.
form.addEventListener('submit', function(e) {\n e.preventDefault()\nliMaker(input.value)\n input.value = ''\n})Теперь, с буквально пустяковым количеством кода на борту, мы имеем небольшое приложение, которое добавляет to-do элементы в список задач.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_7-eKeSTYTZf-ie6kDdz9oQ.png\")
Но, так как мы нигде не сохраняем наши данные, то при закрытии или обновлении браузера, введенные нами элементы исчезнут. Последним шагом будет интеграция нашего приложения с локальным хранилищем, для того, чтобы данные оставались в нём и после перезагрузки страницы, и после перезагрузки браузера.
\n\n\n\nСейчас мы добавим немного функционала в наше приложение. Во первых, каждый раз, когда форму будут сабмитить, значение из input будет добавлено в localStorage вместе с мгновенным отображением в списке задач. Также, нам нужно будет пробежаться циклом по всему локальному хранилищу и показать элементы этого хранилища сверху списка существующих задач. Ну и под конец, мы добавим кнопку “Clear All”, которая удалит все элементы не только из локального хранилища, но и из списка ul.
Давайте сначала создадим пустой массив и создадим в localStorage ключ под названием items. localStorage в виде значений ключей принимает только строки, к тому же, нам надо хранить задачи в массиве.
Мы можем обойти это ограничение с помощью JSON.stringify(), чтобы конвертировать массив в строку. А уже потом мы применим JSON.parse() для конвертирования содержимого localStorage в какой-нибудь рабочий формат, который мы положим в переменную data. Вставьте этот код под всем, что мы написали выше.
let itemsArray = []\n\nlocalStorage.setItem('items', JSON.stringify(itemsArray))\nconst data = JSON.parse(localStorage.getItem('items'))В слушателе событий мы будем отправлять каждое новое значение input в массив, а затем добавлять в localStorage новое значение с уже обновленным массивом.
e.preventDefault()\nitemsArray.push(input.value)\nlocalStorage.setItem('items', JSON.stringify(itemsArray))Далее, мы собираемся пробежаться по всему содержимому переменной data, которая содержит всё из нашего localStorage в таком виде, в котором мы можем работать с этими данным в JavaScript. Затем мы заново запустим liMaker(). Это покажет нам всю нужную информацию в списке при каждом открытии приложения.
data.forEach(item => {\n liMaker(item)\n})И под конец мы добавим событие по клику на кнопку, которая очистит все данные из localStorage и удалит все потомков у ul.
button.addEventListener('click', function() {\n localStorage.clear()\n while (ul.firstChild) {\n ul.removeChild(ul.firstChild)\n }\n})Если всё пройдет хорошо, то данные запишутся в хранилище и покажутся в списке задач, а само хранилище вы сможете проверить введя localStorage в консоли.
Storage {items:\n\"[\"Welcome\",\"to\",\"the\",\"Thunderdome\"]\",\n length: 1}Но у нас осталась последняя проблема. После закрытия браузера или перезагрузки страницы, вся существующая информация в localStorage пропадает и ничего не остается на нашем фронте. Почему?
Потому, что наш itemsArray сбрасывается каждый раз при запуске скрипта. Мы можем пофиксить эту проблемку, создав условие, которое проверит наличие доступного localStorage:
let items\nif (localStorage.getItem('items')) {\n items = JSON.parse(localStorage.getItem('items'))\n} else {\n items = []\n}Практичнее было бы использовать тернарный оператор.
\n\n\n\nlet itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : []Теперь наше приложение завершено. И когда вы вводите какую-либо информацию, а затем обновляете или закрываете окно браузера, данные будут на месте, пока вы самостоятельно не очистите их в настройках браузера или запустив команду localStorage.clear(). Ну а вот и полный код JavaScript.
const form = document.querySelector('form')\nconst ul = document.querySelector('ul')\nconst button = document.querySelector('button')\nconst input = document.getElementById('item')\nlet itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : []\nlocalStorage.setItem('items', JSON.stringify(itemsArray))\nconst data = JSON.parse(localStorage.getItem('items'))\nconst liMaker = text => {\n const li = document.createElement('li')\n li.textContent = text\n ul.appendChild(li)\n}\nform.addEventListener('submit', function(e) {\n e.preventDefault()\nitemsArray.push(input.value)\n localStorage.setItem('items', JSON.stringify(itemsArray))\n liMaker(input.value)\n input.value = ''\n})\ndata.forEach(item => {\n liMaker(item)\n})\nbutton.addEventListener('click', function() {\n localStorage.clear()\n while (ul.firstChild) {\n ul.removeChild(ul.firstChild)\n }\n})В этом руководстве мы узнали о том, как сделать простое to-do приложение, которое можно использовать для быстрого напоминания о текущих задачах, просто вызвав новую вкладку, используя HTML5 веб-хранилище. Я надеюсь, что теперь у вас появилось лучшее понимание локального хранилища и того, как интегрировать его в простое приложение.
\n\n\n\nПочитайте про применение localStorage в следующей статье — Используем localStorage в React
\n","date":"2021-02-08T17:20:32.000Z","title":"Как работать с localStorage в JavaScript","id":"42102be2-be86-5b0e-be2a-ec67d8a54f09","excerpt":"В этой статье вы узнаете о том, что такое localStorage и на рабочем примере узнаем то, как с ним работать в JavaScript.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/localstoragejshowkjfndsk.jpg"}}},{"node":{"slug":"ispolzuem-localstorage-v-react","content":"\nКак использовать преимущества localStorage в React? Да легко! В этой статье вы узнаете об удобстве применения локального хранилища в React приложениях.
\n\n\n\n\n\n\n\nСердцем каждого приложения на React является его стейт. Компоненты могут иметь свой собственный внутренний стейт и поверьте мне, несмотря на всю их простоту, вы можете делать с ними много невероятно крутых вещей. Но давайте представим, что вы создаёте приложение и в какой-то момент вам надо локально сохранить данные от пользователя или даже сохранить весь стейт для одного или нескольких других компонентов. И тут, возможно, вам захочется понять, а как же можно использовать localStorage в React приложении? Что же, начнем с того, что setState тут вам уже не помощник, но не переживайте, все будет довольно просто. Читаем дальше.
Если вы не знаете про то, как работает localStorage, то вот отличная статья — Как работать с localStorage в JavaScript
\n\n\n\nОно создано для того, чтобы хранить данные в браузере и оно потерпело значительное количество позитивных улучшений в сравнении со своим предшественником — кукисами. Сначала оно было как HTML5 API, ну а потом переросло уже в независимую рабочую единицу. Хранилище поддерживается буквально каждым современным браузером и даже некоторыми старичками, например такими как IE8. Веб хранилище реализовано двумя способами: первый — localStorage, постоянное хранилище данных, которое можно сравнить с постоянными кукисами, второе — sessionStorage, хранилище существующее только на время определенной сессии и на определенный период времени. Хоть эта статья и работает с localStorage, но вы также можете применить все описанные методики и на sessionStorage.
Итак, нам нужен компонент на котором мы будем все испытывать. Тут я думаю, что страница логина с опцией “Remember me” подойдет идеально. Для простоты и понятности, мы не будем добавлять поле пароля. Давайте посмотрим на метод render():
render() {\n return (\n <form onSubmit={this.handleFormSubmit}>\n <label>\n User: <input name=\"user\" value={this.state.user} onChange={this.handleChange}/>\n </label>\n <label>\n <input name=\"rememberMe\" checked={this.state.rememberMe} onChange={this.handleChange} type=\"checkbox\"/> Remember me\n </label>\n <button type=\"submit\">Sign In</button>\n </form>\n );\n}Как вы видите, это довольно простая форма с двумя инпутами и кнопкой. Код который должен обрабатывать стейт также очень легко понять:
\n\n\n\nexport default class SignIn extends Component {\n state = {\n user: '',\n rememberMe: false\n };\n \n handleChange = (event) => {\n const input = event.target;\n const value = input.type === 'checkbox' ? input.checked : input.value;\n \n this.setState({ [input.name]: value });\n };\n \n handleFormSubmit = () => {};\n \n render() { /*...*/ }\n}В примере кода выше мы используем метод setState, чтобы сохранять актуальность стейта при каждом изменении в форме. Если вы запустите проект, то вот, что получите:
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_oSfU_wl3WttGAdZLUMH7Hg.png\")
Если вы заполните инпут для пользователя, а потом кликните на “Remember Me” чекбокс и под конец кликните на кнопку “Sign In”, то вы заметите, что форма снова опустеет:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_gU6mXtUg4pfzPUOyYwJRgQ.gif\")
Это вполне нормальное поведение. Теперь мы должны узнать как же нам использовать localStorage в React и заставить форму работать должным образом.
В нашем примере нужно сохранить две вещи:
\n\n\n\nЗначение опции Remember Me
\n\n\n\nИмя пользователя, но только в том случае, если кликнули на опцию Remember Me
\n\n\n\nДля этих значений идеальным местом является метод handleFormSubmit:
handleFormSubmit = () => {\n const { user, rememberMe } = this.state;\n localStorage.setItem('rememberMe', rememberMe);\n localStorage.setItem('user', rememberMe ? user : '');\n};Что же происходит в этом методе?
\n\n\n\nСначала мы назначаем две переменные с помощью деструктуризации
\n\n\n\nДалее, мы вызываем метод localStorage.setItem, чтобы хранить значение опции “Remember Me”.
И под конец мы сохраняем имя пользователя, но только в том случае, когда “Remember Me” выставлено на true.
Вот, что пока что у нас есть:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_frlHF1ib5IHelm8clpXYYw.gif\")
Итак, полдела сделано. Теперь нам надо получить эти значения для компонента.
\n\n\n\nВсё логику получения данных мы положим в componentDidMount, но вы можете спокойно положить её и в конструктор, если конечно захотите, так как её первоочередная цель — это выставление изначального стейта нашему компоненту.
Обратите внимание, что вы не можете вызывать setState перед тем, как компонент монтируется, так что, если вы предпочитаете подход с конструктором, то выставьте свойство стейта напрямую. Я же предпочитаю аккуратный подход к коснтуктору, настолько аккуратный насколько это возможно, но это дело предпочтений.
componentDidMount() {\n const rememberMe = localStorage.getItem('rememberMe') === 'true';\n const user = rememberMe ? localStorage.getItem('user') : '';\n this.setState({ user, rememberMe });\n}Теперь давайте углубимся в код:
\n\n\n\nПервым делом мы получаем значение “Remember me”. Уже обратили внимание, что сравнение идёт со строкой “true”? Это потому что localStorage хранит данные как строки. Таким образом нам надо получить хранящееся значение и запарсить его обратно в логический тип данных, перед его непосредственным использованием. Вы бы также могли использовать JSON.parse, если бы были точно уверены в том, что там всегда будет храниться булево значение в виде строки. Но сейчас это нам не подойдет, так как само значение не выставлено при инициализации страницы.
Далее мы получаем имя пользователя, но только в том случае, если remeberMe имеет значение true.
И под конец мы назначаем эти значения стейту компонента.
\n\n\n\nИ вот она магия!
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_udpa03U52IDahtMogbbOiQ.gif\")
Как я говорил выше, localStorage может хранить данные только в виде строк. Если вы имеете дело только с несколькими сохраненными значениями, то это не очень то и большая проблема. Но если вы хотите воспользоваться localStorage на полную катушку в вашем приложении, то я очень советую взять на вооружение библиотеку, которая облегчит сохранение и получение данных, обойдя стороной такие процессы, как парсинг и обращение в строку. В этом деле идеально может подойти проверенная в боях Store.js. Это моя личная рекомендация.
В React localStorage очень просто использовать. Просто определите в каких случаях лучше сохранять и получать свои данные. Этот момент будет меняться от компонента к компоненту.
Вообще, вы можете давать данные компонентам, как и через конструктор, так и через componentDidMount. Но учтите, что если вы собираетесь использовать конструктор, то вам надо определять стейт заранее, напрямую указав его свойства, так как setState метод не сработает пока не смонтируется компонент.
Если вам нужна хорошая библиотека для работы со значениями localStorage, то рассмотрите использование Store.js.
Как использовать преимущества localStorage в React? Да легко! В этой статье вы узнаете об удобстве применения локального хранилища в React приложениях.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/localStorageReactkfk.jpg"}}},{"node":{"slug":"12-luchih-i-prosih-praktik-v-react-kotorih-stoit-priderzhivatsya-v-2020-godu","content":"\nВ этой статье собраны 12 простых и хороших практик при работе в React, которых стоит придерживаться, имея дело с этой библиотекой в 2020 году.
\n\n\n\n\n\n\n\nЕсли вы фронтэнд разработчик, вовлеченный в создание интерактивных пользовательских интерфейсов, то скорее всего вы работаете с React. Имея дело с проектами на этой библиотеке нужно быть крайне осторожным в написании кода таким образом, чтобы следовать лучшим практикам React, которые помогут лучше организовать ваш код.
\n\n\n\nКак вы уже знаете, React это библиотека созданная в Facebook и она допускает интеграцию в множеством уже готовых и интересных компонентов. По факту, любой разработчик может создать свои собственные компоненты и сделать их доступными для сообщества.
\n\n\n\nНо сегодня мы заострим внимание на самых основных из лучших практик при работе в React:
\n\n\n\nКак мы уже все знаем, в React можно создавать большие компоненты, которые будут выполнять несколько задач. Но лучше всего создавать компоненты, оставляя их небольшими, таким образом, чтобы каждый компонент отвечал за конкретный функционал. В идеале компонент должен рендерить конкретную часть вашей страницы или отвечать за определенное поведение. Вот несколько преимуществ такого подхода:
\n\n\n\nТакие компоненты существуют сами по себе, что делает их тестирование и поддержку гораздо проще.
\n\n\n\nКаждый небольшой компонент может быть повторно использован на нескольких проектах.
\n\n\n\nКомпоненты выполняющие общие функции можно легко сделать доступными на любого сообщества.
\n\n\n\nВ небольших компонентах проще делать оптимизацию производительности.
\n\n\n\nТакие компоненты проще обновлять.
\n\n\n\nБольшие компоненты нагружены в плане производительности и их может быть довольно тяжело поддерживать.
\n\n\n\nБаланс между созданием одного сжатого компонента и созданием нескольких, отвечающих только за свой функционал компонентов, может варьироваться от компании к компании. Но все же, вы можете наделать столько компонентов, сколько хотите и комбинировать их таким способом, чтобы достигнуть желаемого результата.
\n\n\n\nПридерживаясь правила “одна функция = один компонент”, вы можете улучшить повторное использование компонентов. Это означает то, что вам стоит избегать попыток создания новых компонентов для функционала, который уже существует в виде другой, уже готовой функции.
\n\n\n\nПовторно используя компоненты по всему вашему проекту или по нескольким проектам, вы не только вы обретете связность и логичность в ваших проектах, но это также поможет и другим людям работающим с вашим кодом.
\n\n\n\nС другой стороны, если любой компонент становится большим, громоздким и сложным в поддержке, то лучше всего разбить его на столько маленьких компонентов, насколько это возможно.
\n\n\n\nДля примера, вы можете создать компонент Button, который может принимать только нужные ему иконки. И каждый раз, когда вам понадобится кнопка, у вас уже будет под рукой нужный компонент. Модульный подход позволит вам покрыть множество рабочих моментов, применяя один и тот же кусок кода. Вам нужно стремиться к золотой середине. Компоненты должны быть достаточно абстрактными, но не очень уж загруженными.
class IconButton extends React.Component {\n [...]\n render() {\n return (\n <button onClick={this.props.onClick()}>\n <i class={this.props.iconClass}></i>\n </button>\n );\n }\n}Общее правило для написания любого кода — это держать его сжатым и стараться не раздувать по мере возможности.
\n\n\n\nЭто собственно и есть одна из лучших практик React. Избегайте дубликатов кода — ну или Don’t Repeat Yourself (DRY).
\n\n\n\nЭтого можно достичь тщательно изучив код на паттерны и на повторения. Если таковые имеются, то возможно вы повторяете свой код и у вас явно есть место где нужно пресечь такое повторение. Скорее всего, немного переписав код, вы сделаете его более сжатым и оставите таким же понятным.
\n\n\n\nЭтот момент опирается на принцип повторного использования в React. Давайте представим, что вам нужно добавить несколько кнопок, которые содержат в себе иконки, а вместо добавления разметки для каждой кнопки, вы можете просто применить компонент IconButton, показанный ниже. Вы можете зайти ещё дальше, отобразив все нужные кнопки с помощью массива с уже заготовленными для них данными.
const buttons = ['facebook', 'twitter', 'youtube'];\n\nreturn (\n <div>\n {\n buttons.map( (button) => {\n return (\n <IconButton\n onClick={doStuff( button )}\n iconClass={button}\n />\n );\n } )\n }\n </div>\n);И ещё раз, добавляйте их только там, где это действительно нужно. Это касается не только React, таким образом вы убьете сразу двух зайцев:
\n\n\n\nВаш код визуально будет чист и приведен в порядок.
\n\n\n\nВы избежите потенциального конфликта между кодом и комментариями, если вам в будущем понадобится переписать код.
\n\n\n\nЭто вообще хорошая идея, называть компоненты в соответствии с тем, что они делают, так вам проще будет их распознать в структуре приложения.
\n\n\n\nЕщё один пример, в котором предпочтительнее назвать компонент Avatar, так как он может использоваться везде в приложении — для авторов, пользователей или в комментариях. А вот если мы назовем компонент AuthorAvatar, сугубо в контексте использования, то мы как бы сократим полезность этого компонента до применения только у авторов.
Ну и более того, именование компонентов в соответствии с их функционалом станет полезными моментом для работы с любой командой или сообществом, сделав этот компонент доступнее в плане поиска.
\n\n\n\nЕсли вы, как и большинство других, используете JSX, то имена компонентов, создаваемых вами должны начинаться с заглавной буквы. К примеру, вам нужно называть компоненты как SelectButton, а не selectbutton или Menu, а не menu. Это делается для того, чтобы JSX определял их отдельно от стандартных HTML тегов.
В ранних версиях React был список встроенных имён, чтобы различить их от кастомных названий. Но так как такому списку нужна была постоянная поддержка и обновления, этот подход был пересмотрен и заглавные буквы стали нормой.
\n\n\n\nЕсли же JSX не ваш выбор, то вы можете использовать буквы нижнего регистра. Но это может сократить возможность повторного использования компонентов по всему проекту.
\n\n\n\nКомпоненты бывают со стейтом и без. Первые могут хранить информацию о стейте компонента и передавать необходимый контекст. А вторые, в свою очередь, не имеют памяти и не могут передавать контекст другим частям пользовательского интерфейса. Они только получают пропсы от родительских компонентов и отдают вам JSX элементы. Они масштабируемы и готовы к повторному использованию, а так же схожи с чистыми функциями в JavaScript.
\n\n\n\nОдной из лучших практик в React является хранение состояния логики загрузки данных отдельно от рендеринга любой логики без стейта. Лучше всего иметь один компонент со стейтом, чтобы подгружать данные и ещё один компонент, но уже без стейта, чтобы эти данные выводить. Такой подход сократит запутанность среди компонентов.
\n\n\n\nПоследние версии React 16.8 имеют на борту новую фичу, а именно хуки. Которые могут в конечном итоге вообще помочь избавиться от компонентов, основанных на классах.
\n\n\n\nДля примера, ваше приложение подтягивает данные после монтирования. Тут вам нужно управлять данными с основном компоненте и передать комплексный таск на рендер подкомпоннету, но в виде пропса.
\n\n\n\nimport RenderTable from './RenderTable';\n\nclass Table extends Component {\n state = { loading: true };\n\n render() {\n const { loading, tableData } = this.state;\n return loading ? <Loading/> : <RenderTable data={tableData}/>;\n }\n\n componentDidMount() {\n fetchTableData().then( tableData => {\n this.setState( { loading: false, tableData } );\n } );\n }\n}Ну тут реально, уже не надо никаких объяснений. Ваш код должен вести себя так, как от него и ожидают, а также должен быть готовым к тестированию в любой момент. Хорошей практикой является именование тестовых файлов также, как и исходных файлов, но с суффиксом .test.
Вы можете использовать JEST для тестирования вашего кода в React.
\n\n\n\nДержите все файлы для одного компонента в одной папке, даже включая файлы стилей.
\n\n\n\nВ случае, если маленький компонент используется другим компонентом и только им, то есть смысл хранить такие компоненты вместе, в папке родительского компонента. Такую иерархию потом будет легче понять — большие компоненты имеют свои собственные директории, а все их мелкие части разделены на поддиректории. Таким образом вы можете легко извлечь нужный код в любой другой проект или улучшить его при малейшей надобности.
\n\n\n\nДля примера, для компонента Form, все составляющие части, такие как CSS файлы, иконки, изображения, тесты и любые прилегающие компоненты, относящиеся к Form, должны находиться в одной и той же папке. Если вы именуете файлы с умом и держите все относящиеся друг к другу файлы вместе, согласно логическому порядку, то у вас не будет проблем в их последующем поиске.
Одной из лучших практик работы в React, которая поможет вам организовать ваши компоненты, это использование таких инструментов как Bit.
\n\n\n\nПодобные сервисы помогают поддерживать и переиспользовать код. Более того, они помогают коду быть более доступным и способствуют коллективной разработке компонентов. Также, код может быть легко синхронизирован среди компонентов.
\n\n\n\nСниппеты кода помогут вам оставаться на одной волне с лучшим кодом и самым продвинутом синтаксисом. Также они помогают вам относительно избавиться от багов, что делает их одной из лучших практик в React, которые вам явно не стоит пропускать.
\n\n\n\nВообще, существует множество библиотек сниппетов, которые вы можете смело использовать, например ES7 React, Redux, JS Snippets и т.п.
\n\n\n\nЛинтинг это процесс в котором мы запускаем программу, анализирующую код на потенциальные ошибки.
\n\n\n\nВ основном мы используем его для работы с конкретными языками. Но также мы можем фиксить и другие проблемы полностью автоматически, особенно со стилем написания кода. Используя линтер в React, мы делаем наш код относительно свободным от ошибок и багов.
\n\n\n\nЯ надеюсь, что этот список лучших практик поможет вам правильно наладить работу с вашими проектами и избежать потенциальных проблем.
\n","date":"2021-02-05T14:49:21.000Z","title":"12 лучших и простых практик в React, которых стоит придерживаться в 2020 году","id":"49bb3e2d-911e-5bc7-8c6e-cebf5ad58b0a","excerpt":"В этой статье собраны 12 простых и хороших практик при работе в React, которых стоит придерживаться, имея дело с этой библиотекой в 2020 году.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/reactpractice2020fjs.jpg"}}},{"node":{"slug":"pogruzhaemsya-v-raboty-s-children-na-react","content":"\nВ этой статье мы погрузимся в работу с children на React и узнаем как можно с ними работать на реальных примерах.
Основа React это компоненты. Вы можете вкладывать компоненты друг в друга также, как вы вкладываете друг в друга HTML теги, что упрощает работу с JSX, который собственно и напоминает HTML.
\n\n\n\nКогда я впервые увидел React, то я подумал, что нужно просто использовать props.children и дело в шляпе. Но как же сильно я ошибался.
Так как мы работаем с JavaScript, то мы можем делать с дочерними элементами (children) буквально всё, что угодно. Мы можем смело задавать им конкретные свойства, решать нужно ли их рендерить, ну и конечно же, управлять ими так, как нам надо. Так что дело это полезное и уж давайте при случае как можно глубже познаем всю прелесть работы с children на React.
Поехали!
\n\n\n\nПредположим, что у нас есть компонент <Grid />, который может содержать в себе компоненты <Row />. Мы бы написали это так:
<Grid>\n <Row />\n <Row />\n <Row />\n</Grid>![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_8qVzwdrogSF1hK-plv86bw.png\")
Эти три компонента Row передаются компоненту Grid как props.children. Используя контейнер для выражения (expression container это технический термин для этих волнистых скобок в JSX) родители могут рендерить свои дочерние элементы:
class Grid extends React.Component {\n render() {\n return <div>{this.props.children}</div>\n }\n}Родительские элементы также могут и не рендерить своих потомков или могут производить с ними какие-либо действия перед рендерингом. Для примера, этот компонент. <Fullstop /> вообще не будет рендерить свои дочерние элементы:
class Fullstop extends React.Component {\n render() {\n return <h1>Hello world!</h1>\n }\n}Совершенно неважно какие дочерние элементы будут переданы этому компоненту, он просто будет всегда показывать \"Hello world!\" и ничего более.
Обратите внимание, что h1 в примере выше рендерит свои дочерние элементы, в нашем случае это \"Hello world!\".
Children в React не обязательно быть компонентами, они могут быть всем, чем угодно. Для примера, мы можем передать нашему вышеупомянутому компоненту <Grid /> какой-либо текст в виде children и всё будет прекрасно работать:
<Grid>Hello world!</Grid>![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_BMyhht5dTdh2ncWJLdLezA.png\")
JSX автоматически удалит пробелы вначале и конце строки, а вместе с ними и пустые строки. Также пустые строки в середине строкового литерала преобразуются в один пробел.
\n\n\n\nЭто означает то, что все эти примеры ниже отрендерят одно и тоже:
\n\n\n\n<Grid>Hello world!</Grid>\n\n<Grid>\n Hello world!\n</Grid>\n\n<Grid>\n Hello\n world!\n</Grid>\n\n<Grid>\n\n Hello world!\n</Grid>Вы также можете смежно использовать разные типы дочерних элементов:
\n\n\n\n<Grid>\n Here is a row:\n <Row />\n Here is another row:\n <Row />\n</Grid>![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_g2Uq7Sd2nUKpCceozwKqjw.png\")
Мы можем передать любое JavaScript выражение, как дочерний элемент. И функции не исключение.
\n\n\n\nЧтобы показать то, как это выглядит, посмотрите на этот компонент, который выполняет функцию, которая была передана как дочерний элемент:
\n\n\n\nclass Executioner extends React.Component {\n render() {\n // Обратите внимание на то, как мы вызываем дочерний элемент, как функцию?\n // ↓\n return this.props.children()\n }\n}Вы бы могли вызвать этот компонент так:
\n\n\n\n<Executioner>\n {() => <h1>Hello World!</h1>}\n</Executioner>Это конечно не совсем пригодный пример, но он показывает саму идею.
\n\n\n\nПредставьте, что вам надо подтянуть какие-либо данные с сервера. Вы могли бы сделать это несколькими способами и это возможно сделать с этим function-as-a-child паттерном:
\n\n\n\n<Fetch url=\"api.myself.com\">\n {(result) => <p>{result}</p>}\n</Fetch>Не переживайте, если код выше смутил вас. Все, что я хотел сделать это то, чтобы вы не удивились увидев нечто подобное в реальной жизни. С children возможно всё.
Если вы посмотрите на документацию React, то вы увидите там , что “children это непрозрачная структура данных”. На самом деле они нам говорят о том, что props.children может быть любым типом данных, например таким как массив, функция, объект и тп. В общем, это может быть всем чем угодно.
В React есть несколько вспомогательных функций, которые могут помочь управлять children довольно легко и без лишних заморочек. Доступны они в React.Children.
Две самых очевидных из вышеупомянутых функций это React.Children.map и React.Children.forEach. Они работают так же как и их коллеги из методов массивов, за исключением того, что они также работают в момент передачи функции, объекта или чего-нибудь ещё непосредственно в children.
class IgnoreFirstChild extends React.Component {\n render() {\n const children = this.props.children\n return (\n <div>\n {React.Children.map(children, (child, i) => {\n // игнорируем первого потомка\n if (i < 1) return\n return child\n })}\n </div>\n )\n }\n}<IgnoreFirstChild /> компонент из кода выше, проходится по всем своим потомкам, игнорируя первый и возвращая всех остальных.
<IgnoreFirstChild>\n <h1>First</h1>\n <h1>Second</h1> // <- Only this is rendered\n</IgnoreFirstChild>![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_XAaXg_Pz8VUymyCAOAXoVw.png\")
В нашем случае мы бы могли также использовать this.props.children.map. Но чтобы произошло в случае, когда кто-нибудь бы передал функцию как потомка? this.props.children был бы функцией, а не массивом и мы бы словили ошибку.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_WxuWukVXXs5AJ4zfIi4Ltg.png\")
Но а с React.Children.map это не будет вообще проблемой:
<IgnoreFirstChild>\n {() => <h1>First</h1>} // <- Ignored 💪\n</IgnoreFirstChild>Так как this.props.children может быть совершенно любым типом данных, проверка количества потомков у компонента может быть довольно сложным процессом. Наивно написав this.props.children.length вы получите 12, если станете проверять строку \"Hello World!\", хоть там и будет один потомок.
Именно поэтому у нас и есть React.Children.count:
class ChildrenCounter extends React.Component {\n render() {\n return <p>React.Children.count(this.props.children)</p>\n }\n}Так мы получим количество потомков, вне зависимости от их типа данных:
\n\n\n\n// Renders \"1\"\n<ChildrenCounter>\n Second!\n</ChildrenCounter>\n\n// Renders \"2\"\n<ChildrenCounter>\n <p>First</p>\n <ChildComponent />\n</ChildrenCounter>\n\n// Renders \"3\"\n<ChildrenCounter>\n {() => <h1>First!</h1>}\n Second!\n <p>Third!</p>\n</ChildrenCounter>Ну и под конец, если ни один из методов выше вам не подходит, то вы можете конвертировать children в массив при помощи метода React.Children.toArray. Это было бы полезно в случае сортировки, например:
class Sort extends React.Component {\n render() {\n const children = React.Children.toArray(this.props.children)\n return <p>{children.sort().join(' ')}</p>\n }\n}\n<Sort>\n // Тут мы используем контейнеры выражений, чтобы убедиться в том, что наши строки\n // переданы как три отдельных потомка, а не как одна строка\n {'bananas'}{'oranges'}{'apples'}\n</Sort>Пример выше рендерит строки, но уже отсортированные:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_KuWvpsCo-OlyVOt6sMtXyQ.png\")
Обратите внимание, что возвращаемый React.Children.toArray массив не содержит потомков с типом функция, а только React.Element или строки.
Если вы вспомните о предыдущем компоненте <Executioner />, то он работает с одним потомком, который является функцией.
class Executioner extends React.Component {\n render() {\n return this.props.children()\n }\n}Мы можем уточнить это условие с помощью propTypes, что будет выглядеть примерно таким образом:
Executioner.propTypes = {\n children: React.PropTypes.func.isRequired,\n}Тут выйдет сообщение в консоль, которое в принципе будет проигнорировано разработчиком. Вместо этого мы можем использовать React.Children.only внутри рендера.
class Executioner extends React.Component {\n render() {\n return React.Children.only(this.props.children)()\n }\n}В этом случае отрендерится только один единственный потомок в this.props.children. Если их будет больше, чем один, то нам выкинет ошибку, следовательно, работа приложения будет приостановлена — идеально для тех случаев, когда ленивый разработчик пытается разобраться с вашим приложением.
Мы можем рендерить произвольные компоненты как children. Но продолжать контролировать их из родителя, а не из компонента из которого мы их рендерим. Давайте посмотрим на этот момент повнимательнее. Представим, что у нас есть компонент RadioGroup, который может включать в себя несколько компонентов RadioButton. (которые рендерят <input type=\"radio\">)
RadioButton’ы не рендерятся из RadioGroup сами по себе, а используются как Children. Что говорит о том, что где-то в нашем приложении у нас есть такой код:
render() {\n return(\n <RadioGroup>\n <RadioButton value=\"first\">First</RadioButton>\n <RadioButton value=\"second\">Second</RadioButton>\n <RadioButton value=\"third\">Third</RadioButton>\n </RadioGroup>\n )\n}В этом коде есть небольшая проблемка. Инпуты не сгруппированы, что приводит к такому результату:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_c-_IqGC8PTEfLUMg8CXM5Q.png\")
Чтобы их сгруппировать им всем нужно иметь одинаковый атрибут name. Мы бы конечно могли бы сразу назначить name каждому RadioButton:
<RadioGroup>\n <RadioButton name=\"g1\" value=\"first\">First</RadioButton>\n <RadioButton name=\"g1\" value=\"second\">Second</RadioButton>\n <RadioButton name=\"g1\" value=\"third\">Third</RadioButton>\n</RadioGroup>Но это скучно и возможно приведёт к ошибкам. А ведь у нас в руках вся сила JavaScript! Можем ли мы использовать её, чтобы автоматически указать RadioGroup нужное нам name для всех его children?
Итак, в RadioGroup мы добавим новый метод под названием renderChildren, который будет редактировать пропсы у children:
class RadioGroup extends React.Component {\n constructor() {\n super()\n this.renderChildren = this.renderChildren.bind(this)\n }\n\n renderChildren() {\n return this.props.children\n }\n\n render() {\n return (\n <div className=\"group\">\n {this.renderChildren()}\n </div>\n )\n }\n}Давайте пробежимся по всем потомкам, чтобы получить каждого из них по отдельности:
\n\n\n\nrenderChildren() {\n return React.Children.map(this.props.children, child => {\n return child\n })\n}Отлично, но как теперь мы можем редактировать их свойства?
\n\n\n\nИ вот тут в игру вступает последний вспомогательный метод. Как и подразумевается под его названием, React.cloneElement клонирует элемент. Мы передаём ему элемент, который желаем скопировать, как первый аргумент, а затем вторым аргументом передаём объект с пропсами, которые должны быть выставлены уже склонированному элементу:
const cloned = React.cloneElement(element, {\n new: 'yes!'\n})Теперь элемент cloned будет иметь пропс new со значением \"yes!\".
И это именно то, что нам нужно для завершения RadioGroup. Мы клонируем каждого потомка и выставляем ему пропс name со значением this.props.name.
renderChildren() {\n return React.Children.map(this.props.children, child => {\n return React.cloneElement(child, {\n name: this.props.name\n })\n })\n}Последним шагом мы передадим уникальный name к RadioGroup:
<RadioGroup name=\"g1\">\n <RadioButton value=\"first\">First</RadioButton>\n <RadioButton value=\"second\">Second</RadioButton>\n <RadioButton value=\"third\">Third</RadioButton>\n</RadioGroup>![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_IvXCEAgQmDEKAMiMk3-qmA.png\")
Работает! Вместо указания вручную атрибутов для каждого RadioButton, мы просто можем указать RadioGroup то, что нам нужно, чтобы было name и дальше он позаботиться об этом.
Children заставляют компоненты в React вести себя как элементы разметки, а не отдельные объекты. Используя силу JavaScript и некоторые вспомогательные функции React, мы можем смело с ними работать для создания декларативных API и вообще для упрощения в целом для упрощения рабочего процесса.
В этой статье мы погрузимся в работу с children на React и узнаем как можно с ними работать на реальных примерах.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/reactchildrenksdjnfk.jpg"}}},{"node":{"slug":"5-sovetov-kak-luchshe-pisat-uslovnie-konstrukcii-v-javascript","content":"\nВ этой статье рассказывается о том, как писать условные конструкции лучше, чем вы к этому скорее всего привыкли и наглядно, прямо на примерах показывается, как это делать в сравнении с обычными методами.
\n\n\n\n\n\n\n\n// условие\nfunction test(fruit) {\n if (fruit == 'apple' || fruit == 'strawberry') {\n console.log('red');\n }\n}На первый взгляд пример выше выглядит вполне хорошо. Однако, что же будет, если у нас станет больше красных фруктов. К примеру ещё добавится вишня (cherry) или клюква (cranberries)? Будем ли мы расширять условие с помощью дополнительных ||?
Мы можем свободно переписать условие, с использованием Array.includes. Смотрите, как это просто:
function test(fruit) {\n // Выгружаем условия в массив\n const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];\n\n if (redFruits.includes(fruit)) {\n console.log('red');\n }\n}Тут мы выгружаем список красных фруктов (redFruits) в массив. Так наш код будет выглядеть чище.
Давайте расширим предыдущий пример и включим в него ещё два условия.
\n\n\n\nЕсли нет фруктов, то выкинем ошибку.
\n\n\n\nВыведем в консоль сообщение, что фруктов больше 10.
\n\n\n\nfunction test(fruit, quantity) {\n const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];\n\n // Условие 1: fruit должен иметь значение\n if (fruit) {\n // Условие 2: он должен быть красным\n if (redFruits.includes(fruit)) {\n console.log('red');\n\n // Условие 3: должно быть большое количество\n if (quantity > 10) {\n console.log('big quantity');\n }\n }\n } else {\n throw new Error('No fruit!');\n }\n}\n\n// test results\ntest(null); // error: No fruits\ntest('apple'); // print: red\ntest('apple', 20); // print: red, big quantityА теперь, посмотрите на код выше, что у нас есть?
\n\n\n\n1 if/else, который фильтрует неверные условия
3 уровня вложения (условия 1, 2 и 3)
\n\n\n\nГлавное правило которому лично я стараюсь следовать — это всегда делать ранний выход из функции при обнаружении изначально неверного условия.
\n\n\n\n/_ Раннее завершение функции, если найдено неверное условие _/\n\nfunction test(fruit, quantity) {\n const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];\n\n // Условие 1: выдача ошибки сразу\n if (!fruit) throw new Error('No fruit!');\n\n // Условие 2: должно быть красным\n if (redFruits.includes(fruit)) {\n console.log('red');\n\n // Условие 3: большое количество\n if (quantity > 10) {\n console.log('big quantity');\n }\n }\n}Таким образом у нас на один уровень вложения меньше. Такой подход особенно хорош тогда, когда у вас реально длинное условие if (представьте, если бы вам пришлось скролить к самому концу кода, чтобы узнать, есть ли там else. Это же обалдеть можно)
Дальше мы можем ещё больше сократить вложения if, инвертируя условие с ранним выходом из функции. Посмотрите на второе условие ниже и всё увидите:
/_ ранний выход из функции, если найдено неверное условие _/\nfunction test(fruit, quantity) {\n const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];\n\n if (!fruit) throw new Error('No fruit!'); // Условие 1: выдача ошибки сразу\n if (!redFruits.includes(fruit)) return; Условие 2: стоп, если фрукт не красный\n\n console.log('red');\n\n // Условие 3: количество должно быть больше 10\n if (quantity > 10) {\n console.log('big quantity');\n }\n}Инвертируя условия во втором случае, наш код становится свободным от вложений. Этот подход полезен тогда, когда у нас довольно длинная логика условия и нам надо отменить последующий процесс если условие не удовлетворено.
\n\n\n\nОднако, это не то правило, которого нужно безукоризненно придерживаться. Спросите себя сами, эта версия (без вложения) лучше/более читабельная, чем предыдущая (второе условие с вложением)?
\n\n\n\nЛично для меня подходит предыдущая версия (второе условие с вложением). И вот почему:
\n\n\n\nКод короче и проще, он куда понятнее с вложенным if.
Инвертирование условия может нагрузить в плане логики и заставить лишний раз подумать.
\n\n\n\nКак вывод, всегда стремитесь к наименьшему вложению и раннему выходу из функции, но не пренебрегайте ими.
\n\n\n\nЯ полагаю, что код ниже может выглядеть для вас вполне знакомым, нам часто нужно проверять null/undefined и назначать дефолтные значения во время работы с JavaScript:
function test(fruit, quantity) {\n if (!fruit) return;\n const q = quantity || 1; // Если не указывается количество, то по-дефолту будет 1\n\n console.log(`We have ${q} ${fruit}!`);\n}\n\n//test results\ntest('banana'); // We have 1 banana!\ntest('apple', 2); // We have 2 apple!На самом деле мы можем избавиться от переменной q, указав дефолтные параметры функции.
function test(fruit, quantity = 1) { // Если не указывается количество, до по-дефолту будет 1\n if (!fruit) return;\n console.log(`We have ${quantity} ${fruit}!`);\n}\n\n//test results\ntest('banana'); // We have 1 banana!\ntest('apple', 2); // We have 2 apple!Куда проще и интуитивно понятнее, не так ли? Пожалуйста, обратите внимание на то, что каждый параметр может иметь своё собственное дефолтное значение. Для примера, мы можем указать дефолтное значение для fruit:
function test(fruit = 'unknown', quantity = 1)А что если fruit это объект? Можем ли мы назначить дефолтный параметр?
function test(fruit) { \n // выводим название фрукта, если его указывают\n if (fruit && fruit.name) {\n console.log (fruit.name);\n } else {\n console.log('unknown');\n }\n}\n\n//test results\ntest(undefined); // unknown\ntest({ }); // unknown\ntest({ name: 'apple', color: 'red' }); // appleПосмотрите на пример выше, там нам надо вывести имя фрукта, если оно доступно или мы выведем в консоль unknown. Мы можем смело избежать объявления условия fruit && fruit.name с помощью дефолтных параметров функции и деструктуризации.
// назначаем дефолтный пустой объект {}\nfunction test({name} = {}) {\n console.log (name || 'unknown');\n}\n\n//test results\ntest(undefined); // unknown\ntest({ }); // unknown\ntest({ name: 'apple', color: 'red' }); // appleТак как нам нужно только свойство name от fruit, мы можем деструктуризировать параметр, используя {name}, затем мы можем использовать name, как переменную в нашем коде, вместо fruit.name.
Мы также назначаем пустой объект {}, как дефолтное значение. Если мы так не сделаем, то получим ошибку при выполнении test(undefined) — Cannot destructure property name of ‘undefined’ or ‘null’. Потому что тут нет свойства name в undefined.
Если вы не против использовать сторонние библиотеки, то есть несколько способов сократить проверку null:
Используйте функцию get из Lodash
Используйте idx от Facebook (c Babeljs)
\n\n\n\nВот пример с Lodash:
\n\n\n\nfunction test(fruit) {\n console.log(__.get(fruit, 'name', 'unknown'); // Получает name у fruit, если его нет, то назначается ‘unknown’.\n}\n\n//test results\ntest(undefined); // unknown\ntest({ }); // unknown\ntest({ name: 'apple', color: 'red' }); // appleВы можете запустить демо код тут. Кроме того, если вы фанат Функционального Програмирования, вы можете выбрать Lodash fp, функциональную версию Lodash. Там метод изменится с get на getOr).
Давайте посмотрим на пример ниже, тут нам надо получить фрукты по их цвету:
\n\n\n\nfunction test(color) {\n // используйте case, для выбора фруктов по цвету\n switch (color) {\n case 'red':\n return ['apple', 'strawberry'];\n case 'yellow':\n return ['banana', 'pineapple'];\n case 'purple':\n return ['grape', 'plum'];\n default:\n return [];\n }\n}\n\n//test results\ntest(null); // []\ntest('yellow'); // ['banana', 'pineapple']Кажется, что в коде выше всё правильно, но мне он кажется довольно громоздким. Тот же результат можно получить с помощью объект литерала и более чистого синтаксиса:
\n\n\n\n// применяем объект литерал, чтобы найти фрукты по цвету\n const fruitColor = {\n red: ['apple', 'strawberry'],\n yellow: ['banana', 'pineapple'],\n purple: ['grape', 'plum']\n };\n\nfunction test(color) {\n return fruitColor[color] || [];\n}Или вы можете использовать Map, чтобы достичь того же результата:
// используйте Map, чтобы найти фрукты по цвету\n const fruitColor = new Map()\n .set('red', ['apple', 'strawberry'])\n .set('yellow', ['banana', 'pineapple'])\n .set('purple', ['grape', 'plum']);\n\nfunction test(color) {\n return fruitColor.get(color) || [];\n}Map это тип объекта, который появился в ES2015 и позволяет вам хранить данные как key value (ключ и его значение).
А теперь вопрос. Нужно ли нам прекратить использование switch? Не ограничивайте себя этим. Лично я использую объект литералы, когда это возможно, но я бы не стал выставлять жесткие ограничения в этом плане, используйте то, что больше подходит под конкретный случай.
У Todd Motto есть интересная статья, в которой он углубляется в вопрос использования switch и объект литералов, тут вы можете её прочитать.
\n\n\n\nДля примера выше, на самом деле, мы можем отрефакторить код с помощью Array.filter.
const fruits = [\n { name: 'apple', color: 'red' }, \n { name: 'strawberry', color: 'red' }, \n { name: 'banana', color: 'yellow' }, \n { name: 'pineapple', color: 'yellow' }, \n { name: 'grape', color: 'purple' }, \n { name: 'plum', color: 'purple' }\n];\n\nfunction test(color) {\n // используем Array.filter, чтобы найти фрукты по цвету\n\n return fruits.filter(f => f.color == color);\n}Всегда есть больше одного способа достигнуть одного и того же результата. Мы увидели 4 для одного и того же примера. В общем, кодить очень даже весело!
\n\n\n\nПоследний совет скорее касается применения сравнительно новой функции массивов, с помощью которой можно значительно сократить ваш код. Посмотрите на пример ниже, тут мы хотим проверить все ли фрукты красного цвета:
\n\n\n\nconst fruits = [\n { name: 'apple', color: 'red' },\n { name: 'banana', color: 'yellow' },\n { name: 'grape', color: 'purple' }\n ];\n\nfunction test() {\n let isAllRed = true;\n\n // Условие: все фрукты должны быть красными\n for (let f of fruits) {\n if (!isAllRed) break;\n isAllRed = (f.color == 'red');\n }\n\n console.log(isAllRed); // false\n}Тут всё так долго, мы вполне можем сократить число строк с помощью Array.every:
const fruits = [\n { name: 'apple', color: 'red' },\n { name: 'banana', color: 'yellow' },\n { name: 'grape', color: 'purple' }\n ];\n\nfunction test() {\n // Короткий способ выставления условия\n const isAllRed = fruits.every(f => f.color == 'red');\n\n console.log(isAllRed); // false\n}Теперь всё куда опрятнее, да? Таким же образом мы можем проверить есть ли в нашем массиве красные фрукты, для этого мы можем просто использовать Array.some в одну строку.
const fruits = [\n { name: 'apple', color: 'red' },\n { name: 'banana', color: 'yellow' },\n { name: 'grape', color: 'purple' }\n];\n\nfunction test() {\n // Условие: есть ли красные фрукты в массиве\n const isAnyRed = fruits.some(f => f.color == 'red');\n\n console.log(isAnyRed); // true\n}В этой статье рассказывается о том, как писать условные конструкции лучше, чем вы к этому скорее всего привыкли и наглядно, прямо на примерах показывается, как это делать в сравнении с обычными методами.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/uslconstrukciifkjnsdkj.jpg"}}},{"node":{"slug":"ponimaem-carrirovanie-v-javascript","content":"\nВ этой статье вы простым языком поймете работу с каррированием в JavaScript и увидите рабочие примеры его применения.
\n\n\n\n\n\n\n\nФункциональное программирование это стиль написания кода, в котором функции передают как аргументы (колбэки) и отдают тоже функции без сайд-эффектов(изменения состояния приложения).
\n\n\n\nМножество языков приняли такую стилистику в своей работе с кодом. Самые популярные из них это: JavaScript, Haskell, Clojure, Erlang и Scala.
\n\n\n\nВозможность передавать и возвращать функции породила много других концепций:
\n\n\n\n\n\n\n\nЧистые функции
Каррирование
Функции высшего порядка
И сейчас мы разберем одну из них. А именно каррирование, ну или карринг. Кому как удобно.
\n\n\n\nЭто процесс в функциональном программировании при котором мы можем трансформировать функцию с несколькими аргументами в упорядоченную последовательность вложенных друг в друга совершенно разных функций. Она возвращает новую функцию, которая ожидает уже следующий аргумент.
\n\n\n\nОна будет отдавать новую функцию до тех пор, пока не закончится количество аргументов. Аргументы остаются доступными в области видимости и используются при запуске кода, когда завершающая функция в цепочке каррирования отдаётся и запускается.
\n\n\n\n\n\n\n\nКаррирование это процесс превращения функции с множественной арностью в функцию с меньшей арностью — Кристина Брэйнвэйв.
Обратите внимание, что термин арность относится напрямую к количеству аргументов которое берет функция. Для примера:
\n\n\n\nfunction fn(a, b) {\n //...\n}function _fn(a, b, c) {\n //...\n}У функции fn два аргумента (2х арная функция), а _fn имеет три аргумента(3х арная функция).
Так что каррирование трансформирует функцию с несколькими аргументами в последовательную серию связанных функций, каждая из которых берет один из нужных аргументов.
\n\n\n\nДавайте посмотрим на простой пример:
\n\n\n\nfunction multiply(a, b, c) {\n return a * b * c;\n}Функция берёт три аргумента, умножает числа и отдаёт результат:
\n\n\n\nmultiply(1,2,3); // 6Посмотрите как мы вызвали функцию умножения с полным набором аргументов. Теперь давайте создадим каррированную версию этой функции и посмотрим, как бы мы могли вызвать ту же функцию, но уже через серию запросов:
\n\n\n\nfunction multiply(a) {\n return (b) => {\n return (c) => {\n return a * b * c\n }\n }\n}log(multiply(1)(2)(3)) // 6Мы превратили функцию multiply(1,2,3) в несколько вызовов других вызовов multiply(1)(2)(3).
Просто напросто одна простая функция была переделана в серию последовательных функций. Чтобы получить результат умножения трёх чисел 1, 2 и 3, числа передаются одно за другим, каждое число передаётся следующей функции для запуска.
\n\n\n\nМы могли бы разделить multiply(1)(2)(3) на несколько функций, чтобы вы лучше поняли процесс:
const mul1 = multiply(1);\nconst mul2 = mul1(2);\nconst result = mul2(3);\nlog(result); // 6Давайте рассмотрим всё по последовательности. Мы передали 1 функции multiply:
let mul1 = multiply(1);Она отдаёт функцию:
\n\n\n\nreturn (b) => {\n return (c) => {\n return a * b * c\n }\n }Теперь mul1 это функция с аргументом b.
Далее мы берём функцию mul1, передавая ей 2:
let mul2 = mul1(2);mul1 отдаст третью функцию:
return (c) => {\n return a * b * c\n }Отданная функция теперь хранится в переменной mul2.
По-сути mul2 будет:
mul2 = (c) => {\n return a * b * c\n }Где mul2 вызывается с 3 как параметром:
const result = mul2(3);Что делает вычисления вместе с параметрами, переданными ранее: a=1, b=2. В итоге получаем 6.
log(result); // 6Будучи вложенной функцией, mul2 имеет доступ к области видимости других функций, multiply и mul1.
Вот так mul2 будет делать вычисления с переменными указанными в фунциях из которых уже вышли. Хоть функции уже давно и были отданы и зачищены в памяти, но переменные из них ещё остаются доступными.
Вы видите, что три числа были применены одна за другой каждый раз и каждый раз новая функция отдавалась, но до тех пор, пока все числа не иссякнут.
\n\n\n\nДавайте посмотрим на другой пример:
\n\n\n\nfunction volume(l,w,h) {\n return l * w * h;\n}\nconst aCylinder = volume(100,20,90) // 180000lУ нас есть функция volume, которая высчитывает объем любой твёрдой формы.
Подход с каррированием будет принимать один аргумент и отдавать функцию, которая также будет принимать ещё один аргумент и отдавать тоже функцию. Это будет продолжаться до последнего аргумента и пока не вернется последняя функция, в которой произойдут уже все операции с умножением предыдущих аргументов вместе с последним.
\n\n\n\nfunction volume(l) {\n return (w) => {\n return (h) => {\n return l * w * h\n }\n }\n}\nconst aCylinder = volume(100)(20)(90) // 180000Тоже, что и в функции multiply, последняя функция принимает только h, но произведет операции с другими переменными, которые были в уже завершившихся функциях. Это работает вне зависимости от замыканий.
В общем, суть каррирования в том, что мы берём функцию и извлекаем другую функцию, которая отдаёт уже специализированную функцию.
\n\n\n\nМне нравится математическая иллюстрация на Википедии, показывающая концепцию каррирования. Давайте посмотрим на неё с нашим собственными примером.
\n\n\n\nУ нас есть уравнение.
\n\n\n\nf(x,y) = x^2 + y = zЕсть две переменные x и y. Если бы двум переменным было выдано x=3 и y=4, то каким было бы z.
Если мы заменим y на 4 и x на 3 в f(x,y):
f(x,y) = f(3,4) = x^2 + y = 3^2 + 4 = 13 = zТо мы получим результат — 13.
Мы можем каррировать f(x,y), чтобы получить переменные из последовательности функций:
h = x^2 + y = f(x,y)\nhy(x) = x^2 + y = hx(y) = x^2 + y\n[hx => w.r.t x] and [hy => w.r.t y]Если мы поправим x=3 в уравнении hx(y) = x² + y, то оно отдаст новое уравнение у которого есть y как переменная:
h3(y) = 3² + y = 9 + y
\n\n\n\nЭто тоже самое, что и:
\n\n\n\nh3(y) = 3^2 + y = 9 + yЗначение не было решено, оно отдало новое уравнение 9 + y, ожидая ещё одну переменную y.
Далее мы передадим y=4:
h3(4) = h(3)(4) = f(3,4) = 9 + 4 = 13y это последняя переменная в цепочке, сложение происходит с предыдущей переменной x=3 и получается 13.
Мы просто напросто каррировали уравнение f(x,y) = 3² + y в последовательность других уравнений.
h3(y) = h(3)(y) = f(3,y) = 3^2 + y = 9 + yПеред тем как получить результат.
\n\n\n\nТут немного математики и вы можете не совсем понять, что там происходит. Почитайте все детали на Википедии.
\n\n\n\nСейчас некоторые могут подумать, что количество вложенных функций в карированной функции зависит от числа получаемых аргументов. Ну, собственно в карировании так оно и есть.
\n\n\n\nСейчас я могу сделать функцию volume таким образом:
function volume(l) {\n return (w, h) => {\n return l * w * h\n }\n}И теперь её можно вызывать так:
\n\n\n\nconst hCy = volume(70);\nhCy(203,142);\nhCy(220,122);\nhCy(120,123);Или вот так:
\n\n\n\nvolume(70)(90,30);\nvolume(70)(390,320);\nvolume(70)(940,340);Мы только что сделали специальную функцию, которая считает объем любого цилиндрического объекта длинной (l), 70.
Она принимает 3 аргумента и имеет 2 вложенные функции в отличие от предыдущей версии, которой нужно 3 аргумента и у которой 3 вложенные функции.
\n\n\n\nНо эта версия без каррирования. Там мы просто сделали частичное применение функции volume.
Собственно каррирование и частичное применение схожи, но подразумевают под собой разные концепции.
\n\n\n\nЧастичное применение преобразует функцию в другую функцию с меньшей арностью.
\n\n\n\nfunction acidityRatio(x, y, z) {\n return performOp(x,y,z)\n}\n|\nV\nfunction acidityRatio(x) {\n return (y,z) => {\n return performOp(x,y,z)\n }\n}Обратите внимание, что тут я оставил в покое детали выполнения функции peroformOp. Она не очень важна. Всё, что вам нужно знать, это концепции применения каррирования и частичного применения.
Это частичное применение функции acidityRatio. Тут нет каррирования. Эта функция частично применена, чтобы получить меньшую арность, ожидая меньшее количество аргументов, чем изначальная функция.
Чтобы применить каррирование, мы могли бы сделать так:
\n\n\n\nfunction acidityRatio(x) {\n return (y) = > {\n return (z) = > {\n return performOp(x,y,z)\n }\n }\n}Каррирование создаёт вложенные функции в соответствии с числом аргументов в ней. Каждая функция тут получает свой аргумент. Если нет аргумента, то нет и каррирования.
\n\n\n\nКаррирование работает для функций с числом аргументов больше двух — Wikipedia.
\n\n\n\n\n\n\n\nКаррирование преобразует функцию в последовательность других функций, каждая из которых берёт по одному аргументу каррированной функции.
Могут быть случаи в которых карррование и частичное применение пересекаются. Предположим, что у нас есть такая функция:
\n\n\n\nfunction div(x,y) {\n return x/y;\n}Если мы применим частичное применение, то получим вот что:
\n\n\n\nfunction div(x) {\n return (y) => {\n return x/y;\n }\n}И каррирование даст нам такой же результат:
\n\n\n\nfunction div(x) {\n return (y) => {\n return x/y;\n }\n}Хоть эти два подхода и дают схожий результат, все же по сути они разные.
\n\n\n\nКак мы раньше говорили, каррирование и частичное применение схожи, но внутри у них всё по-другому. Общее у них то, что при работе они зависят от замыканий.
\n\n\n\nЕстественно, этот подход очень удобен если вам надо:
\n\n\n\nНаписать небольшие модули кода, которые можно переиспользовать и конфигурировать с легкостью, как и с npm:
\n\n\n\nДля примера у вас есть магазин и вы хотите дать 10% скидку вашим любимым клиентам:
\n\n\n\nfunction discount(price, discount) {\n return price * discount\n}Когда один из таких клиентов что-нибудь покупает на 500$, то вы её даёте ему:
\n\n\n\nconst price = discount(500,0.10); // $50 \n// $500 - $50 = $450Тут вы понимаете, что этот процесс будет происходить ежедневно:
\n\n\n\nconst price = discount(1500,0.10); // $150\n// $1,500 - $150 = $1,350\nconst price = discount(2000,0.10); // $200\n// $2,000 - $200 = $1,800\nconst price = discount(50,0.10); // $5\n// $50 - $5 = $45\nconst price = discount(5000,0.10); // $500\n// $5,000 - $500 = $4,500\nconst price = discount(300,0.10); // $30\n// $300 - $30 = $270Мы можем просто каррировать функцию скидки, чтобы нам не пришлось всегда добавлять 0.10.
function discount(discount) {\n return (price) => {\n return price * discount;\n }\n}\n\nconst tenPercentDiscount = discount(0.1);Теперь нам нужна только цена для расчета стоимости со скидкой:
\n\n\n\ntenPercentDiscount(500); // $50\n// $500 - $50 = $450И снова, так получается, что некоторые клиенты уж очень нам важны, важнее других. И мы хотим им дать скидку уже в 20%.
\n\n\n\nТут мы будем использовать нашу каррированую функцию скидки:
\n\n\n\nconst twentyPercentDiscount = discount(0.2);Мы делаем новую функцию для наших очень важных клиентов, вызывая функцию каррирования со значением 0.2, что есть 20%.
Отдаваемая функция twentyPercentDiscount будет использоваться для расчета скидок у таких важных клиентов:
twentyPercentDiscount(500); // 100\n// $500 - $100 = $400\ntwentyPercentDiscount(5000); // 1000\n// $5,000 - $1,000 = $4,000\ntwentyPercentDiscount(1000000); // 200000\n// $1,000,000 - $200,000 = $600,000Ещё мы можем избегать частых вызовов функций с одним и тем же аргументом:
\n\n\n\nДля примера, у нас есть функция для расчета объема цилиндрического объекта:
\n\n\n\nfunction volume(l, w, h) {\n return l * w * h;\n}Так получается, что все они с высотой в 100m. Это приведет к вызову функции с повторяющимся аргументом h = 100.
volume(200,30,100) // 2003000l\nvolume(32,45,100); //144000l\nvolume(2322,232,100) // 53870400lЧтобы решить эту проблему, мы каррируем функцию volume:
function volume(h) {\n return (w) => {\n return (l) => {\n return l * w * h\n }\n }\n}Теперь мы можем сделать специальную функцию для цилиндров с конкретной высотой:
\n\n\n\nconst hCylinderHeight = volume(100);\nhCylinderHeight(200)(30); // 600,000l\nhCylinderHeight(2322)(232); // 53,870,400lДавайте сделаем функцию, которая берёт любую функцию и отдаёт каррированную версию этой функции.
\n\n\n\nДля этого мы можем сделать так:
\n\n\n\nfunction curry(fn, ...args) {\n return (..._arg) => {\n return fn(...args, ..._arg);\n }\n}Что тут произошло? Наша функция каррирования принимает функцию (fn), которую мы хотим, собственно, каррировать и также неизвестное число параметров(…args). Rest оператор используется, чтобы собрать все параметры после fn в …args.
Далее, мы отдаём функцию, которая также собирает все остаточные параметры как …_args. Эта функция вызывает изначальную функцию fn, передавая ей …args и …_args используя spread оператор для параметров, далее значение отдаётся пользователю.
Теперь мы можем использовать нашу собственную функцию для каррирования нужных функций.
\n\n\n\nДавайте применим эту функцию для создания более специфичной функции по расчёту объёма стометровых цилиндров:
\n\n\n\nfunction volume(l,h,w) {\n return l * h * w\n}\nconst hCy = curry(volume,100);\nhCy(200,900); // 18000000l\nhCy(70,60); // 420000lЗамыкания делают каррирование возможным. Возможность сохранять состояние уже выполненных функций даёт нам возможность для создания фэктори-функций, которые могут давать точное значение аргументу.
\n\n\n\nКаррирование очень коварное дело поначалу, учитывая замыкания и функциональное программирование. Но я убеждаю вас, что со временем и постоянной практикой, вы полностью его поймете и увидите всю его ценность.
\n\n\n\nСсылки:
\n\n\n\n\n\n\n\n\n","date":"2021-02-01T16:48:24.000Z","title":"Понимаем каррирование в JavaScript","id":"6a1ff13a-ed43-5409-ac7c-2badd1566a47","excerpt":"В этой статье вы простым языком поймете работу с каррированием в JavaScript и увидите рабочие примеры его применения.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/curryingjskfds.jpg"}}},{"node":{"slug":"podrobnoe-rukovodstvo-po-jsx-v-react","content":"\nПочему-то довольно мало внимания уделяется именно глубокому понимаю JSX, хотя он необходим для полноценной и быстрой работы с React. Я не нашел в рунете действительно подробного руководства по JSX в React и перевел эту статью, добавив немного от себя.
\n\n\n\n\n\n\n\nJSX это технология, которая была представлена React.
\n\n\n\nХоть React может работать без использования JSX, это всё же идеальный помощник для работы с компонентами, так что React во многом выигрывает, применяя JSX.
\n\n\n\nСначала вы можете подумать, что использование JSX это смесь HTML и JavaScript (И как вы далее заметите еще и CSS).
\n\n\n\nНо это не так, так как то, что вы реально делаете при использовании JSX синтаксиса, это написание того же самого декларативного синтаксиса, но только тем, чем должен быть компонент UI.
\n\n\n\nИ вы обрисовываете UI не используя строки, а используя JavaScript, с которым можно делать много всего интересного и полезного.
\n\n\n\nВот как вы обозначите h1 тег, включающий в себя строку:
const element = <h1>Hello, world!</h1>Это смахивает на странный микс JavaScript и HTML, но в реальности это всё чистый JavaScript.
\n\n\n\nА то, что похоже на HTML, на самом деле является синтаксическим сахаром для определения компонентов и их позиционирования внутри разметки.
\n\n\n\nВнутри JSX выражения можно совершенно легко вставить любые атрибуты:
\n\n\n\nconst myId = 'test'\nconst element = <h1 id={myId}>Hello, world!</h1>Вам достаточно только обратить внимание тогда, когда у атрибута есть тире, что конвертирует его в горбатый регистр и обратите внимание ещё на эти два специальных случая:
\n\n\n\nclass становится className
for становится htmlFor
\n\n\n\nТак как это зарезервированные слова в JavaScript.
Вот пример JSX, который заключает два компонента в div тег:
<div>\n <BlogPostsList />\n <Sidebar />\n</div>Тег всегда должен быть закрыт, так как это скорее XML, чем HTML (если вы помните деньки с XHTML, было схоже, но затем простой и понятный синтаксис HTML5 все таки взял верх). В этом случае используется самозакрывающийся тег.
\n\n\n\nОбратите внимание на то, как я обернул два компонента в div. Почему? Потому, что функция render() может отдать только один узел, так что в случае, когда вам надо вернуть двух потомков, просто добавьте родителя. Это может быть вообще любой тег, не только div.
Браузер не может понимать JS файлы, которые содержат JSX код. Сначала они должны быть трансформированы в обычный и понятный JavaScript.
\n\n\n\nКак это сделать? В процессе транспиляции.
\n\n\n\nМы уже говорили, что JSX опционален и в принципе, необязателен в React, потому что для каждой JSX строки, есть соответствующая JavaScript альтернатива и в конечном итоге именно в нее трансформируется наш JSX.
\n\n\n\nДля примера, следующие две конструкции полностью равнозначны:
\n\n\n\nReactDOM.render(\n React.createElement('div', { id: 'test' },\n React.createElement('h1', null, 'A title'),\n React.createElement('p', null, 'A paragraph')\n ),\n document.getElementById('myapp')\n)А это уже JSX:
\n\n\n\nReactDOM.render(\n <div id=\"test\">\n <h1>A title</h1>\n <p>A paragraph</p>\n </div>,\n document.getElementById('myapp')\n)Это очень простой пример для начала понимания, но вы уже можете представить, то как более сложный синтаксис на чистом JS может быть сравним с использованием JSX.
\n\n\n\nВо время написания, самым популярным способом была транспиляция с использованием Babel, что является дефолтной опцией при запуске create-react-app, так что, если вы её используете, то вам не стоит беспокоиться, там все произойдет само собой.
А если вы не используете create-react-app, то вам придется настраивать Babel самому.
JSX допускает использование любого, вставленного в него JavaScript.
\n\n\n\nВсякий раз когда вам нужно добавить какой-либо JS, просто вставьте его в фигурные скобки {}.
Для примера, вот как использовать переменную, которую будет доступна отовсюду:
\n\n\n\nconst paragraph = 'A paragraph'\nReactDOM.render(\n <div id=\"test\">\n <h1>A title</h1>\n <p>{paragraph}</p>\n </div>,\n document.getElementById('myapp')\n)Это простой пример. Фигурные скобки принимают любой JS код:
\n\n\n\nconst paragraph = 'A paragraph'\nReactDOM.render(\n <table>\n {rows.map((row, i) => {\n return <tr>{row.text}</tr>\n })}\n </table>,\n document.getElementById('myapp')\n)Как вы видите, мы вложили JavaScript в JSX, объявленный внутри JavaScript, который вложен в JSX. В общем то тут вы можете пойти настолько глубоко, насколько захотите.
\n\n\n\nJSX напоминает HTML, но на самом деле это XML синтаксис.
\n\n\n\nВ конечном итоге получается, что вы рендерите HTML, так что вам всего-лишь нужно знать несколько различий между тем, как вы определите некоторые вещи в HTML и как вы это сделаете в JSX.
\n\n\n\nJSX это как XHTML, если вы когда-либо его использовали, то вы уже знаете, что в нём надо закрывать все теги: забудьте про <br>, а вместо этого используйте самозкрывающийся тег <br />. Ну и также делайте с другими тегами.
В HTML вы найдете атрибуты без каких-либо изменений. В JSX они переименованы в свою вариацию на горбатом регистре:
\n\n\n\nonchange => onChange
onclick => onClick
onsubmit => onSubmit
Так как JSX это JavaScript и class это зарезервированное слово, вы не можете написать:
<p class=\"description\">Но вам нужно использовать:
\n\n\n\n<p className=\"description\">Тоже самое применяется к for, который превращается в htmlFor.
Атрибут style в HTML позволяет указывать инлайновые стили. В JSX это больше не принимается как строка, а в разделе CSS в React вы узнаете почему это так удобно.
JSX даёт клевый способ указывать CSS стили.
\n\n\n\nЕсли у вас есть небольшой опыт работы с инлайновым HTML, то на первый взгляд вам покажется, что вас отправили лет на 10–15 назад, в мир, где инлайновый CSS был абсолютной нормой.
\n\n\n\nНо стилизация с JSX это не тоже самое: во первых, вместо принятия строки, содержащей свойства CSS, JSX атрибут style принимает только объект. Это означает, то что вы определяете свойства в объекте:
var divStyle = {\n color: 'white'\n}\n\nReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode)Или
\n\n\n\nReactDOM.render(<div style={{ color: 'white' }}>Hello World!</div>, mountNode)CSS значения, которые вы пишите в JSX, слегка другие, чем чистый CSS:
\n\n\n\nОсновные названия свойств пишутся в горбатом регистре
\n\n\n\nЗначения это просто строки
\n\n\n\nВы разделяете каждое “определение” с помощью запятой
\n\n\n\nCSS это нерешенная проблема. После его появления, появились десятки инструментов, связанных с ним, которые стремительно взлетали и также быстро были забыты. Главная проблема с JS в том, что тут нет областей видимости и довольно легко написать CSS, который не работает так, как надо, следовательно, “грязные быстрые решения” могут повлиять на те элементы, которые вообще не должны быть затронуты.
\n\n\n\nРешение ли это?
\n\n\n\nИнлайновые стили в JSX конечно хороши, пока вам не надо: написать медиа запросы, стили анимаций, сослаться на псевдо-классы, сослаться на псевдо-элементы.
\n\n\n\nВкратце, они покрывают основы, но это далеко не конечное решение.
\n\n\n\nJSX добавляет некоторые изменения в то, как работают формы в HTML, с целью того, чтобы упростить жизнь разработчику.
\n\n\n\nАтрибут value, всегда содержит дефолтное значение, которое было указано при создании поля.
Это помогает решить некоторые неординарные моменты в поведении регулярного взаимодействия с DOM, когда проверка input.value и input.getAttribute('value') возвращает одно настоящее значение и одно изначальное дефолтное значение.
Это также применимо к полю textarea.
<textarea>Some text</textarea>Но вместо:
\n\n\n\n<textarea defaultValue={'Some text'} />Для полей select, вместо этого:
<select>\n <option value=\"x\" selected>\n ...\n </option>\n</select>Более последовательный onChange
Передавая функции атрибуту onChange, вы можете подписаться на события в полях формы.
Это работает последовательно через поля, даже radio, select и checkbox срабатывают по onChange.
onChange также срабатывает при написании символов в input или textarea.
Чтобы смягчить любой возможный риск XSS искплойтов, JSX принудительно автоматически экранирует выражения.
\n\n\n\nЭто означает то, что вы можете столкнуться с некоторыми затруднениями во время использования HTML в строчном выражении.
\n\n\n\nДля примера, вы ожидаете, что выдаст © 2017:
<p>{'© 2019'}</p>Но увы, вам выдаст © 2017, так как строка экранизирована.
Чтобы исправить эту проблему, вы можете какбы вынести все за пределы выражения:
\n\n\n\n<p>© 2017</p>Так и использовать константу, которая выведет Unicode представление, соответствующее HTML который вам нужно вывести:
\n\n\n\n<p>{‘\\u00A9 2017’}</p>Чтобы добавить пробел в JSX есть два правила:
\n\n\n\nЕсли у вас есть пробел между элементами на одной линии, то всё это сократится до одного пробела.
\n\n\n\n<p>Something becomes this</p>Это станет:
\n\n\n\n<p>Something becomes this</p>Вертикальные пробелы стираются:
\n\n\n\n<p>\n Something\n becomes\n this\n</p>Это станет:
\n\n\n\n<p>Somethingbecomesthis</p>Чтобы пофиксить эту проблему, вам надо явно добавить пробел, добавив выражения как тут:
\n\n\n\n<p>\n Something\n {' '}becomes\n {' '}this\n</p>Или вставив строку в выражении:
\n\n\n\n<p>\n Something\n {' becomes '}\n this\n</p>Вы можете добавлять комментарии в JSX, используя обычные JavaScript комментарии внутри выражения:
\n\n\n\n<p>\n {/* коммент */}\n {\n //еще один коммент\n }\n</p>В JSX довольно частой операцией является назначение значений атрибутам. Вместо того, чтобы делать это вручную:
\n\n\n\n<div>\n <BlogPost title={data.title} date={data.date} />\n</div>Вы можете передать их с помощью оператора расширения Spread:
\n\n\n\n<div>\n <BlogPost {...data} />\n</div>И свойства из объекта data, будут использоваться, как атрибуты в автоматическом порядке, спасибо тут оператору расширения из ES2015.
Если у вас есть есть коллекция элементов по которой вам нужно пройтись циклом для создания JSX части компонента, то вы можете спокойно запустить цикл и затем добавить JSX в массив.
\n\n\n\nconst elements = [] //..какой то массив\n\nconst items = []\n\nfor (const [index, value] of elements.entries()) {\n items.push(<Element key={index} />)\n}Теперь отрендеря JSX вы можете вставить массив items, обернув его в фигурные скобки.
const elements = ['one', 'two', 'three'];\n\nconst items = []\n\nfor (const [index, value] of elements.entries()) {\n items.push(<li key={index}>{value}</li>)\n}\n\nreturn (\n <div>\n {items}\n </div>\n)\nВы можете сделать тоже самое напрямую в JSX, применяя map, вместо for-of цикла.
const elements = ['one', 'two', 'three'];\nreturn (\n <ul>\n {elements.map((value, index) => {\n return <li key={index}>{value}</li>\n })}\n </ul>\n)Почему-то довольно мало внимания уделяется именно глубокому понимаю JSX, хотя он необходим для полноценной и быстрой работы с React. Я не нашел в рунете действительно подробного руководства по JSX в React и перевел эту статью, а ещё добавил немного от себя.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/jsxreactnkjnk.jpg"}}},{"node":{"slug":"razbiraemsya-s-putanitsei-mezhdu-metodami-javascript-slice-splice-i-split","content":"\nОчень полезная статья про то, как работают методы slice(), splice() и split(). В реальном мире даже опытные разработчики делают в них ошибки.
Встроенные в JavaScript методы действительно сильно помогают в процессе разработки, особенно если мы понимаем принцип их работы должным образом. Я бы хотел объяснить функционал трёх из них: это splice(), slice() и split(). Возможно потому, что их имена очень похожи — их зачастую путают даже опытные разработчики.
Я настоятельно рекомендую студентам и джуниорам читать эту статью внимательно, потому что эти три метода могут быть включены в процесс собеседования.
\n\n\n\nВы найдете обобщенные описания методов в конце статьи. Ну а теперь давайте начнем.
\n\n\n\nВо первых, вам необходимо понять как работают массивы в JavaScript. Как и в других языках программирования, мы используем массивы для хранения разнообразных данных в JS.
\n\n\n\nИногда нам нужно выполнять какие-либо операции на этих массивах. И тогда мы прибегаем к JavaScript методам, например к slice() или splice(). Ниже вы видите, как объявлять массив в JavaScript:
let arrayDefinition = []; // Объявление массиваА теперь давайте объявим ещё один массив с разными типами данных. Ниже, в своих примерах, я буду использовать именно его :
\n\n\n\nlet array = [1, 2, 3, \"hello world\", 4.12, true];Такое возможно в JavaScript. Массив с разными типами данных: строка, число и булево значение.
\n\n\n\nМетод slice() копирует заданную часть массива и возвращает её в виде совершенно нового массива. Этот метод вообще не трогает оригинальный массив:
array.slice(from, until);From: с индекса какого элемента начинается нарезка массива
\n\n\n\nUntil: до какого элемента массива нарезается массив
\n\n\n\nДля примера, нам нужно нарезать первые три элемента из вышеуказанного массива. Так как первый элемент в массиве всегда имеет индекс 0, то начнём мы нарезку именно с него.
\n\n\n\narray.slice(0, until);А теперь хитрый момент. Когда мне надо нарезать первые три элемента, мне надо задать параметр until = 3. Почему? Потому что slice() не затрагивает последний заданный элемент.
array[0] --> 1 // включён\narray[1] --> 2 // включён\narray[2] --> 3 // включён\narray[3] --> \"hello world\" // уже не включён\nЭто может создать некое недопонимание. Именно по этому я назвал второй параметр until (до).
let newArray = array.slice(0, 3); // Отдаётся также массивИ наконец, я назначаю нарезанный массив на переменную newArray. Давайте посмотрим, что получается:
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_ppPGRgqMpZHQzB3P8oDCog.png\")
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_bsh2j7UulR4s3I2WNSFt5A.png\")
Важное замечание: метод slice() также можно использовать и на строках.
Название этой функции очень похоже на slice(). Такая схожесть зачастую сбивает разработчиков с толку. Метод splice() изменяет массив, добавляя или удаляя элементы в нем. Давайте посмотрим, как мы можем удалить элементы с помощью splice():
Для их удаления нам надо задать параметр index и число элементов, которые будут удалены:
array.splice(index, number of elements);Тут index — это начальная точка для удаления элементов. Элементы, которые имеют индекс ниже заданного не будут удалены:
array.splice(2); // Каждый элемент, начиная с 3го будет удалёнЕсли мы не указываем второй параметр, то будут удалены все элементы, начиная с заданного значения index.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_VB2SB-PcqfpOc6NCprj3DA.png\")
Во втором примере я задам вторым параметром число 1, что говорит о том, что элементы в массиве, начиная с числа index будут удалены по одному, при каждом вызове метода splice():
array.splice(2, 1);![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_eGMPlB-7wsZ8AZOYTm4GoQ.png\")
После 1-го вызова:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_kVAntaGUhGgYQxvTss280g.png\")
После 2-го вызова:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_jXkzRgcIpRsWdDQUzeIVkw.png\")
В общем, это будет продолжаться пока вообще не останется элементов под индексом 2.
\n\n\n\nДля добавления элементов нам нужно указать 3, 4 и 5й параметры (в зависимости от того, сколько мы хотим добавить) методу splice():
array.splice(index, number of elements, element, element);Как пример, я добавляю a и b в самое начала массива, при этом ничего не удаляя:
array.splice(0, 0, 'a', 'b');![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_ehL_z84tfMd-HLNDUN2KUw.png\")
Методы slice() и splice() для массивов. А вот метод split() используется для строк. Он делит строку на подстроки и отдаёт их в виде массива. Ему нужны 2 параметра и оба они опциональны.
string.split(separator, limit);Separator: определяет как разделять строку. Запятой, символом или тп.
\n\n\n\nLimits: ограничивает количество разделений, опираясь на заданное число.
\n\n\n\nЭтот метод не работает с массивами напрямую. Но однако, мы сначала можем конвертировать элементы массива в строку, а потом уже использовать метод split().
Давайте посмотрим как это работает.
\n\n\n\nСначала мы конвертируем наш массив в строку при помощи метода toString():
let myString = array.toString();![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_2IsKWAZB6HV27l8ZvINePA.png\")
Теперь давайте разделим myString по запятым, ограничив его до 3 подстрок и возвратим его, как массив:
let newArray = myString.split(\",\", 3);\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_vaN5R2yodR0o7fpfpw3TMg.png\")
Как мы видим, myString разделен запятыми. А так как мы ограничиваем разбитие строки до 3-х элементов в массиве, то только первые 3 из них будут возвращены.
Обратите внимание, что если бы мы использовали array.split(\"\"), то каждый символ в строке был бы разделен на подстроки:
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_ddeJQxxJ3XUFR5Fp4pudhg-1.png\")
array.slice (from, until)Slice()array.splice (index, number of elements, element)array.splice (index, number of elements)string.split(separator, limit)Конечно же есть и другие встроенные JavaScript методы для работы с массивами и строками. Если вы поймете как их использовать, то они значительно упростят ваш процесс разработки.
\n","date":"2021-01-27T21:14:20.000Z","title":"Разбираемся с путаницей между JavaScript методами slice(), splice() и split()","id":"d3649fe4-c4f6-5d60-8269-f291cca2e0e9","excerpt":"Очень полезная статья про то, как работают методы slice(), splice() и split(). В реальном мире даже опытные разработчики делают в них ошибки.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/splitsplicekfjdsn.jpg"}}},{"node":{"slug":"ponimaem-nemedlenno-vyzyvaemie-funkcii-iife-i-nemnogo-bolshe","content":"\nВ этой статье вы подробно узнаете, что такое IIFE, какие они бывают и как их использовать в JavaScript.
\n\n\n\n\n\n\n\nПонимание принципов работы функций и последующее осознание того, как их использовать при написании современного, понятного JavaScript’а — является необходимым критерием для оттачивания мастерства в этом языке программирования.
\n\n\n\nОдин из часто используемых паттернов, связанных с функциями имеет причудливое название: Immediately-invoked Function Expression или по-русски Немедленно вызываемое функциональное выражение. Или, как с любовью говорят в народе — IIFE, произнося, как “Ифи”.
\n\n\n\nПеред тем как понять, что такое IIFE и зачем они нам вообще нужны, стоит быстренько рассмотреть несколько основополагающих концепций, связанных с функциями в JavaScript.
\n\n\n\nНовички в JavaScript обычно чувствуют себя комфортно, имея дело с синтаксисом функций.
\n\n\n\nfunction sayHi() {\n alert(\"Hello, World!\");\n}\n\nsayHi(); // Покажет \"Hello, World!\" в alert браузера.Строки 1–3 объявляют функцию sayHi.
На 5 строке мы вызываем её с обычными скобками ().
Такой способ создания функции называется “определением функции” или “объявлением функции”, ну или “указанием функции”. Обычно, новые разработчики в JavaScript не испытывают с ним проблем, так как он ну уж очень сильно напоминает функции/методы в других популярных языках программирования.
\n\n\n\n\n\n\n\nТакие объявления функций всегда начинаются со слова
functionи всегда за ним идет название этой самой функции. Вы не можете пропустить указание имени, так как это уже будет неверным синтаксисом.
Тут уже все становится интереснее. Давайте посмотрим на то, как выглядят функциональные выражения в JavaScript.
\n\n\n\nvar msg = \"Hello, World!\";\nvar sayHi = function() {\n alert(msg);\n};\n\nsayHi(); // Покажет \"Hello, World!\" в alert браузера.Этот вроде бы простой пример может помочь вам прокачать скиллы в JavaScript до следующего уровня.
\n\n\n\nНа первой строке объявляется переменная msg и ей назначается строковое значение.
Строки 2–4 объявляют переменную sayHi и назначают ей значение, являющееся функцией.
На шестой строке мы вызываем эту самую функцию sayHi.
Первую строку легко понять. Но когда разработчики видят строки 2–4 в первый раз, то это обычно вызывает затруднения, если они зашли из другого языка программирования, например из Java.
\n\n\n\n\n\n\n\nОбычно, в строках 2–4 мы указываем значение, которое является функцией для переменной
sayHi.В примере выше, функция с левой стороны оператора назначения зачастую называется “функциональным выражением”. Они буквально везде в JavaScript. Большинство колбэков, которые вы бы написали, были бы этими самыми функциональными выражениями.
Вы возможно уже использовали их, но без понимания того, как это работает под капотом. Но поняв принцип их работы, вы обретёте некую скрытую суперсилу, доступную в JavaScript.
\n\n\n\n\n\n\n\nТак что, тут важно запомнить само понятие того, что в этом случае функции, являются почти такими же значениями, как и все другое в JavaScript. Они могут быть с правой стороны оператора назначения или они могут быть переданы, как аргументы другим функциям.
Итак, вы уже знаете, что это такое. Пример выше и был анонимным функциональным выражением. Анонимными они являются потому, что у них не указано имя после слова function.
Да, функциональные выражения могут иметь имена. Самое обыденное и всюду объясняемое использование проименованных функциональных выражений — это рекурсия. Пока что не беспокойтесь о них, вы вполне можете понять IIFE и так.
\n\n\n\nvar fibo = function fibonacci() {\n // тут вы можете использовать \"fibonacci()\"\n};\n\n // fibonacci() не сработает, а fibo() да.Разница тут в том, что функциональное выражение имеет имя “fibonacci”, которое можно использовать внутри самого выражения рекурсивным способом. (Тут вообще есть много всего интересного, например то, что имя функции всплывает в стектрейсе и т.п., но об этом нам не стоит беспокоиться в этом руководстве).
\n\n\n\nСпасибо за терпение при объяснении этого важнейшего скилла, который так важен в JavaScript.
\n\n\n\nТеперь, когда вы узнали про функциональные выражения и объявления функций, давайте погрузимся в тайный мир IIFE, мир немедленно вызываемых функций. Они могут иметь несколько стилистический вариаций. Сначала посмотрим на самую простую.
\n\n\n\n!function() {\n alert(\"Hello from IIFE!\");\n}();\n// Покажет alert “Hello from IIFE!”Это, друзья мои, наша ненаглядная IIFE функция в действии. Когда вы скопируете этот код и вставите его в консоль браузера, вы увидите alert из второй строчки кода. Вот и всё, собственно. Никто никогда не увидит этот alert снова.
\n\n\n\nЭто функция, которая исчезает сразу же после того, как увидит свет.
А теперь давайте разберем этот не совсем интуитивно понятный синтаксис: я знаю, вы обратили внимание на “!”, если же нет, то не переживайте, вы обратили внимание на это сейчас.
Как мы видели до этого, объявление функции всегда начиналось со слова function. Всякий раз, когда JavaScript видит слово function, как вводное слово, он ожидает того, что сейчас будет объявлена функция. Чтобы этого не случилось, мы префиксим “!” перед словом function на первой строке. Это просто подталкивает JavaScript рассматривать всё, что идёт после восклицательного знака, как выражение.
Но самое интересное происходит на 3 сроке, где мы уже мгновенно вызываем это выражение.
\n\n\n\n\n\n\n\nИтак, у нас есть функциональное выражение, которое сразу же вызывается после создания. И это, друзья мои, называется IIFE, не смотря на стилистику исполнения, используемую для достижения эффекта.
Вообще, в такой вариации можно использовать не только “!”, а заменить его на +, — или ~. В общем, подойдет любой унарный оператор.
А теперь, попробуйте это всё в консоли. Поиграйтесь с IIFE в своё удовольствие.
\n\n\n\n\n\n\n\nЕдинственное, что тут делает символ
!, так это превращает функцию в выражение, вместо объявления функции. И потом, сразу же, мы выполняем эту функцию.
Ещё один быстрый пример:
\n\n\n\nvoid function() {\n alert(\"Hello from IIFE!\");\n}();И снова, void просто принуждает функцию к тому, чтобы ее рассматривали как выражение.
Все подходы описанные выше могут быть полезны тогда, когда вам не нужно получать никакого значения от IIFE.
\n\n\n\nНо что делать, если вам нужно его получить и ещё потом где-то использовать? Читайте дальше, чтобы увидеть ответ на этот вопрос.
\n\n\n\nПаттерн IIFE, который мы видели выше, довольно легко понять. Поэтому я начал с него, а не с других, куда более часто используемых подходов.
\n\n\n\n\n\n\n\nКак мы видели в примерах IIFE выше, суть паттерна в том, чтобы взять функцию и превратить её в выражение, а затем тут же его запустить.
Сначала давайте посмотрим на ещё один пример функционального выражения!
\n\n\n\n(function() {\n alert(\"I am not an IIFE yet!\");\n});В примере выше функциональное выражение на строках 1–3 обернуто в скобки. Пока что, это не IIFE, так как это функциональное выражение никогда не запускалось и не запуститься. А теперь давайте доделаем этот код и превратим его в IIFE, для этого у нас есть два варианта стилизации:
\n\n\n\n// Variation 1\n(function() {\n alert(\"I am an IIFE!\");\n}());\n\n// Variation 2\n(function() {\n alert(\"I am an IIFE, too!\");\n})();Теперь у нас есть две рабочие IIFE. Может быть немного тяжеловато подметить разницу между ними. Так что давайте я вам сейчас её объясню.
\n\n\n\nВ первом варианте, на строке 4, скобки () для запуска функционального выражения содержат еще и внешние скобки. Они нужны для того, чтобы создать функцию за пределами этой функции.
Во втором варианте, на строке 9, скобки для запуска функционального выражения находятся за пределами оборачивающих функцию кавычек.
\n\n\n\nОба вариант широко используют. Лично я предпочитаю первый. Если мы начнем придираться и капнем глубже, то оба варианта слегка отличаются друг от друга в плане работы под капотом. Но для практических целей и для того, чтобы хоть как-то сократить этот туториал, то скажу я вам так — используйте просто любой из этих способов на ваше усмотрение.
\n\n\n\nДавайте снова разберем всё на рабочих примерах. Мы начнем с раздачи имён нашим IIFE, так как использование анонимных функций никогда не было хорошей идеей в этом случае.
\n\n\n\n// Правильная IIFE\n(function initGameIIFE() {\n // Весь код тут\n}());\n\n // Дальше будут два неправильных примера\nfunction nonWorkingIIFE() {\n // Теперь понятно зачем нужны эти скобки вокруг меня\n // Без них я объявление функции, а не выражение\n // Тут вы схватите синтаксическую ошибку\n}();\n\nfunction () {\n // И тут тоже\n}();Теперь вы знаете почему странные обертывающие скобки вокруг функционального выражения нужны в паттерне IIFE.
\n\n\n\nЗапомните, вам нужно функциональное выражение, чтобы сформировать IIFE. Объявления/определения функции никогда не используются для создания IIFE.
\n\n\n\nВ чем действительно хороши IIFE, так это в возможности создания области видимости.
\n\n\n\n\n\n\n\nЛюбые переменные внутри IIFE не видимы для внешнего мира.
Давайте посмотрим на пример.
\n\n\n\n(function IIFE_initGame() {\n // Приватные переменные к которым нет доступа за пределами IIFE\n var lives;\n var weapons;\n \n init();\n\n // Приватные функции к которым нет доступа за пределами IIFE\n function init() {\n lives = 5;\n weapons = 10;\n }\n}());В этом примере мы объявили две переменные внутри IIFE и тут они приватные, то есть только для самой IIFE. Никто за пределами IIFE не имеет к ней доступа. Так же, у нас есть функция init, к которой ни у кого нет доступа за пределами IIFE. Но функция init имеет доступ к приватным переменным.
\n\n\n\nВ следующий раз, когда вы будете создавать группу переменных и функций в глобальной области видимости, которые никто не использует за пределами вашего кода, просто оберните все их в IIFE и получит в ответочку много хорошей JavaScript кармы за такие дела. Ваш код будет также работать, но только теперь вы не будете загрязнять глобальную область видимости. А еще вы защитите ваш код от тех, кто может случайно внести изменения в глобальные переменные, ну а может быть и не случайно.
Когда мы доберемся до модульного паттерна, тогда я объясню то, как раздать привилегии и контролировать доступ к таким приватным переменным, даже за пределами IIFE. В общем, читаем дальше, пусть даже если вы уже чувствуете себя IIFE ниндзей!
\n\n\n\nЕсли вам не нужно отдавать никаких значений в IIFE, то тогда вы могли бы просто использовать первый вариант стилизации, увиденный в этой статье, подразумевающий использование унарных операторов !, +, void и т.п.
Но ещё одной реально важной и полезной фичей IIFE является то, что с их помощью вы можете отдавать значение, которое будет назначено переменной.
\n\n\n\nvar result = (function() {\n return \"From IIFE\";\n}());\n\nalert(result); // alerts \"From IIFE\"В этой вариации у нас есть IIFE, которая отдаёт значение на второй строке.
\n\n\n\nКогда мы выполняем код выше, то строка 5 показывает alert с отдаваемым значением от IIFE.
В общем, тут мгновенно выполнилась IIFE и потом отдало значение, которое назначилось переменной result.
Это очень крутой паттерн, который мы будем использовать в примере с модульным паттерном.
\n\n\n\nIIFE не только могут отдавать значения, но ещё и брать аргументы во время своего вызова. Давайте посмотрим на этот короткий пример.
\n\n\n\n(function IIFE(msg, times) {\n for (var i = 1; i <= times; i++) {\n console.log(msg);\n }\n}(\"Hello!\", 5));В примере выше, а именно на 1й строке, IIFE чисто формально имеет два параметра с именами msg и times.
Когда мы выполняем её на 5й строке, то вместо пустых скобок, мы в них передаём аргументы IIFE.
\n\n\n\nСтроки 2 и 3 используют эти параметры уже внутри IIFE.
\n\n\n\nЭто тоже довольно полезный паттерн и мы часто его видим в jQuery, да и в других библиотеках тоже.
\n\n\n\n(function($, global, document) {\n // используем баксик для jQuery, а global для window\n}(jQuery, window, document));В пример выше, мы передаём jQuery, window и document, как аргументы к IIFE на строке 3. Код внутри IIFE может ссылаться к ним, как к $, global, document.
Вот несколько преимуществ такой передачи параметров к IIFE.
\n\n\n\nJavaScript всегда делает поиск по области видимости заданной функции и продолжает поиск в области видимости выше, пока не найдёт указанный идентификатор. Когда мы передаём document на 3 строке, то это один и единственный раз, когда мы делаем поиск вне локальной области видимости. Любые отсылки к document в IIFE, никогда не должны искаться за пределами локальной области видимости самой IIFE. Так же и с jQuery. Даже в зависимости от сложности кода, рост производительности может быть не слишком высок, но всё равно эту фишку полезно знать.
Также, минифаеры JS могут безопасно минифицировать имена параметров, указанных в функции. Если мы не передавали эти параметры, то минифаеры не будут отсылаться к document или jQuery, так как они находятся вне области видимости этой функции.
Теперь, когда вы отточили навыки работы с IIFE, давайте посмотрим на пример модульного паттерна, который раскрывают всю мощь совместного применения замыканий и IIFE функций.
\n\n\n\nТут мы применим классический синглтон объект Sequence, в котором всё стабильно отрабатывает без возможности непреднамеренного изменения значения.
Мы разделим код на два шага, чтобы постепенно понять то, что происходит под капотом.
\n\n\n\nvar Sequence = (function sequenceIIFE() {\n \n // приватная переменная для хранения значения счетчика\n var current = 0;\n \n // объект, возвращаемый IIFE\n return {\n };\n \n}());\n\nalert(typeof Sequence); // alerts \"object\"В этом примере, наша IIFE отдаёт объект. Смотрите строки 7 и 8.
\n\n\n\nТакже тут есть локальная переменная под названием current.
Отдаваемое IIFE значение, которое является объектом и назначается на переменную Sequence.
А теперь давайте усложним код, добавив несколько функций в отдаваемый нами объект.
\n\n\n\nvar Sequence = (function sequenceIIFE() {\n \n // приватная переменная для хранения значения счетчика\n var current = 0;\n \n // объект, возвращаемый IIFE\n return {\n getCurrentValue: function() {\n return current;\n },\n \n getNextValue: function() {\n current = current + 1;\n return current;\n }\n };\n \n}());\n\nconsole.log(Sequence.getNextValue()); // 1\nconsole.log(Sequence.getNextValue()); // 2\nconsole.log(Sequence.getCurrentValue()); // 2В этом примере мы добавили две функции нашему отдаваемому объекту.
\n\n\n\nСтроки 8–10 хранят функцию getCurrentValue, которая отдаёт значение из переменной current.
Строки 12–15 добавляют функцию getNextValue, которая увеличивает значение current на 1 и затем отдаёт его значение.
Так как переменная current является приватной в IIFE, то никто кроме функций, имеющих доступ к IIFE через замыкание, не имеет к ней доступа.
Теперь вы узнали реально мощный паттерн JavaScript. Он включает в себя мощь использования IIFE и замыканий вместе.
\n\n\n\nЭто очень простая вариация модульного паттерна. Есть и другие паттерны такого плана, но почти все из них используют IIFE для создания закрытой области видимости.
\n\n\n\nСкобки вокруг функционального выражения обычно принуждают функцию к виду выражения, вместо обычного объявления функции.
\n\n\n\nНо когда JavaScript движку понятно, что это функциональное выражение и нам технически просто не нужны оборачивающие скобки, как показано в примере ниже.
\n\n\n\nvar result = function() {\n return \"From IIFE!\";\n}();В примере выше, слово function это не первое слово в объявлении. Поэтому JavaScript не воспринимает его, как указание функции. Также есть и другие случаи, в которых вы можете избежать кавычек, когда вы знаете то, что это выражение.
Но даже в этом случае я пытаюсь использовать скобки. Они улучшают читабельность, прямо с первых строк стилистически подсказывая человеку, что это будет IIFE. И никому не надо будет скроллить к последней строке функции, чтобы понять то, что только что они прочитали не простую функцию, а именно IIFE.
\n\n\n\nЭто всё, что вам нужно знать для начала работы с IIFE. Они не только помогают организовывать и изображать ваш код в приятной и понятной манере, они также помогают сократить количество багов, избегая создания совершенно ненужных элементов глобальной области видимости.
\n\n\n\nНу всё, теперь вы, можно сказать, что сертифицированный IIFE ниндзя!
\n","date":"2021-01-26T00:56:07.000Z","title":"Понимаем немедленно вызываемые функции IIFE и немного больше","id":"0106d270-fa32-58a4-80d7-04d2c536af00","excerpt":"В этой статье вы подробно узнаете, что такое IIFE, какие они бывают и как их использовать в JavaScript.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/iifejsnfdks.jpg"}}},{"node":{"slug":"7-poleznyh-ulovok-s-rest-parametrami-i-spread-operatorom-na-javascript-objectah","content":"\n7 удобных трюков с rest и spread, которые значительно упростят ваш процесс написания кода.
\n\n\n\n\n\n\n\nЕсли у вас есть время, то советую сначала прочитать Оператор spread и rest параметры в JavaScript
\n\n\n\nRest параметры и оператор spread можно использовать не только для простой работы с остаточными аргументами и для создании массивов.
\n\n\n\nНиже вы узнаете 7 малоизвестных трюков с использованием вышеупомянутых операторов в JavaScript.
\n\n\n\nВы можете клонировать объект, параллельно добавляя дополнительные свойства клонированному объекту.
\n\n\n\nВ этом примере user клонирован и к нему добавлен password в userWithPass.
const user = { id: 100, name: 'Howard Moon'}\nconst userWithPass = { ...user, password: 'Password!' }\n\nuser //=> { id: 100, name: 'Howard Moon' }\nuserWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }Ещё вы можете слить два объекта в один новый.
\n\n\n\npart1 и part2 сливаются в user1.
const part1 = { id: 100, name: 'Howard Moon' }\nconst part2 = { id: 100, password: 'Password!' }\n\nconst user1 = { ...part1, ...part2 }\n//=> { id: 100, name: 'Howard Moon', password: 'Password!' }Объекты также можно слить и с таким синтаксисом:
\n\n\n\nconst partial = { id: 100, name: 'Howard Moon' }\nconst user = { ...partial, id: 100, password: 'Password!' }\n\nuser //=> { id: 100, name: 'Howard Moon', password: 'Password!' }Свойства можно удалить используя деструктуризацию в комбинации с rest оператором. Тут мы деструктуризируем password и остальные свойства объекта отдаются как rest.
const noPassword = ({ password, ...rest }) => rest\nconst user = {\n id: 100,\n name: 'Howard Moon',\n password: 'Password!'\n}\n\nnoPassword(user) //=> { id: 100, name: 'Howard moon' }Функция removeProperty берёт props как аргумент. Используя вычисление имен свойств prop может быть исключен динамически из объекта клона.
const user1 = {\n id: 100,\n name: 'Howard Moon',\n password: 'Password!'\n}\nconst removeProperty = prop => ({ [prop]: _, ...rest }) => rest\n// ---- ------\n// \\ /\n// dynamic destructuring\n\nconst removePassword = removeProperty('password')\nconst removeId = removeProperty('id')\n\nremovePassword(user1) //=> { id: 100, name: 'Howard Moon' }\nremoveId(user1) //=> { name: 'Howard Moon', password: 'Password!' }Иногда свойства находятся не в нужном нам порядке. Используя несколько трюков мы можем поставить нужные свойства в самый верх списка или же наоборот, в самый низ.
\n\n\n\nЧтобы отправить id на первое место, добавьте id: undefined новому объекту перед оператором расширения.
const user3 = {\n password: 'Password!',\n name: 'Naboo',\n id: 300\n}\n\nconst organize = object => ({ id: undefined, ...object })\n// -------------\n// /\n// move id to the first property\n\norganize(user3)\n//=> { id: 300, password: 'Password!', name: 'Naboo' }Чтобы отправить password на последнее место, то сначала деструктуризируйте password из object. Далее, выставьте password за оператором расширения.
const user3 = {\n password: 'Password!',\n name: 'Naboo',\n id: 300\n}\n\nconst organize = ({ password, ...object }) =>\n ({ ...object, password })\n// --------\n// /\n// move password to last property\n\norganize(user3)\n//=> { name: 'Naboo', id: 300, password: 'Password!' }Дефолтные свойства это значения, которые будут выставлены только когда они не включены в оригинальный объект.
\n\n\n\nВ нашем примере user2 не включает в себя quotes. Функция setDefaults проверяет есть ли в объектах quotes, если нет, то он будет выставлен на [].
Вызывая setDefaults(user2), отдающееся значение будет включать в себя quotes: [].
Вызывая setDefaults(user4) ничего не поменяется, потому что user4 уже содержит quotes.
const user2 = {\n id: 200,\n name: 'Vince Noir'\n}\n\nconst user4 = {\n id: 400,\n name: 'Bollo',\n quotes: [\"I've got a bad feeling about this...\"]\n}\n\nconst setDefaults = ({ quotes = [], ...object}) =>\n ({ ...object, quotes })\n\nsetDefaults(user2)\n//=> { id: 200, name: 'Vince Noir', quotes: [] }\n\nsetDefaults(user4)\n//=> {\n//=> id: 400,\n//=> name: 'Bollo',\n//=> quotes: [\"I've got a bad feeling about this...\"]\n//=> }Это также может быть написано таким образом:
\n\n\n\nconst setDefaults = ({ ...object}) => ({ quotes: [], ...object })Совмещая методики описанные выше, мы можем создать функцию которая переименовывает свойства.
\n\n\n\nПредставьте, что у вас есть несколько объектов с ID в верхнем регистре, которые должны быть в нижнем. Начните с деструктуризации ID из объекта. Далее, верните его в объект как id.
const renamed = ({ ID, ...object }) => ({ id: ID, ...object })\n\nconst user = {\n ID: 500,\n name: \"Bob Fossil\"\n}\n\nrenamed(user) //=> { id: 500, name: 'Bob Fossil' }Спасибо @vinialbano за то, что указал на то, что вы можете ещё и добавлять свойства в зависимости от условий. В этом примере, password будет добавлен только если password определен.
const user = { id: 100, name: 'Howard Moon' }\nconst password = 'Password!'\nconst userWithPassword = {\n ...user,\n id: 100,\n ...(password && { password })\n}\n\nuserWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }7 удобных трюков с rest и spread, которые значительно упростят ваш процесс написания кода.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/restspreadkjnkjn.jpg"}}},{"node":{"slug":"operator-spread-i-rest-parametry-v-javascript","content":"\nВ этой статье вы узнаете про возможности применения, такого функционала, как spread оператор и rest параметры. И как при помощи первого, без особого труда можно конвертировать итерируемые объекты в массивы.
\n\n\n\nМожно переводить эти названия, а можно и нет. Но я лично считаю, что в этом случае лучше придерживаться англоязычной терминологии, так как такой термин, как “оператор расширения” могут понять не все и вообще это довольно грубый перевод, а “остаточные параметры” может выходить из контекста данного применения. Но в тексте будут звучать два варианта.
\n\n\n\n\n\n\n\nОбычно при работе с JavaScript функциями у нас имеется конкретное число параметров для каждой функции. Если вы хотите посчитать квадратный корень числа с помощью Math.sqrt(x), то вам всегда нужно вводить один параметр. Само собой, некоторые функции могут требовать и несколько параметров. Но в некоторых случаях с большим количеством оных, вы можете спокойно пропустить несколько последних из них, в силу их опциональности. Во всех этих случаях, все параметры указываются, как часть сигнатуры функции:
function doSomething(first, second, third) { \n // Do something cool\n}Но что, если количество параметров вообще неизвестно заранее и их может быть вообще неизвестно сколько?
\n\n\n\nДля примера, давайте возьмём Math.min() и Math.max(). Они работают с любым количеством параметров, хоть с 0, 2-мя или 30-ю.
Math.Min(); // Infinity\nMath.Min(1); // 1\nMath.Min(1,2,3,4,3,1,5,7,9,0,-9,18,37,81); // -9Как бы вы написали такую функцию?
\n\n\n\nКогда вам приходится работать с переменным количеством параметров в функции, то обычно вашим единственным вариантом был бы объект arguments. Внутри каждой функции существует объект argument, который имеет массивоподобную структуру, содержащую все аргументы, переданные функции. Каждый из которых вы можете получить начиная с нулевого индекса, также вы можете проверить количество параметров, как и с любым другим массивом.
\n\n\n\nfunction doSomething() { \n arguments[0]; // \"A\"\n arguments[1]; // \"B\"\n arguments[2]; // \"C\"\n arguments.length; // 3\n}\n\ndoSomething(\"A\",\"B\",\"C\");Обратите внимание на то, что arguments это массивоподобный объект, а не полноценный массив. Это говорит о том, что такие полезные методы, как arguments.sort(), arguments.map() или arguments.filter() будут вам недоступны. В этом случае у вас будет только свойство length.
Еще одно ограничение в том, что в стрелочных функциях недоступен объект arguments. В случае, если бы вы использовали arguments в стрелочной функции, то она бы перенаправила вас к коллекции аргументов вложенной функции (если таковая бы имелась).
К нашей радости, начиная с ES6, объект arguments больше не является единственным способом работы с переменным количеством параметров. ES6 дал нам такую концепцию, как rest параметры. Это означает то, что вы просто можете вставить … перед последним параметром функции.
function doSomething(first, second, ...rest) {\n // do something cool\n}Теперь, в этом примере вы можете получить доступ к первым двум именованным параметрам как и обычно. А вот уже к другим аргументам, переданным функции начиная с третьего, вы сможете получить доступ через массив под названием rest, куда все они автоматически будут собираться.
function doSomething(first, second, ...rest) {\n console.log(first); // Первый аргумент\n console.log(second); // Второй аргумент\n console.log(rest[0]); // Третий аргумент\n console.log(rest[1]); // Четвертый\n // Etc.\n}Если вы передадите меньше, чем 3 параметра, то rest будет просто пустым массивом.
В отличие от объекта arguments, rest параметры отдают реальный массив, так что вы в этом случае сможете использовать буквально все доступные в этом случае методы. Более того, в отличие от arguments, они работают в стрелочных функциях.
let doSomething = (...rest) => {\n rest[0]; // Доступ к первому аргументу\n};\n\nlet doSomething = () => {\n arguments[0]; // У стрелочных функций нет аргументов\n};В придачу к преимуществам описанным выше, есть ещё одно, которое делает rest параметры круче arguments. Rest параметры являются частью функциональной сигнатуры. Это означает то, что прямо с “шапки” функции вы можете сразу понять, что она применяет остаточные параметры и следовательно, доступна для переменного количества аргументов. С объектом arguments, такого трюка не получится. С ним нам придется вчитываться в тело функции или в комментарии, которые будут нам говорить о возможности добавления переменного количества параметров. Что ещё важно, так это то, что редакторы кода могут определять остаточные параметры в сигнатуре и ещё лучше помогать вам при разработке.
Rest параметры берут все оставшиеся аргументы функции и складывают их в массив. Этот подход влечет собой два ограничения. Вы можете использовать указание rest параметров только единожды при написании функции, большее их количество будет просто недопустимо:
// Так делать нельзя, нужен только один параметр rest\nfunction doSomething(first, ...second, ...third) {\n}И вы можете использовать эти параметры только, как последние параметры функции:
\n\n\n\n// Тут ничего не выйдет, rest параметры не находятся в конце функции\nfunction doSomething(first, ...second, third) {\n}Что тут смущает, так это такое же троеточие …, как и в rest параметрах. Но называется уже по-другому, а именно spread оператором. Его назначение почти противоположно вышеупомянутым остаточным параметрам. Вместо сбора нескольких значений в один массив, он позволяет расширить заданный массив (или другой итерируемый объект) в несколько значений. Давайте посмотрим на разнообразные способы его применения:
Давайте предположим, что у нас есть массив с тремя элементами и функция, которой нужно три параметра.
\n\n\n\nlet myArray = [1, 2, 3];\n\nfunction doSomething(first, second, third) {\n}Как вы передадите три значения нашего массива, как три отдельных аргумента для функции doSomething()? Есть довольно наивный подход к этому делу:
doSomething(myArray[0], myArray[1], myArray[2]);Очевидно, что это не очень хороший подход, особенно с учетом большого количества параметров и работать он будет только если мы будем знать количество этих самых параметров заранее. Давайте попробуем что-нибудь другое. Перед появлением оператора расширения, вот такой подход использовался для вызова функции и передачи массива в виде раздельных параметров:
\n\n\n\ndoSomething.apply(null, myArray);Первым параметром в apply() является то, что мы собираемся использовать, как this. Вторым параметром тут будет массив, который мы хотим передать функции, как аргументы.
Но с оператором расширения вы можете достигнуть тех же результатов с помощью:
\n\n\n\ndoSomething(...myArray);\n// то же самое\ndoSomething(myArray[0], myArray[1], myArray[2]);Обратите внимание, что этот метод работает с любым итерируемым объектом, а не только с массивами. Для примера, оператор расширения разделит строку на отдельные символы из которых состоит слово или предложение. Но об этом немного дальше.
\n\n\n\nА еще это можно совмещать вместе с передачей отдельных параметров. В отличие от rest параметров, вы можете применить несколько spread операторов в одном вызове функции и им не обязательно быть последним элементом в переданных параметрах.
// Всё это возможно\ndoSomething(1, ...myArray);\ndoSomething(1, ...myArray, 2);\ndoSomething(...myArray, ...otherArray);\ndoSomething(2, ...myArray, ...otherArray, 3, 7);Оператор расширения также можно использовать при создании массива. Этим способом вы сможете вставить элементы из других массивов (или перечисляемые объекты, такие как строки) на указанные места в будущем массиве.
\n\n\n\nlet firstArray = [\"A\", \"B\", \"C\"];\nlet secondArray = [\"X\", ...firstArray, \"Y\", \"Z\"];\n// вторым массивом будет [ \"X\", \"A\", \"B\", \"C\", \"Y\", \"Z\" ]Используя оператор расширения в массив литерале, мы как бы говорим: второй массив должен иметь “X”, как первый аргумент, а далее уже идут все элементы массива firstArray, вне зависимости от их количества. И под конец у нас два элемента “Y” и “Z”.
Естественно, вы можете использовать оператор расширения в массив литерале множество раз. Это может пригодиться, к примеру, для объединения нескольких уже существующих массивов, что было бы затруднительнее, при использовании традиционного императивного подхода.
\n\n\n\nlet mergedArray = […firstArray, …secondArray, …thirdArray];Иногда также полезно создать копию существующего массива с таким же набором элементов, как и у оригинального. Это можно легко и просто сделать с помощью spread оператора.
var original = [1, 2, 3];\nvar copy = [...original];Оператор расширения очень схоже используется при создании объектов. Вы можете взять свойства одного объекта и включить их в новый объект, созданный объект литералом. Этот функционал доступен с ES2018 версии.
\n\n\n\nlet firstObject = {a: 1, b: 2};\n\nlet secondObject = {...firstObject, c: 3, d: 4};\n\nconsole.log(secondObject); // { a: 1, b: 2, c: 3, d: 4 }Имейте ввиду, что spread берет только собственные (не наследуемые) и перечислимые свойства объекта, все другие свойства будут попросту игнорироваться.
Тут всё очень схоже с массивами. Вы можете смело склеивать и клонировать объекты.
\n\n\n\nlet clone = {…original};Это может быть хорошей альтернативой для клонирования объектов с помощью Object.assign(). Но обратите внимание, что это поверхностная копия. Новый объект создастся, но клонированные свойства все равно будут от оригинала, а не клонами.
Клонируя объект способом выше вам стоит знать то, что прототип оригинального объекта не сохранится. Там просто копируются свойства исходного объекта и создастся совершенно новый объект, используя объект литерал, у которого прототип Object.prototype.
Что случиться когда вы укажите свойство через оператор расширения, но это свойство уже будет существовать в объекте? Это не приведет к ошибке. Просто напросто, если будет несколько свойств объекта с одним и тем же именем, но разными свойствами, то победит последний.
\n\n\n\nlet firstObject = {a: 1};\nlet secondObject = {a: 2};\n\nlet mergedObject = {...firstObject, ...secondObject};\n// a: 2 is after a: 1 so it wins\nconsole.log(mergedObject); // { a: 2 }Момент, когда ранее объявленное свойство с тем же именем перезаписывает другое, можно применить при изменении иммутабельных объектов. Когда вы работаете с таковыми или не хотите напрямую изменять изменять объекты, вы можете смело применить оператор расширения для создания нового объекта, как измененного варианта исходной копии.
\n\n\n\nlet original = {\n someProperty: \"oldValue\", \n someOtherProperty: 42\n };\n\nlet updated = {...original, someProperty: \"newValue\"};\n// Теперь { someProperty: \"newValue\", someOtherProperty: 42 }Так как в оригинальной копии есть someProperty и в дальнейшем оно также используется, то будет взято значение при последнем её упоминании. Исходный объект не изменится в любом случае, но создастся новый объект.
Если кратко, то деструктурирующее присваивание это способ назначения свойств объекта или значений из массивов в отдельные переменные.
\n\n\n\nПредположим, что у нас есть массив из трех элементов и каждый из них нам надо назначить как самостоятельную переменную.
\n\n\n\nlet myArray = [1, 2, 3];\nlet a,b,c; //Мы хотим назначить a=1, b=2, c=3Мы это можем легко сделать с помощью деструктуризации:
\n\n\n\nlet myArray = [1,2,3];\nlet [a, b, c] = myArray;\n\nconsole.log(a); // 1\nconsole.log(b); // 2\nconsole.log(c); // 3Но как это вообще связано с синтаксисом из трех точек, про который мы говорили выше? Помните остаточные параметры? Так же, как и все оставшиеся аргументы пакуются в один массив, мы можем назначить все оставшиеся после деструктурирующего присваивания элементы в новую переменную, которая будет являться массивом:
\n\n\n\nlet myArray = [1, 2, 3, 4, 5];\nlet [a, b, c, ...d] = myArray;\n\nconsole.log(a); // 1\nconsole.log(b); // 2\nconsole.log(c); // 3\nconsole.log(d); // [4, 5]Тут все очень похоже на тему с массивами. Имя каждой переменной совпадает с именем свойства из деструктуризированного объекта.
\n\n\n\nlet myObject = { a: 1, b: 2, c: 3, d: 4};\nlet {b, d} = myObject;\n\nconsole.log(b); // 2\nconsole.log(d); // 4И также, как и с массивами, вы можете использовать троеточие для сбора всех оставшихся свойств, которые не были назначены на переменные, которые в последствии будут представлять собой отдельный объект.
\n\n\n\nlet myObject = { a: 1, b: 2, c: 3, d: 4};\nlet {b, d, ...remaining} = myObject;\n\nconsole.log(b); // 2\nconsole.log(d); // 4\nconsole.log(remaining); // { a: 1, c: 3 }Тут все это очень легко делается при помощи оператора расширения. Зачастую итерируемые объекты ограничены в выборе доступных для них методов. Но конвертируя их в массив, вы сразу же получаете доступ ко ВСЕМ прекрасным методам, доступным для массивов, таким как filter, map, reduce.
[ ...'hi' ]; // // ['h', 'i']\n[ ...new Set([1,2,3]) ]; // [1,2,3]\n[ ...new Map([[1, 'one']]) ]; // [[1, 'one']]\n[ ...document.querySelectorAll('div') ] // [ div, div, div]В JavaScript у нас есть несколько уже готовых итерируемых объектов, которые мы можем конвертировать в массив при помощи spread:
Строки
\n\n\n\nМассивы
\n\n\n\nMap
\n\n\n\nSet
\n\n\n\nЕсть ещё один, но мы о нем пока не будем говорить это — TypedArray.
\n\n\n\nЭто структуры данных, которые предоставляют механизм для доступа сторонних операторов данных, в виде общедоступного доступа к своим элементам последовательным образом.
const myString = 'hello';\nconst array = [...myString] // [ 'h', 'e', 'l', 'l', 'o' ]Мы можем конвертировать массив обратно в строку, используя join():
array.join(''); // 'hello'const mySet = new Set([1, 2, 3]);\nconst array = [...mySet] // [1, 2, 3]Мы можем конвертировать массив обратно в set, передав его new Set
new Set(array); // Set { 1, 2, 3 }const myMap = new Map([[1, 'one'], [2, 'two']]);\nconst array = [...myMap] // [ [ 1, 'one' ], [ 2, 'two' ] ]Так же, как и с Set, мы можем конвертировать массив обратно в Map, передав его в new Map
new Map(array); // Map { 1 => 'one', 2 => 'two' }const nodeList = document.querySelectorAll('div');\nconst array = [ ...document.querySelectorAll('div') ];\n// [ div, div, div] *Тут я думаю, что понятно, то что настоящую выдачу можно увидеть только в браузере
\n\n\n\nЕщё один очень схожий с Spread синтаксисом метод это Array.from. По факту, мы можем смело заменить наши примеры вот так:
Array.from('hi') // // ['h', 'i']\nArray.from(new Set([1,2,3])) // [1,2,3]\nArray.from(new Map([[1, 'one']])) // [[1, 'one']]\nArray.from(document.querySelectorAll('div')) // [ div, div, div]Разница в определении.
\n\n\n\nArray.from работает для:
Массивоподобных объектов (объекты с свойством длины и индексированными элементами)
\n\n\n\nИтерируемых объектов
\n\n\n\nSpread работает только для:
Итерируемых объектов
\n\n\n\nИтак, давайте посмотрим на этот массивоподобный объект:
\n\n\n\nconst arrayLikeObject = {\n 0: 'a', // indexed element\n 1: 'b', // indexed element\n length: 1, // length property\n};\nArray.from(arrayLikeObject); // [ 'a', 'b' ]\n[...arrayLikeObject]; // TypeError: arrayLikeObject is not iterableТут мы получаем ошибку о том, что arrayLikeObject не является итерируемым.
Троеточие в JS может много чего означать в зависимости от контекста.
\n\n\n\nВы можете использовать её, как остаточные параметры в функции, таким образом упростив себе работу с переменным числом аргументов в ней. Ещё вы можете применять схожий подход с массивами или объектами при деструктуризации, где элементы на которых не было применено деструктурирующее назначение будут собраны в отдельный массив.
\n\n\n\nВ свою очередь, оператор расширения может быть использован для распаковки итерируемых элементов в отдельные элементы, которые уже потом можно будет использовать при создании объектов, массивов и вызовов функций.
\n","date":"2021-01-20T22:20:34.000Z","title":"Оператор spread и rest параметры в JavaScript","id":"cfde9335-8e75-52cb-b095-b1136e372aed","excerpt":"В этой статье вы узнаете про возможности применения, такого функционала, как spread оператор и rest параметры. И как при помощи первого, без особого труда можно конвертировать итерируемые объекты в массивы.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/spreadnkdjnf.jpg"}}},{"node":{"slug":"5-rasprostranennyh-oshibok-kotorie-delaet-kazhdyi-novyi-programmist-v-javascript","content":"\nНа самом деле не всё, описанное ниже является ошибками, но если вы будете разбираться с описанными ниже проблемами, то значительно продвинетесь в изучении программирования.
\n\n\n\n\n\n\n\nЭта одна из самых распространенных ошибок, которую каждый программист делал хотя бы один раз в своей карьере. Давайте посмотрим на код ниже. Но это и не ошибка в общем-то, просто настоятельная рекомендация.
\n\n\n\nlet foo = 0;\nlet boo = 0;\nif (foo === 0) {\n boo = 1;\n} else {\n boo = 2;\n}\nКод выше выглядит правильным, так? Так и есть, но есть кое что ещё, что мы можем с ним сделать. Теперь посмотрите дальше:
\n\n\n\nlet foo = 0;\nlet boo = 0;\n\nif (!foo) {\n boo = 1;\n} else {\n boo = 2;\n}Выглядит получше? По факту, нам не нужно проверять 0, как на false значение. Мы можем просто проверить в условии !foo, отдаёт ли оно false. Давайте посмотрим на верные и неверные значения в JavaScript:
// false значения в JavaScript\nundefined --> \"undefined\" отдаст true, если является строкой\nnull --> \"null\" тоже что и \"undefined\"\n0 --> \"0\" тоже что и \"undefined\"\nfalse --> \"false\" тоже что и \"undefined\"\nNaN --> \"NaN\" тоже что и \"undefined\"\n'' or \"\" --> пустая строка\n// true значения в JavaScript\n\"String\" --> Любая строка\n[] --> Пустой массив\n{} --> Пустой объект\nfunction() {} --> Пустая функцияКаждый программист использовал if условие хотя бы раз в жизни, но в местах где не очень много сложной логики внутри условий, мы можем просто заменить их тернарным оператором.
Зачем? Чтобы избежать писанины 😉 и конечно для удобной читабельности. Давайте посмотрим на тот же пример повыше и сделаем его с использованием тернарного оператора.
\n\n\n\nlet foo = 0;\nlet boo = 0;\n!foo ? boo = 1 : boo = 2;\n// и ещё лучше\nboo = !foo ? 1 : 2;В коде выше, вместо пяти строчек кода, мы просто воспроизвели ту же логику в одной строчке. Давайте посмотрим на другой кусок кода.
\n\n\n\nif (любое условие) {\n ----------------\n что-то тут происходит\n ----------------\n return foo ? true : false;\n}С кодом выше все правильно, но вам нужно просто в данном случае постараться избегать тернарного оператора. Как? Посмотрите на код ниже.
\n\n\n\nif (любое условие) {\n ----------------\n что-то тут происходит\n ----------------\nreturn foo; // если вы уверены, что foo это булево значение\nreturn !!foo; // если foo может быть чем угодно, но не им\n}И так, выше мы видим, что нам не всегда нужен тернарный оператор и не всегда нужно стараться использовать их во вложенном виде.
\n\n\n\nДавайте внимательно посмотрим на код, чтобы лучше его понять.
\n\n\n\nif (false == 0) {\n return true;\n} else {\n return false;\n}\nif (false === 0) {\n return true;\n} else {\n return false;\n}Оба условия вернут true? Извините, что расстрою вас, но первое условие вернет true, а второе вернет false. Что же это за магия такая? Разница в обоих случаях в одном ‘=’, которое всё меняет в значительной степени. ‘==’ делает проверку на равенство с приведением типов, а ‘===’ смотрит на строгое соответствие.
Прибавление и связывание зависят от типа данных пока мы явно не укажем переменные с типом данных в JavaScript.
\n\n\n\nvar a = 10;\nvar b = '20';\nvar c = 30;\nreturn a + b; // отдаст \"1020\"\nreturn b + c; // отдаст \"2030\"\nreturn a + c; // отдаст 40\nКак мы видим на примере выше, если мы попытаемся прибавить строку к целому числу, то это возвратит связанную строку, но в случае с двумя целыми числами вернется сумма обоих.
\n\n\n\nЕсть определенные кейсы, в которых нам нужно использовать переменные как ключи. Давайте посмотрим на пример ниже.
\n\n\n\nconst a = 1;\nlet b = '';\nif(a) {\n b = 'first Name';\n} else {\n b = 'Last Name';\n}\nconst myObject = {\n b : 'Emily'\n};\nreturn myObject;В примере выше мы хотели вернуть объект как { 'first Name' : 'Emily' }, но что возвращает код это { b: 'Emily' } из-за того, что b используется как ключ. Чтобы решить эту проблему, мы используем квадратные скобки [].
if(a) {\n b = 'first Name';\n} else {\n b = 'Last Name';\n}\nconst myObject = {\n [b] : 'Emily'\n};\nreturn myObject;Теперь код возвращает то, что мы хотели — { 'first Name' : 'Emily' }
На самом деле не всё, описанное ниже является ошибками, но если вы будете разбираться с описанными ниже проблемами, то значительно продвинетесь в изучении программирования.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/fjdnfkjsnkjlfbsdjhkbsjkhfbdsjfb.jpg"}}},{"node":{"slug":"metody-javascript-kotorie-uluchshat-vashi-umenia-za-neskolko-minut","content":"\nВ наши дни большинство приложений, которые мы делаем, нуждаются в возможности оперирования данными, которые они получают. Обработка элементов в любом объеме данных это обычное дело, с которым вы столкнетесь с высокой долей вероятности. Пора уже забыть устаревшие способы работы с for-loop, такие как (let i=0; i < value.length; i++ ).
Обратите внимание, что использование const в for-loop выдаст вам ошибку. Причиной тому будет то, что при переназначении значения, каждое следующее i, модифицируется i++. Так что перед тем, как использовать const или let, спросите себя — Будет ли это значение изменено? Если ответ да, то используйте let, если нет, то тогда вам нужна const.
Итак, представим, что вам нужно вывести список товаров, а также категоризировать, отфильтровать, найти, модифицировать или обновить этот список товаров. Или возможно вам надо выполнить быстрые вычисления, такие как сложение, умножение и так далее. Какой самый оптимальный способ это сделать?
\n\n\n\nМожет быть вам не нравятся стрелочные функции, вы не хотите тратить слишком много времени на изучение чего-либо нового или они просто вам не по душе. Не переживайте, вы не один такой. Сейчас я покажу вам, как это сделать в ES5 (объявление функции) и в ES6 (стрелочные функции).
\n\n\n\nБудьте осторожны: стрелочные функции и выражение/объявление функции это не одно и тоже и их нельзя просто так брать и заменять друг другом. Помните, что между ними this работает у каждого по разному.
Методы, которые мы рассмотрим:
\n\n\n\nSpread operator\n\n\n\n
for…of iterator
includes()
some()
every()
filter()
map()
reduce()
Этот оператор расширяет массив по его элементам. Он также может использоваться для объект литералов.
\n\n\n\nЭто простой и быстрый способ показать элементы массива.
\n\n\n\nОн работает с массивами и объект литералами.
\n\n\n\nЭто быстрый и удобный способ передать аргументы.
\n\n\n\nДля него нужно всего-то три точки.
\n\n\n\nПредположим, что вам надо показать список вашей любимой еды без создания функции цикла. Для этого используйте именно оператор расширения:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_OQpjtOAdVeh3Gs3WYgrGzA.png\")
Оператор for…of итерирует/проходится циклом по коллекции данных и дает вам возможность изменять конкретные элементы. Он заменяет традиционный способ проведения цикла for.
Это простой способ добавления и обновления элементов.
\n\n\n\nОтличный способ проводить вычисления. (Сложение, умножение и т.п.)
\n\n\n\nПодходит для работы с условными операторами (if, while, switch и т.д.).
Ведёт к чистому и читаемому коду.
\n\n\n\nИтак, предположим, что у нас есть коробка инструментов и вам надо показать все инструменты внутри неё. С помощью итератора for…of вы это сделаете очень легко:
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_ORy2fs8TPhGPTDAUUd_6Kw.png\")
Этот метод используется для того, чтобы проверить есть ли конкретная строка в коллекции данных и в соответствии с ответом он возвращает true или false. Помните, что он чувствителен к регистру и если элемент внутри коллекции данных есть SCHOOL, а вы ищете school, то он вернет false.
Чтобы сделать простой поисковый функционал.
\n\n\n\nЭто удобный подход для поиска нужной строки
\n\n\n\nМожно использовать условные операторы, чтобы изменять, фильтровать и так далее.
\n\n\n\nДелает код читабельным.
\n\n\n\nДавайте представим, что у вас в гараже есть много машин и по каким-то причинам вы не знаете, какие именно. Вам нужна система, чтобы проверить есть ли определенная машина или нет. И тут вам поможет includes()!
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_pMjkVg5t5w2uBnbBe9OpgA.png\")
Этот метод проверяет есть ли нужные элементы в массиве и возвращает true и false. Это очень похоже по концепции на метод includes(), за исключением того, что аргументом является функция, а не строка.
Для уверенности, что некоторые элементы подходят заданным критериям.
\n\n\n\nОн выполняет условные операторы, используя функции.
\n\n\n\nДелает ваш код описательным.
\n\n\n\nSome достаточно хорош.
\n\n\n\nПредположим, что вы владелец клуба и вы вообще не заботитесь о том, кто входит в ваш клуб. Но некоторым все таки это недозволено, к примеру, потому что они уже много выпили или по возрастным ограничениям. Посмотрите разницу в написании кода в ES5 и в ES6:
\n\n\n\nES5:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_7BY-hU4fRzXCItTX-9M38g.png\")
ES6:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_ZVMlvrUfBWWN__oq2lti_g.png\")
Этот метод проходится по массиву, проверяет элемент и возвращает true или false. Та же концепция, что и с some(). Кроме того, что каждый элемент должен удовлетворять параметрам условия, иначе метод возвратит false.
Для уверенности, что все элементы проходят тест.
\n\n\n\nВы можете выполнять условные операторы, используя функции.
\n\n\n\nДелает ваш код описательным.
\n\n\n\nВ последний раз с помощью some(), вы позволяли некоторым недорослям проходить в клуб и кто-то уже рассказал об этом и вы попали в полицию. В следующий раз вы не хотите, чтобы это повторилось и вы точно убедитесь, что каждый проходит по лимиту возраста с помощью оператора every().
ES5:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_zdmC-Dj6dJi4ONUwoPZzeQ.png\")
ES6:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_Yn51W_xqaPJbjf4V9gFISA.png\")
Этот метод создаёт новый массив из элементов, которые соответствуют условиям.
\n\n\n\nТак вы можете избежать изменений в основном массиве.
\n\n\n\nВы сможете отфильтровать элементы, которые вам не нужны.
\n\n\n\nДаёт вам более читабельный код.
\n\n\n\nДавайте скажем, к примеру, что вам нужно вернуть цены, которые выше или равны 30. Отфильтруйте все другие цены:
\n\n\n\nES5:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_Sb3f5FANbbghMq8qGHh1Qg.png\")
ES6:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_Ktjh1lVLWBhuVx50gY2blg.png\")
Этот метод схож с filter() в плане выдачи нового массива. Однако, разница тут в том, что он используется только для изменения элементов.
Вы можете избежать изменений в основном массиве
\n\n\n\nВы можете модифицировать элементы, которые захотите
\n\n\n\nДаёт вам читабельный код
\n\n\n\nДавайте скажем, что у вас есть список продуктов с ценами. Вашему менеджеру нужен список, чтобы показать новые цены после налога в 25%. И вам тут поможет этот метод, метод map().
ES5:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_shRzvhJYB2ktU1cVXKDpcA.png\")
ES6:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_MnBLykkUrhb6JoCh4AECuQ.png\")
Этот метод может использоваться для трансформации массива в целое число, объект, цепочку промисов (последовательное выполнение промисов) и т.п. По практическим причинам, будет простой пример использования — сложение списка целых чисел. Вообще кратко, этот метод сокращает(от reduce — сокращать, но на самом деле складывает) весь массив в одно целое значение.
\n\n\n\nДля выполнения вычислений
\n\n\n\nВычисления значений
\n\n\n\nУчета дубликатов
\n\n\n\nГруппировки объектов по свойствам
\n\n\n\nВыполнения цепочки промисов
\n\n\n\nЭто быстрый способ выполнения вычислений
\n\n\n\nДопустим вам надо найти общее число трат за неделю. Используйте reduce(), чтобы получить это значение:
ES5:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_IuREBog9uHTmnP3MorrSQw.png\")
ES6:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_trULhRY3omdYlCVE6-70Bg.png\")
В этой статье вы узнаете про методы JavaScript, которые улучшат ваши умения за несколько минут и сделают процесс разработки максимально быстрым в разумных пределах
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/nkjlnfndsjkfnsjkdnflkjsn.jpg"}}},{"node":{"slug":"ponimaem-komponenty-vysshego-poryadka-v-react-na-realnom-primere","content":"\nВ этой статье вы пошагово узнаете как создать компонент высшего порядка в React и как применить этот паттерн на реальном примере.
\n\n\n\n\n\n\n\nВ этом руководстве мы пройдемся по концепциям, которые необходимы для создания компонентов высшего порядка. Мы применим HOC, чтобы сохранить стэйт в localStorage, вызывая withStorage, с помощью которого мы сможем вставить функционал в другие компоненты без дублирования логики по всему приложению.
Компонент высшего порядка в React это паттерн, используемый для того, чтобы делить функционал между компонентами без повторения кода. Такие компоненты, по факту, не совсем являются компонентами, это скорее функции. Такая функция берёт компонент как аргумент и отдаёт уже готовый компонент. Она переделывает заданный компонент в другой компонент и добавляет дополнительные данные, либо фунционал. Вот краткий пример:
\n\n\n\nconst NewComponent = (BaseComponent) => {\n // ... создает новый компонент, обновляя старый и отдавая результат\n}Две подобных имплементации, с которыми вы возможно уже знакомы благодаря экосистеме React, это connect из Redux и withRouter в React Router. Функция connect из Redux используется, чтобы раздать компонентам доступ к глобальному стейту в Redux сторе и она передаёт значения компонентам в виде пропсов. Функция withRouter добавляет информацию о роутинге и функциональности в компонент, позволяя разработчику иметь доступ к роутеру с возможностью изменения самого роута.
Такие компоненты это функции, которые берут компонент как аргумент и возвращают уже «переработанный» компонент. Это говорит о том, что HOC будет всегда иметь вид как тут:
\n\n\n\nimport React from 'react';\n\nconst higherOrderComponent = (WrappedComponent) => {\n class HOC extends React.Component {\n render() {\n return <WrappedComponent />;\n }\n }\n \n return HOC;\n};Тут higherOrderComponent это функция, которая берёт компонент под названием WrappedComponent как аргумент. Мы создаём новый компонент под названием HOC, который отдаёт из рендера <WrappedComponent />. Пока тут нет никакого функционала, этот пример просто описывает общий паттерн, которому должна следовать любая функция HOC. Мы можем вызвать HOC таким образом:
const SimpleHOC = higherOrderComponent(MyComponent);Теперь мы расширим наш компонент высшего порядка, чтобы добавить данные во вставленный компонент.
\n\n\n\nНаша команда выяснила, что secretToLife является число 42. Некоторые из наших компонентов должны поделиться этой информацией и нам нужно создать HOC под именем withSecretToLife, чтобы передать его как пропс нашим компонентам.
import React from 'react';\n\nconst withSecretToLife = (WrappedComponent) => {\n class HOC extends React.Component {\n render() {\n return (\n <WrappedComponent\n {...this.props}\n secretToLife={42}\n />\n );\n }\n }\n \n return HOC;\n};\n\nexport default withSecretToLife;Обратите внимание, что этот пример практически идентичен первому. Всё, что мы сделали, так это просто проп secretToLife={42}, который позволил обернутому компоненту получить доступ к значению через this.props.secretToLife.
Ещё стоит обратить внимание, что используем оператор расширения на пропсах переданных компоненту. Так мы точно будем уверены в том, что любой пропс переданный обернутому компоненту будет доступен через this.props, так же, как и если бы мы вызывали этот компонент не через компонент высшего порядка.
import React from 'react';\nimport withSecretToLife from 'components/withSecretToLife';\n\nconst DisplayTheSecret = props => (\n <div>\n The secret to life is {props.secretToLife}.\n </div>\n);\n\nconst WrappedComponent = withSecretToLife(DisplayTheSecret);\n\nexport default WrappedComponent;Наш компонент WrappedComponent, который по сути является прокачанной версией <DisplayTheSecret/>, позволит нам получить доступ к SecretToLife как к пропсу.
Теперь у нас есть четкое понимание основ создания компонентов высшего порядка и мы можем сделать такой же, но реально имеющий практическое применение в реальном приложении. HOC имеет доступ ко всем дефолтным API Реакта, включая state и методы жизненного цикла.
\n\n\n\nФункциональность нашего компонента withStorage будет в том, чтобы сохранять/загружать стейт компонента, позволяя нам как можно быстрее получать к нему доступ и рендерить на странице.
import React from 'react';\n\nconst withStorage = (WrappedComponent) => {\n class HOC extends React.Component {\n state = {\n localStorageAvailable: false, \n };\n \n componentDidMount() {\n this.checkLocalStorageExists();\n }\n \n checkLocalStorageExists() {\n const testKey = 'test';\n\n try {\n localStorage.setItem(testKey, testKey);\n localStorage.removeItem(testKey);\n this.setState({ localStorageAvailable: true });\n } catch(e) {\n this.setState({ localStorageAvailable: false });\n } \n }\n \n load = (key) => {\n if (this.state.localStorageAvailable) {\n return localStorage.getItem(key); \n }\n \n return null;\n }\n \n save = (key, data) => {\n if (this.state.localStorageAvailable) {\n localStorage.setItem(key, data);\n }\n }\n \n remove = (key) => {\n if (this.state.localStorageAvailable) {\n localStorage.removeItem(key);\n }\n }\n \n render() {\n return (\n <WrappedComponent\n load={this.load}\n save={this.save}\n remove={this.remove}\n {...this.props}\n />\n );\n }\n }\n \n return HOC; \n}\n\nexport default withStorage;На самом верху withStorage у нас один элемент в стейте компонента, который отслеживает доступность локального хранилища в браузере. Мы используем componentDidMount, который проверяет наличие localStorage в checkLocalStorageExists функции. Тут он будет тестировать сохранение элемента и ставить стейт на true, если процесс был успешным.
Мы также добавили три функции — load, save и remove. Они применяются для прямого доступа к localStorage API, в случае его доступности. Наши три функции в HOC передались обернутому компоненту, чтобы там уже они и отработали.
Теперь мы создадим ещё один компонент, который будет внутри withStorage. Он будет использоваться для отображения имени пользователя и его любимого фильма. Но нужно учесть, что API запрос для получения этой информации берет много времени. Мы также учитываем, что эти значения никогда не будут выставлены.
Чтобы обеспечить наилучший опыт взаимодействия с приложением, мы сделаем этот API запрос только тогда, когда значения не будут сохранены. Теперь всякий раз когда пользователь возвращается на страницу, он может получить доступ к данным незамедлительно, а не ждать ответа API.
\n\n\n\nimport React from 'react';\nimport withStorage from 'components/withStorage';\n\nclass ComponentNeedingStorage extends React.Component {\n state = {\n username: '',\n favoriteMovie: '',\n }\n\n componentDidMount() {\n const username = this.props.load('username');\n const favoriteMovie = this.props.load('favoriteMovie');\n \n if (!username || !favoriteMovie) {\n // This will come from the parent component\n // and would be passed when we spread props {...this.props}\n this.props.reallyLongApiCall()\n .then((user) => {\n this.props.save('username', user.username || '');\n this.props.save('favoriteMovie', user.favoriteMovie || '');\n this.setState({\n username: user.username,\n favoriteMovie: user.favoriteMovie,\n });\n }); \n } else {\n this.setState({ username, favoriteMovie })\n }\n }\n\n render() {\n const { username, favoriteMovie } = this.state;\n \n if (!username || !favoriteMovie) {\n return <div>Loading...</div>; \n }\n \n return (\n <div>\n My username is {username}, and I love to watch {favoriteMovie}.\n </div>\n )\n }\n}\n\nconst WrappedComponent = withStorage(ComponentNeedingStorage);\n\nexport default WrappedComponent;Внутри componentDidMount обернутого компонента мы сначала пытаемся получить доступ к username и favoriteMovie из localStorage. Если этих значений нет, то мы делаем API запрос this.props.reallyLongApiCall. Как только получаем ответ, то сохраняем данные в локальное хранилище и обновляем стейт компонента, чтобы вывести его на экран.
Компоненты высшего порядка должны быть чистыми функциями без сайд эффектов. Они не должны делать никаких изменений, а просто формировать изначальный компонент, обертывая его другим компонентом.
\n\n\n\nНе используйте HOC в рендере компонента. Получайте доступ к HOC только за пределами определения компонента.
\n\n\n\nСтатичные методы должны быть скопированы, чтобы к ним оставался доступ. Очень простой способ сделать это — использовать hoist-non-react-statics пакет.
Ref‘сы не передаются.
В этой статье вы пошагово узнаете как создать компонент высшего порядка в React и как применить этот паттерн на реальном примере.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/nfkdjbfkjshbdhjf.jpg"}}},{"node":{"slug":"samoe-ponyatnoe-rukovodstvo-po-iteratoram-v-es6-javascript-s-primerami","content":"\nВ этой статье мы попытаемся понять и проанализировать итераторы в JS. Это сравнительно новые способы для того, чтобы пройтись по любой коллекции данных. Итераторы были представлены в ES6 и стали действительно популярны, так как оказались ну уж очень полезными и могут широко использоваться во многих рабочих кейсах.
\n\n\n\n\n\n\n\nМы собираемся понять концепцию того, чем являются итераторы и где их можно использовать, всё будет конечно же с примерами. Также в статье мы увидим несколько примеров рабочего кода на JavaScript.
\n\n\n\nПредставим, что у нас есть массив:
\n\n\n\nconst myFavouriteAuthors = [\n 'Neal Stephenson',\n 'Arthur Clarke',\n 'Isaac Asimov', \n 'Robert Heinlein'\n];\nРано или поздно, вам понадобится получить все отдельные значения массива для их: последующего вывода на страницу, манипулирования или для вообще, любого действия связанного с ними. Если я спрошу вас, как вы это всё сделаете? Вы ответите — да легко! Вы просто пустите цикл по всему массиву с помощью for, while, for-of или одним из этих методов цикла. Пример выполнения был бы таким:
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_3pgJ-bgoGegF5o0t95E7Ug.png\")
Теперь представьте, что вместо предыдущего массива, у нас есть кастомная структура данных, которая хранит ваших любимых авторов. Как тут:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_cKH3C2unSGdfsV1a_gQa5g.png\")
Теперь myFavoriteAuthors это объект, который содержит другой объект allAuthors. AllAuthors содержит три массива с ключами fiction, scienceFiction и fantasy. Теперь, если я попрошу вас пройтись по myFavouriteAuthors, чтобы получить всех авторов, как вы это сделаете? Вы можете попробовать какие-нибудь комбинации циклов, чтобы получить все нужные данные.
Тем не менее, если вы сделаете так, то:
\n\n\n\nfor (let author of myFavouriteAuthors) { \n console.log(author)\n}\n// TypeError: {} is not iterable \n// Хоба, а так нельзя!То вы получите TypeError, говорящую о том, что объект нельзя проитерировать. Давайте посмотрим, что мы можем итерировать и как мы можем сделать сам объект таковым. В конце статьи вы узнаете как использовать for-of цикл на кастомных объектах, а в нашем случае на myFavoriteAuthors.
Вы уже видели проблему в предыдущем параграфе. Там нет простого способа пройтись по всем авторам заданного кастомного объекта. Нам понадобится какой-нибудь метод с помощью которого мы можем последовательно извлечь все нужные нам данные.
\n\n\n\nДавайте добавим метод getAllAuthors в myFavouriteAuthors, который отдаст нам всех авторов. Например:
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_2MBNj80NDfNTVs7C_btnmA.png\")
Это довольно простой подход. Он решает нашу задачу в том, чтобы получить всех авторов. Тем не менее, несколько проблем всё таки всплывают в такой имплементации. Некоторые из них:
\n\n\n\nИмя getAllAuthors очень специфичное. Если кто-то ещё сделает свой myFavouriteAuthors, то они могут назвать его retrieveAllAuthors.
Мы как разработчики, всегда должны знать конкретные методы, которые возвращают все требуемые данные. В нашем случае, это getAllAuthors.
GetAllAuthors возвращает массив строк, состоящий из всех авторов. А что если другой разработчик возвращает массив объектов в таком формате:
[ {name: 'Agatha Christie'}, {name: 'J. K. Rowling'}, ... ]Разработчику нужно будет точно знать имя и тип метода, которые возвращает все данные.
\n\n\n\nЧто если мы сделаем правило, в котором имя метода и его тип будут фиксированными и неизменными?
\n\n\n\nДавайте назовем этот метод — iteratorMethod.
Подобный шаг был сделан ECMA, чтобы стандартизировать этот процесс проведения цикла по кастомным объектам. Однако, вместо использования имени iteratorMethod, ECMA использовала имя Symbol.iterator. Symbols предлагают имена, которые уникальны и не могут конфликтовать с именами других свойств. Также, Symbol.iterator вернет объект именуемый iterator. У этого итератора будет метод, под названием next, который возвращает объект с ключами value и done.
Ключ value, будет содержать актуальное значение. Это может быть всё, что угодно. А done — это булево значение(логический тип данных). Он определяет все ли значения были отданы.
Схема нарисованная ниже может помочь с выстраиванием отношений между итерируемыми, итераторами и next. Эти отношения называются Iteration Protocol, то есть протокол итерации.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_6OAbAJwoe2vORDLC0gxfpg.png\")
Согласно книге ExploringJS от Dr Axel Rauschmayer —
\n\n\n\nИтерируемые — это структура данных, которой нужно сделать свои элементы доступными для вне. Это делается выполнением метода, чей ключ — Symbol.iterator. Этот метод является основой для итераторов. Вот так, он создаст итераторы.
Итератор — это указатель для навигации по элементам структуры данных.
\n\n\n\nКак мы уже узнали в предыдущей секции, нам нужно выполнить метод под названием Symbol.iterator. Мы будем использовать синтаксис вычисления свойств. Короткий пример:
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_JU_gs02jm2MRqw9PEgKypA.png\")
На 4й строке мы сделали итератор. Это объект с методом next. Этот метод возвращает значение в соответствии с переменной step. На строке 25, мы получаем iterator. На 27й, мы вызываем next. И мы продолжаем вызывать next, пока done не станет true.
Это именно то, что происходит в for-of цикле. Циклы for-of берут итерируемое и создают их итератор. Next() же продолжает вызываться до то момента, пока done, не станет true.
Много всего является итерируемым в JavaScript. Это может быть заметным не сразу, но если вы начнете внимательно вглядываться, то итерируемые начнут постепенно представляться вашему взору.
\n\n\n\nВот это всё итерируемые-
\n\n\n\nМассивы (Arrays) и Типизированные массивы (TypedArrays)
\n\n\n\nСтроки (Strings) — итерируются по каждому символу или кодовому символу в Unicode.
\n\n\n\nMaps — итерируется по всем парам ключевых значений.
\n\n\n\nSet — итерируется по всем элементам.
\n\n\n\nArguments — массиво-подобная специальная переменная в функциях.
\n\n\n\nЭлементы DOM — тут над этим ещё ведется работа
\n\n\n\nfor-of цикл —для for-of нужны итерируемые элементы. В противном случае, он выкинет ошибку TypeError.
for (const value of iterable) { ... }Деструктурицизация массивов — деструктуризация происходит из-за итерируемых. Давайте посмотрим как:
\n\n\n\nconst array = ['a', 'b', 'c', 'd', 'e'];\nconst [first, ,third, ,last] = array;Это по сути следующий код:
\n\n\n\nconst array = ['a', 'b', 'c', 'd', 'e'];\nconst iterator = array[Symbol.iterator]();\nconst first = iterator.next().value\niterator.next().value // Так как оно пропущено, то не назначается\nconst third = iterator.next().value\niterator.next().value // Так как оно пропущено, то не назначается\nconst last = iterator.next().valueОператор расширения spread. Вот код:
\n\n\n\nconst array = ['a', 'b', 'c', 'd', 'e'];\nconst newArray = [1, ...array, 2, 3];Его можно записать вот так:
\n\n\n\nconst array = ['a', 'b', 'c', 'd', 'e'];\nconst iterator = array[Symbol.iterator]();\nconst newArray = [1];\nfor (let nextValue = iterator.next(); nextValue.done !== true; nextValue = iterator.next()) {\n newArray.push(nextValue.value);\n}\nnewArray.push(2)\nnewArray.push(3)Promise.all и Promise.race принимают итерируемые.
Maps и Set.
\n\n\n\nКонструктор Map делает итерируемыми[key, value] пары в Map, а конструктор Set делает итерируемыми элементы в Set.
const map = new Map([[1, 'one'], [2, 'two']]);\nmap.get(1) \n// one\nconst set = new Set(['a', 'b', 'c]);\nset.has('c');\n// trueИтераторы также обязательны для понимания функций генераторов
\n\n\n\nВот код, который сделает myFavouriteAuthors итерируемым:
const myFavouriteAuthors = {\n allAuthors: {\n fiction: [\n 'Agatha Christie', \n 'J. K. Rowling',\n 'Dr. Seuss'\n ],\n scienceFiction: [\n 'Neal Stephenson',\n 'Arthur Clarke',\n 'Isaac Asimov', \n 'Robert Heinlein'\n ],\n fantasy: [\n 'J. R. R. Tolkien',\n 'J. K. Rowling',\n 'Terry Pratchett'\n ],\n },\n [Symbol.iterator]() {\n // Получаем все жанры\n const genres = Object.values(this.allAuthors);\n \n // Индекс заданного жанра и автора\n let currentAuthorIndex = 0;\n let currentGenreIndex = 0;\n \n return {\n // Выполнение next()\n next() {\n // Авторы в соответствии с индексом заданного автора\n const authors = genres[currentGenreIndex];\n \n // doNotHaveMoreAuthors будет true, когда закончатся все авторы в массиве.\n // Вот и всё, собственно, всех авторов взяли.\n const doNothaveMoreAuthors = !(currentAuthorIndex < authors.length);\n if (doNothaveMoreAuthors) {\n // Когда это происходит, мы двигаем индекс жанра к следующему жанру\n currentGenreIndex++;\n // И сбрасываем индекс автора на 0, чтобы получить новый набор авторов\n currentAuthorIndex = 0;\n }\n \n // Если мы прошлись по всем жанрам, то нам нужно сказать всем итераторам о том,\n // что мы больше не можем дать значений.\n const doNotHaveMoreGenres = !(currentGenreIndex < genres.length);\n if (doNotHaveMoreGenres) {\n // Следовательно, мы возвращаем done со значением true.\n return {\n value: undefined,\n done: true\n };\n }\n \n // Если всё верно, возвращаем автора из данного жанра \n // и увеличиваем currentAuthorindex\n // так что в следующий раз, будет отдам уже следующий автор.\n return {\n value: genres[currentGenreIndex][currentAuthorIndex++],\n done: false\n }\n }\n };\n }\n};\nfor (const author of myFavouriteAuthors) {\n console.log(author);\n}\nconsole.log(...myFavouriteAuthors)Со знаниями, полученными в этой статье, вы сможете легко понять то, как работают итераторы. Логика может быть немного сложна. Поэтому тут есть комментарии в коде. Но лучшим способом усвоить и понять эту концепцию, является игра с кодом в бразуере или ноде.
\n","date":"2021-01-14T20:36:35.000Z","title":"Самое понятное руководство по итераторам в ES6 JavaScript. С примерами","id":"3889467e-5af7-5c28-8b11-f37c92e12ae3","excerpt":"В этой статье мы собираемся понять и проанализировать итераторы в JS. Это сравнительно новые способы для того, чтобы пройтись по любой коллекции данных в JavaScript. Они были представлены в ES6.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/fjkdnkjlnsfkjdnsfkjsnjkdbkjsfb.jpg"}}},{"node":{"slug":"useeffect-eto-ne-novyi-componentdidmount","content":"\nОни почти одинаковые. Но существует достаточно различий, которые возможно доставят вам неудобства, особенно если вы делаете рефакторинг с классов.
\n\n\n\n\n\n\n\nМы часто делаем какие-нибудь настройки в компоненте при первом монтировании, например запросы в сеть или начинаем слушать события. Так мы приучили себя думать в границах “моментов времени”, таких как componentDidMount(), componentDidUpdate() и componentWillUnmount(). Вполне естественно брать предыдущие знания за основу и искать их аналоги при реализации на хуках. Я сам так делал и да, думаю, что каждый так делал. Часто я слышу на своих воркшопах такую фразу:
\n\n\n\n‘Какой эквиалент в хуках у [любой метод жизненного цикла]’
Быстрый ответ тут таков, что хуки это сдвиг парадигмы от того, чтобы думать в “жизненных циклах и времени” к ведению рассуждений в “основываясь на стейте и синхронизации в DOM”. Если вы возьмете старую парадигму и примените её к хукам, то она просто не будет работать как надо и вполне может застопорить всю вашу работу.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_5AGbGZDRF6BjQx0jJn41wQ.gif\")
Но эта тема полна свойственной React терминологии и без глубокого и осязаемого объяснения она просто забудется.
\n\n\n\nКогда разработчики только начинают изучать хуки, до этого имея опыт работы только на классах, то они склонны думать, что мол “ага мне нужно запустить какой-либо код единожды при монтировании как с componentDidMount(). Ааа, я вижу, что useEffect имеет пустой массив как зависимость. Окей, я знаю как это работает.”
Такой ход мыслей приведет нас к нескольким проблемам:
\n\n\n\nОни просто по сути исполнения совершенно разные, так что вы можете не получить желаемого эффекта, рассматривая их как эквиваленты друг другу.
\n\n\n\nЕсли вы будете рассуждать в стиле: “ага, сейчас вызову сайд эффект разок при монтировании”, то к сожалению это значительно притормозит ваш процесс захода в хуки.
\n\n\n\nПоймите, что рефакторинг из классов на хуки не будет означать банальной замены componentDidMount на useEffect(fn, []).
Сначала давайте поговорим о моменте времени выполнения каждого из них. componentDidMount запускается после монтирования компонента. По документации, если вы сразу же выставляете стэйт(синхронно), то React уже знает как инициировать дополнительный рендер и использовать второй респонс как изначальный UI, чтобы пользователь не увидел мигание между ререндерингом компонентов. Представьте, что вам надо узнать ширину DOM элемента с componentDidMount и вам надо обновить стэйт, чтобы что-нибудь отработало в зависимости от ширины взятого элемента. Вот последовательность действий:
Компонент рендерится впервые
\n\n\n\nОтдаваемое значение render() используется для монтирования нового DOM.
componentDidMount срабатывает и сразу же выставляет стэйт.
Изменение стэйта означает то, что render() вызывается снова и отдаёт новый JSX, который заменяет предыдущий рендер.
Браузер показывает только второй рендер, чтобы избежать мигания промежуточных рендеров.
\n\n\n\n\n\n\n\nОтлично, что это так работает когда нам это вообще нужно. Но большинство времени нам не нужен такой предоптимизированный подход, потому что мы делаем асинхронные запросы в сеть и уже потом выставляем стэйт после отрисовки экрана.
\n\n\n\ncomponentDidMount и useEffect запускаются после монтирования. Но useEffect запускается после отрисовки экрана, а не как описано выше. Это говорит о том, что в этом случае будет мерцание экрана, если вам надо прочитать что-то из DOM и затем синхронно выставить стэйт, что сделать новый UI.
Как же тогда получить старое поведение когда нам это нужно?
\n\n\n\nuseLayoutEffect был разработан для того, чтобы иметь такой же тайминг как и у componentDidMount. В общем useLayoutEffect(fn, []) куда ближе по поведению к componentDidMount(), чем useEffect(fn, []). Ну по крайней мере с точки зрения тайминга.
Возможно нет.
\n\n\n\nЕсли вы хотите избежать такого мерцания, синхронно выставляя стэйт, то используйте useLayoutEffect. Но так как это довольно редкий случай, то используйте просто useEffect.
Применение асинхронного кода неизбежно в React. Когда такой код завершается, то значения полученных пропсов и стэйта могут быть немного смущающими. Давайте представим, что у нас был определенный асинхронный код, которому при отработке нужно было знать стэйт каунтера.
\n\n\n\nclass App extends React.Component {\n state = {\n count: 0\n };\n\n componentDidMount() {\n longResolve().then(() => {\n alert(this.state.count);\n });\n }\n\n render() {\n return (\n <div>\n <button\n onClick={() => {\n this.setState(state => ({ count: state.count + 1 }));\n }}\n >\n Count: {this.state.count}\n </button>\n </div>\n );\n }\n}При загрузке страницы у нас есть три секунды, чтобы кликнуть на кнопку несколько раз, перед тем как longResolve завершится. Далее выскочит алерт, говорящий актуальное значение count. С этим класс-компонентом, кликнув пять раз вы получите 5 в алерте.
Теперь давайте отрефакторим это в хуках.
\n\n\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n longResolve().then(() => {\n alert(count);\n });\n }, []);\n\n return (\n <div>\n <button\n onClick={() => {\n setCount(count + 1);\n }}\n >\n Count: {count}\n </button>\n </div>\n );\n}Кажется, что это отличный рефакторинг на хуки, но поведение тут будет другое. В этом примере вне зависимости от количества кликов вы будете получать 0.
Разница тут в том, что useEffect хватает значение каунтера когда он создаётся. Когда мы отдаем коллбэк к useEffect, он задерживается в памяти, где он только знает то, что count равен 0 когда был создан. С кодом на классах, componentDidMount не имеет замыканий в стэйте, так что он просто читает актуальное значение.
Чтобы помочь это понять, представьте, что JS хранит коллбэк в памяти примерно так:
\n\n\n\n// Это память, мне тут надо попридержать функцию. А и когда она создастся, там будут значения, такие как `count: 0`. Их надо тоже запомнить\n() => {\n// Хоть это и не так работает, но с точки зрения ментальной модели это как бы как будто count это просто переменная с указанным значением 0.\nconst count = 0\n longResolve().then(() => {\n alert(count);\n });\n}useEffect захватывает значения.В статье Дэна Абрамова “A Complete Guide to useEffect”, примеры схожи и показывают поведение setInterval которое вы бы могли ожидать в классах, но не в хуках:
// Версия на классах:\nclass App extends React.Component {\n state = { count: 0 }\n\n componentDidMount() {\n setInterval(() => {\n this.setState({ count: this.state.count + 1 })\n }, 1000);\n }\n\n render() {\n return <div>{this.state.count}</div>\n }\n}\n\n// То, что нам кажется эквивалентном на хуках:\nfunction App() { \n const [count, setCount] = useState(0)\n\n useEffect(() => {\n const id = setInterval(() => {\n setCount(count + 1)\n }, 1000);\n return () => clearInterval(id)\n }, [])\n\n return <div>{count}</div>\n}В примере с классом наш каунтер увеличивается каждую секунду. А в примере с хуками он увеличивается только с 0 до 1 и затем останавливается. Но тут интересно то, что сам интервал на самом деле не останавливается. Причиной такого поведения является то, что коллбэк useEffect как бы “захватывает” то, что он видит как count при создании. Этот колбэк всегда думает, что count равен 0 и следовательно мы всегда будем к нулю прибавлять единицу.
Если это кажется довольно сложным, то дайте ка я вам объясню как тут что происходит, это очень поможет вам в избежании будущих багов.
\n\n\n\nПомните, что это не урок того, как работает setInterval с хуками, это скорее о том как применить ментальную модель с классов на хуки и о том как useEffect “захватывает” значения.
Для начала нам надо понять почему массив с зависимостями так назван.
\n\n\n\n\n\n\n\nЕсли ваш эффект “зависит” от чего то, то оно должно быть указано в вышеупомянутом массиве.
Наш код зависит от переменной c каунтером в стэйте. Вообще, нам надо было так сделать уже давным давно.
\n\n\n\nuseEffect(() => {\n const id = setInterval(() => {\n setCount(count + 1)\n }, 1000)\n return () => clearInterval(id)\n }, [count])Теперь код работает так, как нам надо, потому что мы хотим, чтобы коллбэк в useEffect запускался только тогда, когда каунт меняется. Когда это происходит, то предыдущий коллбэк в памяти очистится и следовательно setInterval будет удален. Затем React создаст совершенно новый callback в памяти, который уже будет знать, что count равен 1.
// Эй память, нам тут надо функцию сохранить...\n() => {\n const count = 0\n const id = setInterval(() => {\n setCount(count + 1)\n }, 1000)\n return () => clearInterval(id)}\n\n// Потом при смене каунта...\n// Эй память, очисти первую функцию \n// и потом нам надо захостить вторую...\n() => {\n const count = 1\n const id = setInterval(() => {\n setCount(count + 1)\n }, 1000)\n return () => clearInterval(id)\n}Если мы хотим узнать актуальное значение, а не которое “захватили”, то вы всегда можете использовать рефы.
\n\n\n\nЯ думаю, что пример с setInterval это отличный способ понять суть “захватывания” в useEffect, хотя стоит отметить, что есть ещё одно API для указания стэйта, в котором мы передаём функцию, а не значение. React вызовет функцию с существующим стэйтом:
useEffect(() => {\n const id = setInterval(() => {\n // Когда мы передаем функцию, React вызывает её с\n // актуальным стейтом и всякий раз в этом случае она же и становится актуальным стэйтом.\n setCount(count => count + 1)\n }, 1000)\n return () => clearInterval(id)\n}, [])Теперь наш эффект не “стесняет” переменную count и теперь нам не нужно добавлять массив с зависимостями, и мы не стесняем его, следовательно ничего не указывается как исходное значение при запуске эффекта. Хоть это уже немного и отклонение от основной темы, но сейчас мы хотя бы понимаем суть “захватывания” для эффектов и то, что есть другой способ выставить стэйт — будем надеятся, что это win-win при обучении хукам.
Есть некоторые баги, которых можно избежать во время использования “захвата”, а не актуального значения. Посмотрите этот пример от Дэна Абрамова https://codesandbox.io/s/pjqnl16lm7, где он показывает как “захват” отдаёт вам ожидаемое поведение с поведением компонента класса, который отдаёт актуальный стэйт. В этом примере мы можем подписаться на кого-нибудь и затем быстро менять профайлы. Когда мы меняем профайлы перед получением ответа из сети, существует баг, когда показывается имя нашего последнего подписчика. Это баг с версией на классах, а не с версией на хуках. Почитайте тут про это.
\n\n\n\nПредположим, что вы написали такой код:
\n\n\n\nclass UserProfile extends React.Component {\n state = { user: null }\n\n componentDidMount() {\n getUser(this.props.uid).then(user => {\n this.setState({ user })\n })\n }\n\n render() {\n // ...\n }\n}Видите баг?
\n\n\n\nЧто случиться если проп uid изменится? Мы не увидим нового пользователя, потому что мы не обрабатываем это изменение в componenDidUpdate. Обычно, если componentDidMount делает сайд-эффекты, зависящие от пропсов или стэйта, то вам в помощь тогда придет componentDidUpdate, чтобы обработать сайд-эффект уже тогда, когда проп или стэйт изменится. Но иногда получается не совсем так идеально и мы можем напороться на баг, забыв о вышеописанном.
Если вы делаете рефакторинг с классов на хуки и вы просто меняете componentDidMount на useEffect с пустым массивом зависимостей, то вы почти всегда будете ловить баги в новом коде. Давайте представим, что мы отрефакторили код выше в это:
function UserProfile({ uid }) {\n const [user, setUser] = useState(null)\n\n useEffect(() => {\n getUser(uid).then(user => {\n setUser(user)\n })\n }, []) // buggy without `uid` in this array\n // ...\n}Этот код будет работать как надо до тех пор, пока у UserProfile не поменяется пропс uid. Если у вас уже на борту есть дополнительные правила по листингу хуков, то вы будете получать предупреждения пока не добавите [uid], как массив зависимостей. Учитывая это, версия с хуками будет делать тоже самое, что делали бы componentDidMount и componentDidUpdate. В общем вы видите, что сам вопрос “Является ли useEffect с пустым массивом зависимостей новой версией componentDidMount?” Сам по себе некорректен и тут стоит сразу начинать с того, что componentDidMount зачастую просто не может быть отрефакторен в useEffect(fn, []).
К слову, не забудь сделать функцию очистки. Это предостережет от багов выставления стэйта на демонтированный компонент и выставление старого стэйта, когда uid изменяется.
useEffect(() => {\n let isCurrent = true\n getUser(uid).then(user => {\n if (isCurrent) {\n setUser(user)\n }\n })\n return () => {\n isCurrent = false\n }\n}, [uid])Думать во временных границах это то, как мы делали с компонентами класса. Теперь нам надо думать “как выглядит UI с этим стейтом?” и “когда стэйт изменяется, какие сайд-эффекты надо перезапускать.” Попробуйте отталкиваться от стэйта, а не от “тайминга жизненного цикла” компонента.
\n","date":"2021-01-11T14:17:28.000Z","title":"useEffect(fn, []) это не новый componentDidMount()","id":"14236f35-b58a-56dc-a1cc-4d6b44cc05d1","excerpt":"Они почти одинаковые. Но существует достаточно различий, которые возможно доставят вам неудобства, особенно если вы делаете рефакторинг с классов.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/fjdnsjklfnsdjklnfsknlj.jpg"}}},{"node":{"slug":"trailing-commas-v-javascript-es-2017","content":"\nМаленькая, но уж очень полезная статья о том, как использовать замыкающие запятые в JavaScript.
\n\n\n\n\n\n\n\n\n\n\n\nКто-то называет их просто Trailing Commas, без перевода. Кто-то говорит, что это висящие запятые, конечные запятые или последние запятые. Слышал даже, что её называют гуляющей запятой. Я же сторонник более подходящего варианта в техническом отношении, а именно за замыкающую запятую. Использование англоязычного варианта мне кажется неуместным в этом случае.
Вообще, некоторые замыкающие запятые можно было использовать, своеобразно конечно, ещё с самого зарождения JavaScript. Но эти совершенно новые и ниже вы узнаете буквально всё про них.
\n\n\n\nПредположим, что у вас есть список домашних дел и вы скорее всего разделяете эти самые дела запятыми:
\n\n\n\ndishes, vacuum, tidyЗамыкающая запятая это просто запятая, которая идёт после последнего элемента в списке. Она необязательна, но в некоторых случаях использования в JS, мы можем её использовать:
\n\n\n\ndishes, vacuum, tidy,И знаете, есть несколько случаев, когда вам всё таки понадобится её использовать. Предположим, что вам надо программно добавлять элементы в массив:
\n\n\n\nБез замыкающей запятой большинство значений может быть добавлено в массив, как value + ','. Но тут надо немного доработать логику в коде и убедиться в том, что последний элемент будет добавлен в массив без запятой в конце.
С замыкающей запятой, все элементы могут быть добавлены в массив, как value + ','.
С самого зарождения JavaScript, замыкающие запятые можно было использовать при создании массивов:
\n\n\n\n// Оба варианта одинаковы:\nlet arr = [ 1, 2 ];\nlet arr = [ 1, 2 , ];\narr.length; // 2Замыкающие запятые также вполне можно использовать и в объектах:
\n\n\n\n// Оба варианта одинаковы:\nlet obj = { \n a: 95, \n b: 23\n};\nlet obj = { \n a: 95, \n b: 23,\n};Начиная с ES 2017, замыкающие запятые можно использовать в указании параметров и вызовах функции:
\n\n\n\n// Оба варианта одинаковы:\nfunction f(a,b) {}\nfunction f(a,b,) {}\n// Оба варианта одинаковы:\nf(1,2);\nf(1,2,);Однако, если в аргументе для функции будет только замыкающая запятая, то вы получите синтаксическую ошибку:
\n\n\n\nfunction f(,) {}; \n// SyntaxError: missing formal parameter\nf(,); \n// SyntaxError: expected expression, got ','При использовании rest параметров нельзя применять замыкающие запятые, так как получите в ответ SyntaxError:
function f(...a,) {};\n// SyntaxError: parameter after rest parameter\nlet [a, ...b,] = [1, 2, 3, 4, 5];\n// SyntaxError: rest element may not have a trailing commaВ JSON нельзя использовать замыкающие запятые. Попытаясь спарсить JSON с такой запятой, вы получите синтаксическую ошибку:
\n\n\n\nJSON.parse('[\"a\", \"b\",]');\n// SyntaxError JSON.parse: unexpected characterМаленькая, но уж очень полезная статья о том, как использовать замыкающие запятые в JavaScript.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/12/DglYtvO7Bn0-13.jpg"}}},{"node":{"slug":"react-router-chast-3-redirekty-peredacha-props-komponentu-routa-i-vlozhennie-routy-bonus","content":"\nВ этой серии статей вы подробно и доходчиво узнаете о том, как работает Router в React, как его можно использовать и другие интересные фишки этого функционала. Это завершающая часть, в ней будет рассказано о передаче пропсов компоненту роута, редиректах и вложенных роутах. + бонус, стилизация активных элементов навигации.
\n\n\n\nПодробно о React Router. Часть 1 — основы роутинга, типы и динамические страницы
\n\n\n\n\n\n\n\np.s статья описывает самый распространенную версию роутера на данный момент. 6я версия сейчас находится в альфе и имеет кардинально другой синтаксис.
\n\n\n\n\n\n\n\nМы видели несколько примеров и рабочих кейсов в React роутере. Один из них это передача пропсов напрямую компоненту самого роута.
\n\n\n\nВ React-router это делается очень легко. Давайте создадим новый роут для передачи props его компоненту.
\n\n\n\n// App.js\n...\n\nconst PropsPage = () => { return ( <h3>Props Page</h3> );};\nconst App = () => {\n return (\n <section className=\"App\">\n <Router>\n ...\n <Link to=\"/404-not-found\">404</Link>\n <Link to=\"/props\">Passing Props</Link> \n <Switch>\n ...\n <Route exact path=\"/props\" component={PropsPage} /> \n <Route component={NoMatchPage} />\n </Switch>\n </Router>\n <a href=\"/about\">about with browser reload</a>\n </section>\n );\n};\n\nexport default App;Прямо сейчас мы добавили компонент и новую страницу. Давайте передарим пропс title уже самой странице.
Есть два способа это сделать. Первый очень простой.
\n\n\n\n...\n\nconst PropsPage = ({ title }) => {\n return (\n <h3>{title}</h3>\n );\n};\n\n...\n\n<Route exact path=\"/props-through-component\" component={() => <PropsPage title={`Props through component`} />} />Эта штука сработает, но такой подход не рекомендуется применять с роутером. Почему? Сейчас объясню.
\n\n\n\nПод капотом React использует React.createElement для рендеринга компонента, переданного пропсу компонента. Если мы передадим ему функцию, то он создаст новый компонент при каждом рендере, вместо того, чтобы просто обновить уже существующий компонент.
В маленьких приложениях с довольно несложными страницами, это не будет влиять на производительность. Но для больших приложений с множественным изменением состояния на странице, это значительно снизит производительность из-за необязательных циклов ре-рендеринга.
\n\n\n\nРоутер даёт нам довольно простое решение в этой ситуации. Вместо простой передачи функции через пропсы component, мы можем передать их через пропсы render. Передавая наши пропсы, нам также надо передать дефолтные пропсы к пропсам рендеринга. Давайте посмотрим пример:
...\n\n<Link to=\"/props-through-render\">Props through render</Link>\n...\n\n<Route exact path=\"/props-through-render\" render={(props) => <PropsPage {...props} title={`Props through render`} />} />Вот это уже рекомендуемый способ передачи самих пропсов в React роутере.
\n\n\n\nЭто очень просто. Если вы хотите увидеть весь пример, то проверьте его тут.
\n\n\n\nВ основном редиректы используют при проверке пользователей на авторизацию, если пользователь не авторизован, то его перенаправит на соответствующую страницу.
\n\n\n\nВообще, всё это очень легко сделать с использованием компонента Redirect.
Давайте посмотрим на простой пример того, как он работает. Давайте создадим простую страницу, которая перенаправит на другую страницу основываясь на заданных условиях.
\n\n\n\nДавайте перенаправим с /old-route на /new-route
Добавляем роут редиректа в наш пример.
\n\n\n\nСейчас мы создадим два URL.
\n\n\n\n/old-route это старый URL, с которого будет редирект на новый URL /new-route, используя компонент Redirect.
// Импортируем компонент Redirect из react-router\nimport { Route, Redirect } from 'react-router';\n\n// Передаем параметры редиректа этому компоненту\n<Redirect from=\"/old-route\" to=\"/new-route\" />\n// Указываем параметры\n<Route exact path=\"/new-route\" component={RedirectPage} />\n\n<Link to=\"/old-route\">Redirecting to New page</Link>\n\n// Page component\nconst RedirectPage = () => {\n return (\n <h3>Redirect Page</h3>\n );\n};Теперь проверьте пример простого редиректа
\n\n\n\nТут вы увидите, что старая ссылка редиректит на новую ссылку и тут же показывает его в браузере.
\n\n\n\nТут мы сделаем небольшую страничку, которая будет редиректить на дашборд, если пропс isLoggedin будет true или покажем простое сообщение в случае с false.
Давайте сначала сделаем страничку.
\n\n\n\nconst AuthPage = ({ isLoggedIn }) => {\n if (isLoggedIn) {\n return <Redirect to=\"/dashboard\" />;\n } else {\n return <h3>User not loggedin</h3>;\n }\n};\n\nconst DashboardPage = () => {\n return <h3>Dashboard Page</h3>;\n};Давайте укажем роут для страниц Auth и Dashboard:
// Указываем роут для Dashboard\n<Route exact path=\"/dashboard\" component={DashboardPage} />\n// Указываем роут для незалогиненной страницы, передав пропс isLoggedIn как false\n<Route exact path=\"/auth-not-loggedin\" render={(props) => <AuthPage {...props} isLoggedIn={false} />} />\n\n<Route exact path=\"/auth-loggedin\" render={(props) => <AuthPage {...props} isLoggedIn={true} />} />\n\n\n// Lets add the links to navigate to these pages\n<Link to=\"/auth-not-loggedin\">Not Loggedin</Link>\n<Link to=\"/auth-loggedin\">User Loggedin</Link>Теперь можете всё проверить сами. Роут редиректит и меняет URL в браузере на /dashboard, когда мы передаем isLoggedIn как true. И в свою очередь показывает простое сообщение для неавторизованных пользователей.
Посмотрите этот функционал тут
\n\n\n\nДо этого мы видели простые примеры работы с реакт роутером. А сейчас мы разберемся с тем, как работать с вложенными роутами. Перед тем как углубиться в них давайте поймем, что же это такое?
\n\n\n\nПростой пример
\n\n\n\n\n\n\n\nwww.example.com/usersЭтот роут показывает всех пользователей.
\n\n\n\nВложение первого уровня:
\n\n\n\nwww.example.com/user/param\nwww.example.com/user/miguelЭти примеры роутов показывают конкретного пользователя. Param и miguel это userId используемые для получения данных о конкретных пользователях.
Вложение второго уровня:
\n\n\n\nwww.example.com/user/param/details\nwww.example.com/user/param/employer\nwww.example.com/user/miguel/details\nwww.example.com/user/miguel/employerwww.example.com/user/param/employer Этот роут получает простую информацию о пользователе и также информацию о его работодателе. Так что можно сказать, что это вложенные роуты. А вложения второго уровня уже зависят от параметров вложения первого уровня (userId: param)
Давайте начнем с конкретного примера. Мы собираемся показать пользователей и затем вывести детальную информацию о них.
\n\n\n\nДля примера мы возьмем вот эти данные:
\n\n\n\nconst users = [\n {\n name: 'Param',\n description:\n 'Guy who writes lorem ipsum all the time when he needs content placeholder',\n tabs: [\n {\n name: 'personal',\n content: {\n firstname: 'Param',\n lastname: 'Harrison',\n },\n },\n {\n name: 'employer',\n content: {\n name: 'Jobbatical',\n city: 'Tallinn, Estonia',\n },\n },\n ],\n },\n {\n name: 'Miguel',\n description:\n 'the best guy doing deployment in his own clusters of kubernetes world',\n tabs: [\n {\n name: 'personal',\n content: {\n firstname: 'Miguel',\n lastname: 'Medina',\n },\n },\n {\n name: 'employer',\n content: {\n name: 'Skype',\n city: 'Arizona, US',\n },\n },\n {\n name: 'other',\n content: {\n country: 'Mexico',\n age: 30,\n },\n },\n ],\n },\n];В этом примере есть несколько пользователей и каждый из них имеет разное количество вложенных табов, в каждом из которых есть имя и контент, который мы покажем.
\n\n\n\nИспользуя эти данные мы создадим эти роуты:
\n\n\n\nВложение первого уровня:
\n\n\n\nhttps://y5pt4.csb.app/user/Param\nhttps://y5pt4.csb.app/user/MiguelВложения второго уровня:
\n\n\n\nhttps://y5pt4.csb.app/user/Param/tab/personal\nhttps://y5pt4.csb.app/user/Param/tab/employer\nhttps://y5pt4.csb.app/user/Miguel/tab/personal\nhttps://y5pt4.csb.app/user/Miguel/tab/employerimport { BrowserRouter as Router, Link, Route } from 'react-router-dom';\n\nfunction App() {\n return (\n <div className=\"App\">\n <Router>\n <h3>Top level routes</h3>\n <ul className=\"unlist\">\n {users.map((user, index) => {\n return (\n <li key={index}>\n <Link to={`/user/${user.name}`}>{user.name}</Link>\n </li>\n );\n })}\n </ul>\n <Route path=\"/user/:userName\" component={UserPage} />\n </Router>\n </div>\n );\n}Тут мы пробегаемся по всем данным пользователей и показываем ссылку на каждого пользователя с данными о нем.
\n\n\n\nТакже мы указываем схему роутов для пользователей. userName это параметр, передающийся компоненту UserPage.
const UserPage = ({ match }) => {\n \n const {\n params: { userName },\n } = match;\n const user = users.find(({ name }) => name === userName);\n\n \n return (\n <div>\n User Name: <strong>{user.name}</strong>\n <p>{user.description}</p>\n </div>\n );\n};Компонент UserPage покажет простую информацию о конкретном пользователе.
React роутер передаст пропсы match и мы сразу получим информацию о пользователе используя значение userName.
const UserPage = ({ match }) => {\n ...\n\n return (\n <div>\n ...\n <p>Dyanmic nested route</p>\n <ul className=\"unlist\">\n {user.tabs.map((tab, index) => {\n return (\n <li key={index}>\n <Link to={`${match.url}/tab/${tab.name}`}>{tab.name}</Link>\n </li>\n );\n })}\n </ul>\n \n <Route path={`${match.path}/tab/:tabName`} component={TabPage} />\n </div>\n );\n};Пропс match отдаёт нам url через match.url, который можно использовать для создания вложенных роутов.
Тут мы создаем вложенные роуты, используя информацию для табов у каждого пользователя.
\n\n\n\nmatch.path уже выдаёт нам имя пути. Его мы будем использовать для указания вложенной схемы роута.
Но зачем использовать match.path, а не match.url?
Потому что match.path содержит настоящий путь, то есть user/:userName, где match.url уже готовый url user/Param.
Именно поэтому match.url находится в Link, а match.path используется в определении роута.
<Route path={`${match.path}/tab/:tabName`} component={TabPage} />tabName это параметр роута, который мы передаём компоненту TabPage. Он использует его для нахождения точного таба и показывает сам контент непосредственно в табе. Давайте глянем на код.
const TabPage = ({ match }) => {\n const {\n params: { userName, tabName },\n } = match;\n\n const tab = users\n .find(({ name }) => name === userName)\n .tabs.find(({ name }) => name === tabName);\n\n // Show the content for that particular tab\n return (\n <div>\n Tab Name: <strong>{tab.name}</strong>\n <h6>Tab content: </h6>\n <ul>\n {Object.keys(tab.content).map((key, index) => {\n return (\n <li key={index}>\n <span>{key} : </span>\n <strong>{tab.content[key]}</strong>\n </li>\n );\n })}\n </ul>\n </div>\n );\n};Пропсы match отдадут нам все params в URL userName, tabName
Находим таб в наших данных, используя оба параметра
\n\n\n\nПоказываем информацию таба
\n\n\n\nСледовательно, мы показали вложенные роуты и вложенный контент в этом примере.
\n\n\n\nПосмотрим пример в действии.
\n\n\n\n\n\n\n\nВ React роутере есть <NavLink> и <Link> компоненты. Далее мы рассмотрим разницу между ними и то, как можно было бы использовать <NavLink> для указания того, какая именно ссылка активна в панели навигации приложения.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2020/12/1_5kTlzNFcG5Hu9_QkAZK53g.png\")
Оба компонента <NavLink> и <Link> могут быть использованы для создания удобной навигации в приложении. Внутри обоих компонентов мы можем использовать атрибут to для указания пути ведущему по ссылке. После установки react-router-dom и импорта <Link>, всё связанное с ним будет выглядеть так:
import { Link } from 'react-router-dom'\n\n<Link to=\"/about\">About</Link>Вы можете также импортировать и <NavLink>:
import { NavLink } from 'react-router-dom'\n<NavLink to=\"/about\">About</NavLink>Оба они компилируются в html код, как тут:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2020/12/1_qdNP3P8kB9D0V5b3wa2Bbw.png\")
Может показаться, что основной их функционал одинаков. Так зачем же нам тогда оба? А затем, что <NavLink> идёт вместе с дополнительным атрибутом стилизации, который позволяет нам стилизовать по особенному именно активную ссылку.
Вот пример:
\n\n\n\nimport React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nclass NavBar extends Component {\n render() {\n return (\n <div className=\"navbar\">\n <Link to=\"/\" className=\"navbar-logo\">\n dA\n </Link>\n <div className=\"navbar-list\">\n <Link to=\"/search\">Collection</Link>\n <Link to=\"/map\">Map</Link>\n <Link to=\"/login\">Log In</Link>\n </div>\n </div>\n );\n }\n}\nexport default NavBar;Компонент NavBar даёт нам навигацию по четырём роутам — “/”, “/search”, “map” и “login” с использованием старого доброго компонента <Link>.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2020/12/1_vvkpTz0fRU7SCZqSWlgSLA.gif\")
Как показано выше, мы можем вполне успешно прыгать по роутам, каждый из которых ассоциирован с компонентом <Link>.
А теперь давайте посмотрим на различия между двумя компонентами. <NavLink> даёт нам дополнительный атрибут activeClassName. В этом атрибуте мы можем указывать класс в CSS, который будет выделять то, что ссылка активна.
import React, { Component } from \"react\";\nimport { NavLink } from \"react-router-dom\";\nclass NavBar extends Component {\n render() {\n return (\n <div className=\"navbar\">\n <NavLink to=\"/\" className=\"navbar-logo\">\n dA\n </NavLink>\n <div className=\"navbar-list\">\n <NavLink to=\"/search\" activeClassName=\"chosen\">\n Collection\n </NavLink>\n <NavLink to=\"/map\" activeClassName=\"chosen\">\n Map\n </NavLink>\n <NavLink to=\"/login\" activeClassName=\"chosen\">\n Log In\n </NavLink>\n </div>\n </div>\n );\n }\n}\nexport default NavBar;CSS селекторы описанные ниже, рендерят линию подчеркивания в тех случаях, когда мы наводим на ссылку и когда она открыта и активна.
\n\n\n\n.navbar-list a.chosen,\n.navbar-list a:hover {\n border-bottom: 1px solid #F14B31;\n}С помощью <NavLink>, мы можем добавить атрибуты стилизации для активных элементов, чей путь совпадает с URL в браузере.
Это завершающая часть, в ней будет рассказано о передаче пропсов компоненту роута, редиректах и вложенных роутах. + бонус, стилизация активных элементов навигации.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/12/DglYtvO7Bn0-12.jpg"}}},{"node":{"slug":"react-router-chast-2-parametry-zaprosa-404-stranitsa-i-peredacha-propsov","content":"\nВ этой серии статей вы подробно и доходчиво узнаете о том, как работает Router в React, как его можно использовать и другие интересные фишки этого функционала. Это вторая часть из 3х, в ней будет рассказано об основе работы с параметрами запросов, 404 страницах и передаче пропсов самому компоненту роута.
\n\n\n\nПервая часть — Подробно о React Router. Часть 1 — основы роутинга, типы и динамические страницы
\n\n\n\np.s статья описывает самый распространенную версию роутера на данный момент. 6я версия сейчас находится в альфе и имеет кардинально другой синтаксис.
\n\n\n\n\n\n\n\nВ третьей части мы узнали о технике создания динамических ссылок в React Router. В этой части, мы узнаем о работе с параметрами запроса в URL.
\n\n\n\nДавайте создадим новый Route для страницы поиска с параметрами запроса.
// App.js\n...\nconst SearchPage = () => { return ( <h3>Search Page</h3> );}\nconst App = () => {\n return (\n <section className=\"App\">\n <Router>\n <Link to=\"/\">Home</Link>\n <Link to=\"/about\">About</Link>\n <Link to=\"/users\">Users</Link>\n <Link to=\"/search?q=react\">Search</Link> \n <Route exact path=\"/\" component={IndexPage} />\n <Route exact path=\"/users\" component={UsersPage} />\n <Route exact path=\"/user/:userId\" component={UserPage} />\n <Route exact path=\"/about\" component={AboutPage} />\n <Route exact path=\"/search\" component={SearchPage} /> \n </Router>\n <a href=\"/about\">about with browser reload</a>\n </section>\n );\n};\n\n...Это такой визуальный способ создания ссылки, определения роута и компонента. Если вы приглядитесь, то не заметите разницы между простым статичным роутом и роутом с параметрами запроса.
\n\n\n\nНам нет нужды в указании параметров запроса в роуте, так как по дефолту они будут обработаны React роутером и отправлены в пропсы компонента.
\n\n\n\nЕсли мы укажем вот так /search/?q=:searchValue, то это не сработает в роутере. Вы можете попробовать это в песочнице, роутер этого не поймет.
Теперь нам нужно получить доступ ко всем параметрам запросов, которые мы передаём URL в компоненте. В предыдущей части мы говорили о том как роутер передаёт два параметра match и location.
Для динамических роутов, React роутер передаёт параметры в пропсы match.
Для роутов с параметрами запроса, инфо о них будет отправлено через location пропсы.
Давайте увидим, какая же информация там отправляется.
\n\n\n\n...\n\nconst SearchPage = ({ match, location }) => {\n return (\n <p>\n <strong>Location Props: </strong>\n {JSON.stringify(location, null, 2)}\n </p>\n );\n}\n\n...Как вы видите на странице поиска:
\n\n\n\nLocation Props: { \"pathname\": \"/search\", \"search\": \"?q=react\", \"hash\": \"\", \"key\": \"allc40\" }Роутер передаёт параметры запроса в location.search. Если вы добавите больше параметров запросов, то получите все тоже самое в той же строке, например ?q=react&limit=3.
Чтобы получить каждое значение отдельно, вы могли бы использовать вашу собственную библиотеку помощник или пакет npm, который умеет работать с параметрами запроса таким образом, чтобы вы получали каждое значение парой ключ-значение, но уже в отдельном объекте.
\n\n\n\nНапример, есть пакет yarn add qs. Но существует огромное количество альтернатив ему. Вы можете смело выбрать тот, который подходит вашему URL.
Давайте покажем значение location.search в компоненте.
const SearchPage = ({ match, location }) => {\n return (\n <p>\n <strong>Query Params: </strong>\n {location.search}\n </p>\n );\n};Мы уже узнали как создавать динамические URL и как работать с параметрами запросов в React роутере, а также как передавать эти значения странице компонента.
\n\n\n\nВ этой части мы узнаем о том, как показать 404 страницу, в том случае, если нет подходящего роута для URL.
\n\n\n\nЗапустите приложение и зайдите на любую несуществующую страницу, например /404-not-found.
В данный момент вы не увидите ни один отрендернный компонент. Давайте это исправим и покажем дефолтную страницу для тех случаев, когда нет совпадения ни с одним роутом.
\n\n\n\nВ React роутере это сделать очень легко. Внутри самого компонента роутера создайте роут без указанного пути. Затем убедитесь в том, что вы поместили этот код после всех роутов так, чтобы роутер сначала проверил все указанные роуты и уже точно принял решение показать 404 страницу.
\n\n\n\n// App.js\n\n...\n\nconst NoMatchPage = () => {return (<h3>404 - Not found</h3>);};\nconst App = () => {\n return (\n <section className=\"App\">\n <Router>\n ...\n <Link to=\"/users\">Users</Link>\n <Link to=\"/search?q=react\">Search</Link>\n ...\n <Route exact path=\"/about\" component={AboutPage} />\n <Route exact path=\"/search\" component={SearchPage} />\n <Route component={NoMatchPage} /> \n </Router>\n </section>\n );\n};\n\n...Зайдите на любой рандомный URL и вы увидите простую 404ю страницу. Но подождите, давайте проверим будут ли работать другие страницы. А оказывается нет.
\n\n\n\nЗайдите по ссылке about, вы увидите, что отрендерится и страница about, и 404-я страница. Это произойдёт так как точный роут совпадет с /about и потом он пробежится до конца всех указанных роутов и загрузит 404 роут, так как у него не указан путь.
В React роутере есть компонент под названием Switch, чтобы остановиться на одном роуте и исключить загрузку любых других роут компонентов после него.
Тут все очень просто. Оберните все роуты в Switch. Давайте это сделаем правильно и сделаем 404-ю страницу без ошибок.
// App.js\n\n...\nimport { Link, BrowserRouter as Router, Route, Switch } from 'react-router-dom';...\n\nconst App = () => {\n return (\n <section className=\"App\">\n <Router>\n ...\n <Switch> \n <Route exact path=\"/\" component={IndexPage} />\n ...\n <Route exact path=\"/search\" component={SearchPage} />\n <Route component={NoMatchPage} />\n </Switch> \n </Router>\n </section>\n );\n};\n\n...Тут Switch проверит роуты на совпадение и если найдется совпадающий роут, то дальнейший проверка будет прервана. Таким образом мы избавимся от рендеринга 404 роута для всех страниц.
Мы видели несколько примеров и рабочих кейсов в React роутере. Один из них это передача пропсов напрямую компоненту роута.
\n\n\n\nВ React роутере это очень легко сделать. Давайте создадим новый роут для передачи его компоненту пропсов.
\n\n\n\n// App.js\n...\n\nconst PropsPage = () => { return ( <h3>Props Page</h3> );};\nconst App = () => {\n return (\n <section className=\"App\">\n <Router>\n ...\n <Link to=\"/404-not-found\">404</Link>\n <Link to=\"/props\">Passing Props</Link> \n <Switch>\n ...\n <Route exact path=\"/props\" component={PropsPage} /> \n <Route component={NoMatchPage} />\n </Switch>\n </Router>\n <a href=\"/about\">about with browser reload</a>\n </section>\n );\n};\n\nexport default App;Прямо сейчас мы добавили компонент и новую страницу. Давайте передарим пропс title уже самой странице.
Есть два способа это сделать. Первый очень простой.
\n\n\n\n...\n\nconst PropsPage = ({ title }) => {\n return (\n <h3>{title}</h3>\n );\n};\n\n...\n\n<Route exact path=\"/props-through-component\" component={() => <PropsPage title={`Props through component`} />} />Эта штука сработает, но такой подход не рекомендуется применять с роутером. Почему? Сейчас объясню.
\n\n\n\nПод капотом React использует React.createElement для рендеринга компонента, переданного пропсу компонента. Если мы передадим ему функцию, то он создаст новый компонент при каждом рендеринге вместо того, чтобы просто обновить уже существующий компонент.
В маленьких приложениях, с довольно не сложными страницами, это не будет влиять на производительность. Но для больших приложений с множественным измнением состояния на странице, это снизит производительность страницы из-за необязательного ре-рендеринга.
\n\n\n\nРоутер даёт нам простое решение в этой ситуации. Вместо простой передачи функции через пропсы component, мы можем передать их через пропсы render. Передавая наши пропсы, нам также надо передать дефолтные пропсы пропсам рендеринга. Давайте посмотрим пример:
...\n\n<Link to=\"/props-through-render\">Props through render</Link>\n...\n\n<Route exact path=\"/props-through-render\" render={(props) => <PropsPage {...props} title={`Props through render`} />} />Вот это уже рекомендуемый способ передачи самих пропсов в React роутере.
\n\n\n\nЭто очень просто. Если вы хотите увидеть весь пример, то проверьте его тут.
\n","date":"2020-12-13T15:15:13.000Z","title":"Подробно о React Router. Часть 2 — параметры запроса, 404 страница и передача пропсов компоненту роута","id":"771b8662-509f-516e-b635-aa2162494388","excerpt":"В этой серии статей вы подробно и доходчиво узнаете о том, как работает Router в React, как его можно использовать и другие интересные фишки этого функционала. Это вторая часть из 3х, в ней будет рассказано об основе работы с параметрами запросов, 404 страницах и передаче пропсов самому компоненту роута.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/12/DglYtvO7Bn0-11.jpg"}}},{"node":{"slug":"react-router-chast-1-osnovy-routinga-tipy-dannyh-i-dynamicheskie-stranicy","content":"\nВ этой серии статей вы подробно и доходчиво узнаете о том, как работает Router в React, как его можно использовать и другие интересные фишки этого функционала. Это первая часть из 3х, в ней будет рассказано об основах роутинга, типах и созданиях динамических страниц.
\n\n\n\np.s статья описывает самый распространенную версию роутера на данный момент. 6я версия сейчас находится в альфе и имеет кардинально другой синтаксис.
\n\n\n\n\n\n\n\nReact это широко используемая библиотека для client-side веб приложений. Сами знаете, в любом веб приложении будет по несколько страниц. Правильный роутинг ссылок и загрузка разных страниц в зависимости от параметров заданных маршрутов это главное требование для буквально любого приложения.
\n\n\n\nСуществует отличный npm пакет, который берет на себя все сложности роутинга на React. Это react-router-dom — одна из самых используемых библиотек в react.
\n\n\n\nДавайте создадим две простые страницы.
\n\n\n\nГлавную (/)
И страницу About (/about)
Создайте простое react приложение с использованием create-react-app CLI. Это очень просто сделать с помощью npx — npx create-react-app my-react-app
// App.js\nimport React from 'react';\n\nconst App = () => {\n return (\n <section className=\"App\">\n <h1>React routing Example</h1>\n </section>\n );\n};\n\nexport default App;Давайте создадим две страницы. Ну или просто два функциональных компонента.
\n\n\n\n// App.js\n...\n\nconst IndexPage = () => {\n return (\n <h3>Home Page</h3>\n );\n};\n\nconst AboutPage = () => {\n return (\n <h3>About Page</h3>\n );\n};\n\n...Перед тем как углубиться в код роутера. Давайте сначала поймем то, что же нам надо для роутинга страниц в нашем приложении.
\n\n\n\n\n\n\n\nСсылки для навигации между страницами.
Нам нужно будет определить пути к страницам. Тут мы укажем путь URL и компонент, который нужно загружать с этим URL.
Ещё мы определим роутер, который будет проверять наличие запрашиваемого URL в указанных роутах.
Итак, давайте создадим компоненты Link и Route. Для начала установите пакет yarn add react-router-dom.
// App.js\n...\nimport { Link, BrowserRouter as Router, Route } from 'react-router-dom';...\n\nconst App = () => {\n return (\n <section className=\"App\">\n <Router> \n <Link to=\"/\">Home</Link> \n <Link to=\"/about\">About</Link> \n <Route path=\"/\" component={IndexPage} /> \n <Route path=\"/about\" component={AboutPage} /> \n </Router> \n </section>\n );\n};А теперь дайте пройдем по каждой строчке отдельно.
\n\n\n\nimport { Link, BrowserRouter as Router, Route } from 'react-router-dom';Тут мы импортируем три компонента,
\n\n\n\nLink, который создаст HTML ссылку на страницы.
Route, который укажет маршруты.
И Router в котором будет храниться вся логика нашего роутинга. Когда пользователь кликает на ссылку, этот компонент проверяет есть ли она в указанных роутах. Если да, то роутер сменит URL в браузере и роут отрендерит заданный компонент.
// Link with URL\n<Router>\n <Link to=\"/\">Home</Link>\n <Link to=\"/about\">About</Link>\n</Router>Router должен быть родительским компонентом для Link и Route. Собственно так он и управляет роутингом. Если мы поставим Link или Route за его пределы, то тут мы получим ошибку.
HTML тег a создает ссылку на сервер. Так что каждый раз, как пользователь кликает на роут, он не будет проверять наличие роутера в роуте. Вместо этого он просто редиректнет страницу в браузере на этот роут.
В то время как Link проверяет роутер и роутер проверяет наличие роута, загружая компонент без перезагрузки страницы. Поэтому это и называется client side роутингом. Он не подгружает страницу с сервера при обращении к компоненту Link.
// Route with definition\n<Route path=\"/\" component={IndexPage} />Тут у Route есть путь и props компоненты. component помогает отрендерить компонент, когда пользователь заходит на этот роут. path props указывает путь url, который должен совпадать при посещении пользователем страницы.
Если вы зайдете немного дальше и проверите работу наших роутов, то они будут работать. Но с небольшими тормозами.
\n\n\n\nКликнув на ссылку about, она отрендерит и IndexPage, и AboutPage. Но почему?
Потому что путь указанный для About это /about. Роутер же в свою очередь пробегается по всем определением роутов, сверху вниз. Сначала он проверяет роут с путем /, а у About в URL есть /, так что сначала он рендерит IndexPage. А уже потом проверяет следующий роут /about, который тоже совпадает с заданными параметрами, что приводит к рендерингу компонента AboutPage.
Всё очень просто. Используйте props exact в Route.
...\n\nconst App = () => {\n return (\n <section className=\"App\">\n <Router>\n <Link to=\"/\">Home</Link>\n <Link to=\"/about\">About</Link>\n <Route exact path=\"/\" component={IndexPage} /> \n <Route exact path=\"/about\" component={AboutPage} /> \n</Router>\n </section> \n );\n};\n\n...Этот prop поможет попасть на нужный роут только при полном совпадении, а если нет, то он просто не будет рендерить компонент.
\n\n\n\nТеперь оба компонента будут отлично рендериться и Link будет работать правильно.
В предыдущей секции обсуждали самые основы роутинга в React. Там мы использовали BrowserRouter, как основной роутер.
Но есть ещё несколько других типов роутеров в react router. Сейчас мы посмотрим когда их использовать.
// https://example.com (Один и тот же url для всех роутов)\nimport { MemoryRouter as Router } from ‘react-router-dom’;Это роутер, который не меняет URL в браузере, а оставляет изменения в памяти.
\n\n\n\nОн очень полезен для тестирования и вне браузерных сред разработки.
\n\n\n\nНо в браузере у него нет истории. Так что вы не сможете вернуться назад или вперед при помощи истории.
\n\n\n\n/*\nРоуты с хешем, тут вы можете обращаться к истории.\nhttps://example.com/#/\nhttps://example.com/#/about\n*/\nimport { HashRouter as Router } from 'react-router-dom';Это роутер, который использует client Side hash роутинг.
\n\n\n\nВсякий раз, когда рендерится новый роут, он обновляет URL в браузере с хешированными роутами. (/#/about)
\n\n\n\nХэш часть ссылки не будет обработана сервером, сервер будет всегда отправлять index.html для каждого запроса и игнорировать хешированное значение, которое будет обработано уже React роутером.
\n\n\n\nОн используется для Legacy браузеров, которые обычно не поддерживают pushState API.
\n\n\n\nЕму не нужна конфигурация на сервере для обработки роутов.
\n\n\n\nЭтот роут не рекомендован командой разработчиков которая создавала сам пакет react router. Используйте его только в том случае, если вам нужна поддержка Legacy браузеров или при осутствии серверной логики для обработки client Side роутов.
\n\n\n\n/*\nВы можете использовать историю\nhttps://example.com/\nhttps://example.com/about\n*/\nimport { BrowserRouter as Router } from 'react-router-dom';Самый популярный роутер и роутер для современных браузеров, который использует HTML5 pushState (pushState, replaceState и popState API)
Он роутится как обычный URL в браузере, так что вы не сможете по ссылке отличить был ли это server Side рендеринг или же client side.
\n\n\n\nТут подразумевается то, что ваш сервер обрабатывает все URL запросы (/, /about) и указывает на корневой index.html. И уже отсюда, BrowserRouter обрабатывает роутинг релевантной страницы.
Он принимает forceRefresh пропсы для поддержки Legacy браузеров, которые не тянут HTML5 pushState API.
В начале статьи мы изучили то, как создавать простые статические страницы в роутере. Сейчас мы узнаем как создавать динамические ссылки в react роутере.
\n\n\n\nМы создадим два роута,
\n\n\n\nРоут Users — статические роуты для отображения всех ссылок для отдельных пользователей.
Роут User — каждый пользователь будет идентифицирован по своему уникальному ID и ссылка будет передавать этот ID, а компонент будет отображать нужный контент пользователя.
Давайте создадим простой массив users с данными пользователей.
const users = [\n {\n name: `Param`,\n },\n {\n name: `Vennila`,\n },\n {\n name: `Afrin`,\n },\n];Давайте создадим новые роуты для всех пользователей и одного пользователя в нашем App.js файле.
// App.js\n...\n\nconst UsersPage = () => { return ( <h3>Users Page</h3> );};\nconst App = () => {\n return (\n <section className=\"App\">\n <Router>\n <Link to=\"/\">Home</Link>\n <Link to=\"/about\">About</Link>\n <Link to=\"/users\">Users</Link> \n <Route exact path=\"/\" component={IndexPage} />\n <Route exact path=\"/users\" component={UsersPage} /> \n <Route exact path=\"/about\" component={AboutPage} />\n </Router>\n <a href=\"/about\">about with browser reload</a>\n </section>\n );\n};\n\n...Мы создали ссылку на страницу пользователей и также определили роут для страницы пользователей вместе с ассоциированным компонентом (UsersPage).
Давайте создадим ссылки для каждого из них с UsersPage. (/user/1, /user/2, /user/3)
// userId будет индекс в массиве + 1\nconst UsersPage = () => {\n return (\n <>\n <h3>Users Page</h3>\n {users.map((user, index) => (\n <h5 key={index}>\n <Link to={`/user/${index + 1}`}>{user.name}'s Page</Link>\n </h5>\n ))}\n </>\n );\n};Итак, мы создали страницу пользователей с ссылками на них. Если вы кликните на ссылку, то она приведет вас на несуществующую страницу, потому что мы не создали роут каждому из пользователей.
\n\n\n\nМы можем создать каждый отдельный роут как тут:
\n\n\n\n<Route exact path=\"/user/1\" component={UserPage1} />\n<Route exact path=\"/user/2\" component={UserPage2} />Конечно же нет! Я лгу вам, все мы знаем, что это не подходит для динамических страниц с большим количеством данных. Давайте посмотрим на то, как мы можем создать динамические роуты в React. Это очень и очень легко.
\n\n\n\n<Route path=\"/user/:userId\" component={UserPage} />\nТут :userId это динамические параметры роута. Он передается компоненту. Вы легко можете получить доступ к пропсам userId в компоненте UserPage.
Давайте добавим этот код в наш пример.
\n\n\n\n// App.js\n...\n\nconst UserPage = () => { return ( <h3>User Page</h3> );};\nconst App = () => {\n return (\n <section className=\"App\">\n <Router>\n <Link to=\"/\">Home</Link>\n <Link to=\"/about\">About</Link>\n <Link to=\"/users\">Users</Link>\n <Route exact path=\"/\" component={IndexPage} />\n <Route exact path=\"/users\" component={UsersPage} />\n <Route exact path=\"/user/:userId\" component={UserPage} /> \n <Route exact path=\"/about\" component={AboutPage} />\n </Router>\n <a href=\"/about\">about with browser reload</a>\n </section>\n );\n};\n\n...Теперь наша страница пользователя работает. Но она не показывает никакую информацию непосредственно о самом пользователе. Давайте с этим разберемся.
\n\n\n\nReact роутер передаёт два пропса всем компонентам. Это match и location.
Давайте посмотрим, какая информация находится в этих пропсах, выведя их через сам компонент.
\n\n\n\n// App.js\n\nconst UserPage = ({ match, location }) => { return (\n <>\n <p>\n <strong>Match Props: </strong>\n <code>{JSON.stringify(match, null, 2)}</code> \n </p>\n <p>\n <strong>Location Props: </strong>\n <code>{JSON.stringify(location, null, 2)}</code> \n </p>\n </>\n );\n};И что же там внутри:
\n\n\n\n/*\n URL: /user/1\n userId: 1\n*/\n\n// Match Props\n{ \"path\": \"/user/:userId\", \"url\": \"/user/1\", \"isExact\": true, \"params\": { \"userId\": \"1\" } }\n\n// Location Props\n{ \"pathname\": \"/user/1\", \"search\": \"\", \"hash\": \"\", \"key\": \"7e6lx5\" }Если мы взглянем на контент, то интересный нам параметр userId находится в match.params.userId.
Давайте применим параметры в UserPage компоненте и покажем информацию о пользователе:
// Получаем userId из пропса match и показываем конкретного пользователя из массива пользователей\nconst UserPage = ({ match, location }) => {\n const { params: { userId } } = match;\n\n return (\n <>\n <p>\n <strong>User ID: </strong>\n {userId}\n </p>\n <p>\n <strong>User Name: </strong>\n {users[userId - 1].name}\n </p>\n </>\n );\n};// Деструктуризация объекта in JavaScript\nconst {\n params: { userId },\n} = match;В этой серии статей вы подробно и доходчиво узнаете о том, как работает Router в React, как его можно использовать и другие интересные фишки этого функционала. Это первая часть из 3х, в ней будет рассказано об основах роутинга, типах и созданиях динамических страниц.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/12/DglYtvO7Bn0-10.jpg"}}},{"node":{"slug":"kak-ispolzovat-nullish-coalescing-v-javascript","content":"\nВ этой статье вы узнаете как работать с Nullish Coalsing, а именно оператором нулевого слияния в JavaScript. И чем он отличается от логических операторов. Это первая из цикла статей про ES2020.
\n\n\n\n\n\n\n\n\n\n\n\nOff topic. Лучше всего оставлять этот термин без перевода, то есть просто Nullish Coalsing. Если использовать русский перевод, то лучше как “оператор нулевого слияния”. Я слышал варианты “нулевой оператор объединения” и “null оператор коалесцирования”. Но это не совсем то, последний вариант вообще ближе к химии, насколько я знаю.
Оператор нулевого слияния “??” является нововведением в ES2020, которое представляет собой укороченную оценку логического выражения, отдающее правый операнд в случае, если левый операнд является null или undefined, если же нет, то тогда он отдаст левый операнд.
Сейчас он находится на 4й стадии рассмотрения, что говорит о том, что он уже готов к внедрению в официальный ECMAScript стандарт.
\n\n\n\nОн работает в последних версиях Chrome и Firefox.
\n\n\n\nВот очень простой пример применения:
\n\n\n\nconst team = null ?? 'A team';\nconsole.log(team);\n//A teamКонечно же вы уже знаете другие логические операторы, сокращающие вычисления с обработкой типов данных, такие как “&&” и “||”. Эти операторы используются для обработки truthy и falsy значений. Но сначала, что есть false, а что есть true в JavaScript?
Falsy:
\n\n\n\nboolean false
\n\n\n\nnull value
\n\n\n\nundefined
\n\n\n\nNumber 0
\n\n\n\nNumber NaN
\n\n\n\nBigInt 0n
\n\n\n\nПустая строка “”
\n\n\n\nTruthy:
\n\n\n\nВсе значения, кроме предыдущих.
\n\n\n\nПроблема с && и || операторами в том, что они ориентируются только на truthy и falsy, что неизбежно приводит к багам. Эти операторы отлично работают с null и undefined значениями, но многие false значения могут привести к неожиданным результатам.
В этом примере я хочу, чтобы мы обработали объект, в котором мы выставим свойству enableAudio значение 0. И дальше мы выставим дефолтное значение 1, потому что нулевое значение интерпретируется как falsy.
const response = {\n enableAudio : 0\n}\nconst enableAudio = response.enableAudio || 1;\nenableAudio\n//1Nullish coalescing оператор ?? очень схож с оператором ||, кроме того факта, что он не использует truthy при принятии решения. Вместо этого он использует nullish, что говорит о том, что значение должно быть либо null, либо undefined.
В следующем примере переменная enableAudio имеет значение 0 и с оператором нулевого слияния ??, оно обрабатывается не как nullish значение. Следовательно, выражение отдаст левый операнд.
const response = {\n enableAudio : 0\n}\nconst enableAudio = response.enableAudio ?? 1;\nenableAudio\n//0С оператором ||, если бы первый операнд был бы truthy, то он бы отдал первый операнд. В другом случае он перешел бы ко второму. C Nullish Coalsing оператором, если первый оператор falsy, но не nullish, то отдастся false.
console.log(false || true);//true\nconsole.log(false ?? true);//falseВ следующем примере 0 воспринимается как falsy. Следовательно выражение отдаст второй операнд с оператором ||. Но с оператором Nullish Coalescing, ноль не считается null. Следовательно, выражение отдаст первое значение, то есть 0.
console.log(0 || 1); //1\nconsole.log(0 ?? 1); //0В следующем примере, если вы попробуете его с оператором ||, то результат, полученный вами будет вторым операндом, потому что пустая строка являет собой falsy значение. А вот если бы вы использовали Nullish Coalescing оператор, то пустая строка не считалась бы как null и следовательно выражение отдало бы первый операнд.
console.log('' || 'Hello!');//Hello \nconsole.log('' ?? 'Hello');//''В общем, оператор || обрабатывает значения как falsy и truthy, а опрератор ?? обрабатывает их как nullish. Это говорит о том, что с оператором ||, будет отдан второй операнд, если первый является undefined, null, 0, false, NaN или пустой строкой. А вот с оператором ??, второй операнд будет отдан только в том случае, если первый является null или undefined.
Есть очень большое количество багов, которые могут всплыть при использовании || оператора которые вы можете избежать, используя новый оператор nullish coalescing ??, а ещё с ним вы вы сможете предотвратить появление большого количества шаблонного кода для подобных проверок.
В этой статье вы узнаете как работать с Nullish Coalsing, а именно оператором нулевого слияния в JavaScript. И чем он отличается от логических операторов. Это первая из цикла статей про ES2020.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/12/DglYtvO7Bn0-9.jpg"}}},{"node":{"slug":"javascript-pochemu-3true4-i-drugie-hitrye-uravneniya-privedeniya-tipov","content":"\n3 + true === 4. Сейчас вы узнаете почему так происходит и ещё узнаете про 8 других интересных JavaScript уравнений.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2020/11/1_5cWyURkYJ3cGngd20lndfA.jpeg\")
Это может вас немного смутить, но вам надо делать так, как я напишу дальше. Вам придется открыть консоль разработчика в Chrome, нажав в Windows: Ctrl + Shift + J или в Mac Cmd + Option + J. Это даст вам возможность напечатать весь следующий код в браузере и вы сможете увидеть в реальном примере то, что происходит.
\n\n\n\nЯ не шучу. В JavaScript, когда оператор + находится между числом и булевым значением, последний конвертируется в число.
В этих случаях и false == 0. Учитывая это, 3 + true конвертируется в 3 + 1 и следовательно мы получаем ответ 4.
Это следует такой же логике как в примере выше. Когда оператор + размещен между двумя булевыми значениями, они конвертируются в числа. Следовательно, true + false конвертируется в 1 + 0 и в итоге мы получаем ответ 1.
Что случается когда мы добавляем число в строке к обычному числу? Когда оператор + находится между этими двумя операндами и один из них является строкой, это сконвертирует другое число или булево значение в строку и свяжет их.
Следуя этой логике, ‘4' + 8 становится '4' + '8' и мы получаем ответ '48'.
Так же как и в примере выше, JavaScript сконвертирует boolean в сточное значение и свяжет его. Это станет 'true' + '4' и результатом будет 'true4'.
Порядок операций очень важен. В этом примере, JavaScript считает первый + перед чем либо ещё, что ведет к 1 + 1 = 2. Далее мы добавляем строчной значение '1'. Происходит связывание и как результат мы получаем '21'.
Вот цепочка событий:
\n\n\n\n1 + 1 + '1'\n 2 + '1'\n '21'Что меняется, когда у нас есть строчное значение на первом месте? Помните о порядке операций и работайте слева на право.
\n\n\n\n'1' + 1 + 1\n '11' + 1\n '111'string + number = string В этом случае у нас останется только одна длинная строка '111'.
Что если мы попытаемся инвертировать в минус строку и затем добавить число? Как вы должны знать к этому моменту, без минуса, наш ответ был бы ‘6969’. Тем не менее минус все меняет.
Знак минус перед ’69’ это унарный оператор минуса, который на самом деле сконвертирует строку в число и сделает его отрицательным. Следовательно, наше уравнение станет -69 + 69, что будет равно 0.
Что если наш унарный оператор минуса будет перед строкой, которая не может быть сконвертирована в число? Когда JavaScript не может сделать число, мы остаемся только с NaN, что означает, то что это не число.
3 + true === 4. Сейчас вы узнаете почему так происходит и ещё узнаете про 8 других интересных JavaScript уравнений.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/11/DglYtvO7Bn0-8.jpg"}}},{"node":{"slug":"15-metodov-raboty-s-elementami-pro-kotorie-vy-ne-slyshaly-vozmozhno","content":"\nВ этой статье вы узнаете про 15 методов работы с элементами про которые вы возможно не слышали.
\n\n\n\n\n\n\n\nДавайте обсудим разницу между HTML и DOM.
\n\n\n\nСтарый добрый элемент <table> это HTML, что очевидно. Вы можете использовать его в файле с расширением .html. Он имеет набор атрибутов, которые влияют на вид и поведение страницы.
И это все, что можно о нем сказать. У него нет ничего общего с JavaScript.
\n\n\n\nDOM это то, что соединяет ваш JavaScript код с HTML элементами в документе, так что вы можете взаимодействовать с этими элементами, как с объектами.
\n\n\n\nЭто и есть объектная модель документа, то есть DOM.
\n\n\n\nКаждый тип элемента в HTML имеет свой собственный ‘интерфейс’, который определяет свойства (который обычно сопоставляются с атрибутами HTML элемента) и методы. Для примера, <table> имеет интерфейс под названием HTMLTableElement.
Вы можете сослаться на конкретный элемент, написав что-то типа того:
\n\n\n\nconst searchBox = document.getElementById('search-box');Далее у вас будет доступ ко всем свойствам и методам, которые доступны для этого типа элемента. Для примера, вы можете получить доступ к свойству value с помощью searchBox.value или направить курсор на поле поиска, вызвав searchBox.focus().
Спасибо за посещение моего 58-ми секундного курса DOM.
\n\n\n\nТак вот, тут дело в том, что большинство элементов не имеют каких-либо интересных методов, так что до того как вы отсеете спецификации для вещей, которые вы почти не будете использовать, легко пропустить незаметную важную деталь в поучившемся беспорядке.
\n\n\n\nНо к счастью для вас, рысканье по спецификациям и написание статей, это два моих любимых способа борьбы со злом. И так поехали.
\n\n\n\nЕсли вы хотите поиграться с кодом и у вас есть DevTools, то вы можете выбрать элемент в древе элементов, затем напечатать $0 в консоле. Это даст вам отсылку к элементу, который вы выбрали. Чтобы увидеть элемент, как объект, введите dir($0).
Вообще вы можете много всего сделать в консоли.
\n\n\n\nСкромная таблица имеет довольно много полезных методов, которые сделают процесс сбора и формирования таблицы настолько же простым, как и сборка стола из Икеи.
\n\n\n\nВот несколько из них.
\n\n\n\nconst tableEl = document.querySelector('table');\n\nconst headerRow = tableEl.createTHead().insertRow();\nheaderRow.insertCell().textContent = 'Make';\nheaderRow.insertCell().textContent = 'Model';\nheaderRow.insertCell().textContent = 'Color';\n\nconst newRow = tableEl.insertRow();\nnewRow.insertCell().textContent = 'Yes';\nnewRow.insertCell().textContent = 'No';\nnewRow.insertCell().textContent = 'Thank you';Ни единого document.createElement().
.insertRow() метод даже вставит <tbody> для вас, если вы вызовите его прямо на табличном элементе. Не отлично ли это?
Вы знаете, что когда у вас есть #something в ссылке и когда страница загружается, браузер проскролит страницу, так что вы сможете увидеть элемент с этим ID?
Это всё очень хорошо, но это не работает, если вы рендерите этот элемент после загрузки страницы. Вы можете вручную воспроизвести это поведение, с помощью:
\n\n\n\ndocument.querySelector(document.location.hash).scrollIntoView();\nОк, это не метод, но если вы поспорите, то я возражу в ответ тем, что это между прочим это скорее сеттер и выходит, что это действительно метод, правильно?
\n\n\n\nВ любом случае, вы когда нибудь делали myElement.style.display = \"none\", для того, чтобы спрятать элемент? Отлично, прекратите так делать.
Вы можете просто сделать так myElement.hidden = true.
Ок, это не совсем метод элемента, а скорее метод для свойства элемента. А точнее, это метод для переключения добавления/удаления класса с элемента с помощью myElement.classList.toggle(\"some-class\")
И если вы когда-либо добавляли класс с условным объявлением if, то это преступление — не иначе.
Вам нужно просто передать второй параметр методу toggle. И когда дойдет до дела, ваш класс будет добавлен элементу.
el.classList.toggle('some-orange-class', theme === 'orange');\nЯ знаю, что вы думаете, то что это не совсем то, что означает понятие “переключать” — и хорошие люди на Internet Explorer согласятся и будут протестовать, не применяя логику второго параметра вообще.
\n\n\n\nВ общем, я беру свои слова назад, это не преступление. Выбор за вами.
\n\n\n\nОк, этот вы точно уже знаете, но я подозреваю, что именно 17% из вас не знали, что вы можете использовать его на любом элементе.
\n\n\n\nДля примера, myElement.querySelector(\".my-class\") выберет только элементы, которые имеют класс my-class и они являются потомками myElement.
Это метод доступный на всех элементах, которые идут выше в древе элементов. Это как реверс querySelector(). Итак, я бы мог выбрать заголовок данной секции в таком исполнении:
myElement.closest(\"article\").querySelector(\"h1\");\nВверх до первого <article> и затем назад вниз к первому заголовку <h1>.
Этот метод возвращает аккуратный маленький объект с некоторыми деталями, а точнее пространственными деталями элемента, который вы вызываете.
\n\n\n\n{\n x: 604.875,\n y: 1312,\n width: 701.625,\n height: 31,\n top: 1312,\n right: 1306.5,\n bottom: 1343,\n left: 604.875\n}Будьте аккуратны в двух случаях:
\n\n\n\nЕго вызов влечет собой перерисовку. В зависимости от устройства и сложности страницы, это может занять несколько миллисекунд. Так что следите за этим, если вы вызываете его повторно, в частности в анимации.
\n\n\n\nНе все браузеры возвращают эти значения. Потому что с чего бы это вдруг?
\n\n\n\nСкажем, что я хочу проверить, есть ли у конкретного элемента конкретный класс.
\n\n\n\nМаксимум сложности:
\n\n\n\nif (myElement.className.indexOf('some-class') > -1) {\n // do something\n}Уже лучше, но ничего пока особо не поменялось:
\n\n\n\nif (myElement.className.includes('some-class')) {\n // do something\n}Лучше всего:
\n\n\n\nif (myElement.matches('.some-class')) {\n // do something\n}Этот я выучил только сегодня! Он как appendChild(), но даёт больше контроля, когда вы дополняете элемент потомком.
parentEl.insertAdjacentElement(\"beforeend\", newEl) это буквально тоже самое, что и parentEl.appendChild(newEl), но вы также можете указать beforebegin, afterbegin или afterend, чтобы вставить элемент в место, которое оно предполагает по названию.
Какой контроль!
\n\n\n\nНадо ли вам было знать, есть ли какой элемент внутри другого элемента? Конечно же это всегда очень сильно нужно.
\n\n\n\nДля примера, если я работаю с кликом мышки и хочу знать, случилось ли это внутри модалки или вне её, то я могу сделать так:
\n\n\n\nconst handleClick = e => {\n if (!modalEl.contains(e.target)) modalEl.hidden = true;\n};Где modalEl это сам подал, а e.target будет любым элементом на который кликнули.
Забавный факт, 100% времени, что я делаю это, у меня получается противоположно неверная логика при первой попытке.
\n\n\n\nДаже если я стану умнее и переключусь на другой способ перед кликом на save, я всё равно сделаю это неправильно.
\n\n\n\nБез сомнений это самый бесполезный из всех методов элемента, кроме одного конкретного случая.
\n\n\n\nПомните, когда я упоминал выше, что свойства обычно сопоставляются атрибутам?
\n\n\n\nОдин из примеров, когда это не так — происходит с атрибутом href, такого элемента как <a href=\"/animals/cat\">Cat</a>.
el.href не вернет /animals/cat, как вы уже могли предположить. Так происходит из-за того, что элемент <a> выполняет HTMLHyperlinkElementUtils интерфейс, который имеет группу вспомогательных свойств, таких как protocol и hash, которые говорят вам о том куда ведет ссылка.
Одно из таких вспомогательных свойств это href, которое выдаст вам полный URL, со всеми штуками, которые не относятся к атрибуту URL.
Так что вам надо будет использовать el.getAttribute(\"href\"), если вам нужна конкретная строка из атрибута href.
У сравнительно нового элемента <dialog> есть два нормальных метода и один ну просто восхитительный. show() и close() сделают именно то, что вы ожидаете от них.
Но showModal() покажет <dialog> выше всего, отцентрованным на странице, как вы и хотите, чтобы показывались ваши формы. Нет нужды в z-index или ручного добавления затемняющего фона, или отслеживания кнопки esc, чтобы его закрыть, браузер знает, как работают формы и сделает это все за вас.
И это просто отлично.
\n\n\n\nИногда, когда вы ссылаетесь на список элементов, вы можете пройтись по всем ним с помощью forEach().
for() циклы стали такими винтажными.
Скажем так, вам нужно выгрузить URL для всех ссылок на странице. Вы бы могли сделать так, если бы захотели увидеть ошибку.
\n\n\n\ndocument.getElementsByTagName('a').forEach(el => {\n console.log(el.href);\n});Или вы бы могли сделать так:
\n\n\n\ndocument.querySelectorAll('a').forEach(el => {\n console.log(el.href);\n});Так произойдет, потому что getElementsByTagName и другие получают от методов HTMLCollection, а querySelectorAll отдаст NodeList.
И это интерфейс NodeList, который дает нам метод forEach(), вместе с keys(), value() и entries().
На самом деле было бы хорошо, если бы все просто возвращали массивы, вместо того, чтобы вы отдавать что-то фантастическое, не совсем похожее на них. Но не пугайтесь, потому что хороший парень из ECMA дал нам Array.from(), который превращает любой “около массив” в массив. И это работает:
Array.from(document.getElementsByTagName('a')).forEach(el => {\n console.log(el.href);\n});Array.from(document.querySelectorAll('a'))\n .map(el => el.origin)\n .filter(origin => origin !== document.origin)\n .filter(Boolean);У <form>, как вы уже наверное знаете, есть метод submit(). Возможно вы также знаете, что у форм есть метод reset() и они могут reportValidity(), если вы используете валидацию на ваших элементах формы.
Вы также можете использовать свойства элементов формы с точечным обозначением для отсылки к элементу по его имени атрибута. Для примера, myFormEl.elements.email вернул бы элемент <input name=\"email\" />, который принадлежит <form>.
Я обманул вас. elements не возвращает список элементов вообще. Он возвращается список контролов и конечно же это не массив, потому что с чего бы это вообще ему им быть.
Пример: если у вас есть три радио кнопки, каждая с одинаковым именем\n\n\n\nanimal, тоformEl.elements.animalбудет выбирать сбор радио кнопок (1 контрол, 3 элемента).
И formEl.elements.animal.value вернет значение любой выбранной кнопки.
Это странный синтаксис, если вы уже подумали об этом. Давайте разберем его: formEl это элемент, elements это HTMLFormControlsCollection, не реальный массив в котором каждый элемент не обязательно является HTML элементом. animal это набор нескольких радио кнопок, совмещенных только потому что у них есть один и тот же атрибут name (есть RadioNodeList интерфейс именно для этой цели) и value, которое смотрит за value атрибутом, какая бы радио кнопка не была выбрана.
Мне возможно нужно было заранее сказать, так как последний не такой уж и интересный. В любом случае, .select() метод выберет весь текст в любом инпуте, в котором бы вы его не вызвали.
В этой статье вы узнаете про 15 методов работы с элементами про которые вы возможно не слышали.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/10/DglYtvO7Bn0-6.jpg"}}},{"node":{"slug":"luchshie-sovety-i-ulovki-javascript","content":"\nПо факту эти техники сохранят вам кучу времени.
\n\n\n\nВозможно большинство из них вам уже знакомо, возможно некоторые нет. Но в любом случае, они будут вам крайне полезны.
\n\n\n\nЭто переводы трех статей, которые действительно помогут вам писать лучше, быстрее и продуктивнее.
\n\n\n\n\n\n\n\nВот простой способ очистки или сокращения массива его переназначения. Вы можете просто поменять его length свойство:
const arr = [11, 22, 33, 44, 55, 66];\n // Сокращение\narr.length = 3;\nconsole.log(arr); //=> [11, 22, 33]\n // Очистка\narr.length = 0;\nconsole.log(arr); //=> []\nconsole.log(arr[2]); //=> undefinedВелик шанс того, что вы уже используете конфигурацию объектов, когда вам надо передать переменный набор аргументов для функции, например как тут:
\n\n\n\ndoSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });\nfunction doSomething(config) { \n const foo = config.foo !== undefined ? config.foo : 'Hi'; \n const bar = config.bar !== undefined ? config.bar : 'Yo!'; \n const baz = config.baz !== undefined ? config.baz : 13; // ...}Это старый, но эффективный паттерн, который пытается имитировать именованные параметры в JavaScript. Вызов функции выглядит хорошо. С другой стороны, объект конфигурация содержит логику, которая занимает ну уж слишком много писанины. А вот помощью ES2015 деструктуризации, вы можете обойти этот недостаток:
\n\n\n\nfunction doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) { // ...}\nИ если вам нужно сделать конфиг объекта опциональным, но это тоже очень просто:\nfunction doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) { // ...}Назначайте элементы массива индивидуальным переменным с помощью деструктуризации объектов:
\n\n\n\nconst csvFileLine = '1997,John Doe,US,john@doe.com,New York';\nconst { 2: country, 4: state } = csvFileLine.split(',');Да, есть возможно обождать множественную асинхронную функцию, используя Promise.all:
await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])\nВы можете создать 100% пустой объект, который не будет наследовать какие-либо свойства или методы из изначального объекта (например, constructor, toString() и так далее).
const pureObject = Object.create(null);\nconsole.log(pureObject); //=> {}\nconsole.log(pureObject.constructor); //=> undefined\nconsole.log(pureObject.toString); //=> undefined\nconsole.log(pureObject.hasOwnProperty); //=> undefined\nJSON.stringify может не просто конвертировать объект в строку. А так же может сделать красивую выдачу JSON:
const obj = {\nfoo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: ‘Hello’ } }\n};\n// Третий параметр это чисто пробелов, используемое для украшения JSON вывода\nJSON.stringify(obj, null, 4);\n// =>”{\n// => “foo”: {\n// => “bar”: [\n// => 11,\n// => 22,\n// => 33,\n// => 44\n// => ],\n// => “baz”: {\n// => “bing”: true,\n// => “boom”: “Hello”\n// => }\n// => }\n// =>}”Используя сеты ES2015 вместе с оператором расширения, вы легко можете удалить дублирующиеся элементы из массива:
\n\n\n\nconst removeDuplicateItems = arr => […new Set(arr)];\nremoveDuplicateItems([42, 'foo', 42, 'foo', true, true]);\n//=> [42, \"foo\", true]Вообще слияние многоуровневых массивов довольно тривиально с помощью оператора расширения:
\n\n\n\nconst arr = [11, [22, 33], [44, 55], 66];\nconst flatArr = [].concat(…arr); //=> [11, 22, 33, 44, 55, 66]К сожалению, трюк выше сработает только на двухуровневых массивах. Но с рекурсивными запросами, мы можем применить это для массивов с более чем двумя уровнями:
\n\n\n\nfunction flattenArray(arr) {\n const flattened = [].concat(...arr);\n return flattened.some(item => Array.isArray(item)) ? flattenArray(flattened) : flattened\n;}\nconst arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];\nconst flatArr = flattenArray(arr);\n//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]Используйте деструктуризацию массивов для перетасовки переменных. Тут все будет понятно из кода:
\n\n\n\nlet a = 'world', b = 'hello'\n[a, b] = [b, a]\nconsole.log(a) // -> hello\nconsole.log(b) // -> world\n// Да, это магия, детка!И снова, деструктуризация массивов просто шедевральна. Вместе с async/await она делает невообразимые вещи.
const [user, account] = await Promise.all([\n fetch('/user'),\n fetch('/account')\n])Для всех кто любит дебаггинг с помощью console.log, вот вам крутой пример и да, я слышал про console.table:
const a = 5, b = 6, c = 7\nconsole.log({ a, b, c })\n// выдаёт объект:\n// {\n// a: 5,\n// b: 6,\n// c: 7\n// }Синтаксис может быть гораздо компактнее для операций с массивами.
\n\n\n\n// Найти максимальное значение\nconst max = (arr) => Math.max(…arr);\nmax([123, 321, 32]) // вывод: 321\n// Сумма массива\nconst sum = (arr) => arr.reduce((a, b) => (a + b), 0)\nsum([1, 2, 3, 4]) // вывод: 10Вообще оператор расширения может использоваться вместо concat:
const one = ['a', 'b', 'c']\nconst two = ['d', 'e', 'f']\nconst three = ['g', 'h', 'i']\n// старый способ #1\nconst result = one.concat(two, three)\n// старый способ #2\nconst result = [].concat(one, two, three)\n// новый\nconst result = [...one, ...two, ...three]Клонирование массивов и объектов с легкостью:
\n\n\n\nconst obj = { …oldObj }\nconst arr = [ …oldArr ]Создание функции и ее вызов можно сделать более читабельным с помощью деструктуризации:
\n\n\n\nconst getStuffNotBad = (id, force, verbose) => {\n ...do stuff\n}\nconst getStuffAwesome = ({ id, name, force, verbose }) => {\n ...do stuff\n}\n// Где то там в коде, что такое вообще true, true и к чему оно?\ngetStuffNotBad(150, true, true)\n// А вот уже по другому... I ❤ JS!!!\ngetStuffAwesome({ id: 150, force: true, verbose: true })И третья, бонусная статья аж 2013-го года. Все эти практики уже давно знакомы, но все же самые интересные из них не помешает закрепить.
\n\n\n\n\n\n\n\nЯ реально не люблю блоки if/else и это довольно полезный трюк для вызова нужной функции, основываясь на булиных значениях.
// Скукота\nif (success) {\n obj.start();\n} else {\n obj.stop();\n}\n\n// По-хипстерски\nvar method = (success ? 'start' : 'stop');\nobj[method]();Известный факт, что строки подобны другим строкам. И рано или поздно вы бы захотели связать две или более из них. Мне действительно не нравится работа с плюсом, по-этому join() приходит на помощь.
['first', 'name'].join(' '); // = 'first name';\n\n['milk', 'coffee', 'sugar'].join(', '); // = 'milk, coffee, sugar'JavaScript сам по себе не знает, что содержит объект. Иногда вы получаете его как аргумент функции, в другой раз вы можете прочесть его из сети или из файла конфигурации. В любом случае, вы можете использовать || оператор, чтобы использовать второй аргумент, если первый выдает false.
// Ставим по дефолту 'No name' когда myName пуст (или null, или undefined)\nvar name = myName || 'No name';\n\n\n// Убеждаемся, есть ли у нас объект options\nvar doStuff = function(options) {\n options = options || {};\n // ...\n};Схожий с дефолтным оператором, этот оператор супер полезен. Он исключает буквально все if запросы и делает код куда лучше.
// Скучно\nif (isThisAwesome) {\n alert('yes'); // нет\n}\n\n// Отлично\nisThisAwesome && alert('yes');\n\n// Ещё один крутой подход\nvar aCoolFunction = undefined;\naCoolFunction && aCoolFunction(); // не запустится и не закрэшитсяПо факту эти техники сохранят вам кучуко времени. Возможно большинство из них вам уже знакомо, возможно некоторые нет. Но в любом случае, они будут вам крайне полезны.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/10/DglYtvO7Bn0-5.jpg"}}},{"node":{"slug":"interesnie-novovvedeniya-v-javascript-es2021","content":"\nВ этой статье вы узнаете про интересные нововведения в JavaScript, которые ожидают нас в 2021 году. Не все конечно, но тут собраны и описаны самые интересные из них.
\n\n\n\n\n\n\n\nКаждый год в JavaScript добавляется новый функционал. В этом году был зарелизен ES2020 или ES11, теперь мы ожидаем релиза ES2021(ES12), который намечается на середину 2021-го года.
\n\n\n\nНовый функционал, каждый год добавляемый в JS, проходит через четыре стадии рассмотрения. В этой статье мы обсудим тот функционал, который уже находится на 4-й стадии, то есть на последней и который уже был успешно добавлен в Google Chrome V8.
\n\n\n\nФункционал, который мы будем обсуждать в этой статье:
\n\n\n\nString.prototype.replaceAll
Promise.any
Логические операторы и выражения присваивания
\n\n\n\nЧисловые разделители
\n\n\n\nIntl.ListFormat
dateStyle и timeStyle для Intl.DateTimeFormat
В JavaScript метод replace() заменяет только первый совпадающий элемент в строке. Если нам понадобится заменить все совпадения, то мы сможем сделать только только с помощью регулярных выражений.
Предложенный в ES2020 метод replaceAll() отдаёт новую строку, где все подходящие символы будут заменены на другие. Это могут быть строки или регулярные выражения, а заменять можно будет на строку или функцию, которая будет отрабатывать при каждом совпадении.
let str = 'I use linux, I love linux'\nstr = str.replaceAll('linux', 'windows');\n\nconsole.log(str)\n\n/**** Output ****/\n// I use windows, I love windowsВ ES2020 нам представят метод Promise.any(), который резко останавливается и сразу отдаёт значение, как только выполнится первый промис из списка выполняемых промисов. Если выполнение всех промисов закончится неудачей, то будет выдана ошибка.
Этот метод конечно же отличается от Promise.race() тем, что последний останавливается и выдает промис вне зависимости от результата его выполнения.
Пример 1а: Несмотря на то, что неудачно завершившийся промис заканчивает работу раньше, чем успешно завершившийся. Promise.any() отдаст первый из успешно завершившихся.
Promise.any([\n new Promise((resolve, reject) => setTimeout(reject, 200, 'Third')),\n new Promise((resolve, reject) => setTimeout(resolve, 1000, 'Second')),\n new Promise((resolve, reject) => setTimeout(resolve, 2000, 'First')),\n])\n.then(value => console.log(`Result: ${value}`))\n.catch (err => console.log(err))\n\n/**** Output ****/\n// Result: SecondПример 1б: Когда все промисы неудачно завершаются, то выдает AggregatorError.
\n\n\n\nPromise.any([\n Promise.reject('Error 1'),\n Promise.reject('Error 2'),\n Promise.reject('Error 3')\n])\n.then(value => console.log(`Result: ${value}`))\n.catch (err => console.log(err))\n\n/**** Output ****/\n// AggregateError: All promises were rejected\nВ JavaScript существует много выражений присваивания и логических операторов, например как тут:
\n\n\n\n// Выражение присвивания\nlet num = 5\nnum+=10\nconsole.log(num) // 15\n\n// Логический оператор\nlet num1 = 6\nlet num2 = 3\nconsole.log(num1 === 6 && num2 === 2) // false\nconsole.log(num1 === 6 || num2 === 2) // trueС помощью нового функционала мы сможем комбинировать логические операторы и выражения присваивания. Ниже вы увидите несколько примеров с &&, || и ??:
Тут мы выставляем значение левосторонней переменной только в том случае, если правая имеет значение true.
let num1 = 5\nlet num2 = 10\n\nnum1 &&= num2\n\nconsole.log(num1) // 10\n\n// можно записать как\n// 1. num1 && (num1 = num2)\n// 2. if (num1) num1 = num2Тут мы выставляем значение num1 на левую переменную только в том случае, если последняя будет false.
let num1\nlet num2 = 10\n\nnum1 ||= num2\n\nconsole.log(num1) // 10\n\n// можно записать как\n// 1. num1 || (num1 = num2)\n// 2. if (!num1) num1 = num2В ES2020 был представлен Nullish Coalescing оператор, который можно совмещать с оператором назначения. Он назначает правую переменную левой переменной только в случае, если последняя имеет значение undefined или null.
let num1\nlet num2 = 10\n\nnum1 ??= num2\nconsole.log(num1) // 10\n\nnum1 = false\nnum1 ??= num2\nconsole.log(num1) // false\n\n// можно записать как\n// num1 ?? (num1 = num2)С приходом числовых разделителей станет куда проще читать и воспринимать числовые значения, применяя _(нижнее подчеркивание), раздавая разделители группам цифр. Для примера:
let number = 100_000 \n\nconsole.log(number)\n\n/**** Output ****/\n// 100000Этот объект принимает два параметра, каждый из которых является опциональным. Первый это заданный язык(локаль), а второй это объект с параметрами у которых есть два свойства — стиль и тип.
\n\n\n\nnew Intl.ListFormat([locales[, options]])
В Intl.ListFormat есть метод под названием format(), который получает массив как аргумент и форматирует его разными способами в зависимости от языка.
Ниже есть несколько примеров в которых показаны различные комбинации для локалей.
\n\n\n\nconst arr = ['Pen', 'Pencil', 'Paper']\n\nlet obj = new Intl.ListFormat('en', { style: 'short', type: 'conjunction' })\nconsole.log(obj.format(arr)) \n\n/**** Output ****/\n// Pen, Pencil, & Paper\n\n\nobj = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })\nconsole.log(obj.format(arr)) \n\n/**** Output ****/\n// Pen, Pencil, and Paper\n\n\nobj = new Intl.ListFormat('en', { style: 'narrow', type: 'conjunction' })\nconsole.log(obj.format(arr)) \n\n/**** Output ****/\n// Pen, Pencil, Paper\n\n\n// Итальянский\nobj = new Intl.ListFormat('it', { style: 'short', type: 'conjunction' })\nconsole.log(obj.format(arr)) \n\n/**** Output ****/\n// Pen, Pencil e Paper\n\n\n// Немецкий\nobj = new Intl.ListFormat('de', { style: 'long', type: 'conjunction' })\nconsole.log(obj.format(arr)) \n\n/**** Output ****/\n// Pen, Pencil und PaperIntl.DateTimeFormat это объект конструктор для объектов, которые включают в себя формат даты и отображения времени зависимые от используемого языка. dateStyle и timeStyle опции могут быть использованы для запроса специфического отображения даты или времени в заданной длине.
// Только время в коротком формате\nlet o = new Intl.DateTimeFormat('en' , { timeStyle: 'short' })\nconsole.log(o.format(Date.now()))\n// 11:27 PM\n\n\n// Только время в обычном формате\no = new Intl.DateTimeFormat('en' , { timeStyle: 'medium'})\nconsole.log(o.format(Date.now()))\n// 11:27:57 PM\n\n\n// Время в расширенном формате\no = new Intl.DateTimeFormat('en' , { timeStyle: 'long' })\nconsole.log(o.format(Date.now()))\n// 11:27:57 PM GMT+11\n\n\n// Только дата в сокращенном формате\no = new Intl.DateTimeFormat('en' , { dateStyle: 'short'})\nconsole.log(o.format(Date.now()))\n// 10/6/20\n\n\n// Только дата в обычном формате\no = new Intl.DateTimeFormat('en' , { dateStyle: 'medium'})\nconsole.log(o.format(Date.now()))\n// Oct 6, 2020\n\n\n// Только дата в расширенном формате\no = new Intl.DateTimeFormat('en' , { dateStyle: 'long'})\nconsole.log(o.format(Date.now()))\n// October 6, 2020dateStyle и timeStyle используются вместе с разными лингвистическими тегами, как показано на примере ниже:
let abc\n\n// Английский\nabc = new Intl.DateTimeFormat('en' , { timeStyle: 'short', dateStyle: 'long'})\nconsole.log(abc.format(Date.now()))\n// October 6, 2020 at 11:40 PM\n\n\n// Итальянский\nabc = new Intl.DateTimeFormat('it' , { timeStyle: 'short', dateStyle: 'long'})\nconsole.log(abc.format(Date.now()))\n// 6 ottobre 2020 23:40\n\n\n// Немецкий\nabc = new Intl.DateTimeFormat('de' , { timeStyle: 'short', dateStyle: 'long'})\nconsole.log(abc.format(Date.now()))\n// 6. Oktober 2020 um 23:40В этой статье вы узнаете про интересные нововведения в JavaScript, которые ожидают нас в 2021 году. Не все конечно, но в этой тут собраны и описаны самые интересные из них.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/10/DglYtvO7Bn0-2.jpg"}}},{"node":{"slug":"13-interesnih-momentov-po-stilizacii-koda-ot-google","content":"\nДля тех кто еще не в курсе, Google выложил стилевое руководство по написанию JavaScript, которое излагает лучшие стилистические практики по написанию ясного и понимаемого кода.
\n\n\n\n\n\n\n\nТам нет строгих правил для написания валидного JavaScript, а есть только советы для написания последовательного и привлекательного кода для всех ваших проектов. Особенно это интересно для JavaScript, который сам по себе гибкий и довольно многообразный язык, позволяющий использовать широкий выбор стилизации кода.
\n\n\n\nУ Google и Airbnb есть два самых популярных стилевых руководства по этой теме. Я определенно советую вам ознакомится с обоими, если вы проводите много времени с JavaScript.
\n\n\n\nДалее в статье будут тринадцать самых интересных замечаний и релевантных правил из Google JS Style Guide.
\n\n\n\nОни покрывают весь спектр работы с кодом, от спорных вопросов до неясных спецификакций, которые удивили даже меня. Конечно же, они изменят суть того, как я буду писать JavaScript в будущем.
\n\n\n\nДля каждого правила я дам краткое изложение по спецификации, подкрепленное цитатой из стилевого руководства, которое описывает правило в деталях. Где это будет возможно, я покажу пример стиля на практике и сопоставлю его с кодом, который не подходит этому правилу.
\n\n\n\n\n\n\n\nКроме символа разграничителя строки, ASCII символ горизонтального пробела (0х20) — единственный символ пробела/разграничителя, который появляется где-либо в исходном файле. Это подразумевает то, что Tab символы не используются для отступов.
// плохо\nfunction foo() {\n∙∙∙∙let name;\n}\n\n// плохо\nfunction bar() {\n∙let name;\n}\n\n// хорошо\nfunction baz() {\n∙∙let name;\n}\n\n\n\nКаждое объявление должно заканчиваться на точку с запятой.
Запрещается полагаться на автоматическую вставку этих символов.
Хоть я и не могу представить, почему кто-то против этой идеи, но использование точек с запятыми в JS становится новыми дебатами масштаба ‘spaces versus tabs’.
\n\n\n\nGoogle твердо обозначил свою позицию в защиту использования точки с запятой.
\n\n\n\n// плохо\nlet luke = {}\nlet leia = {}\n[luke, leia].forEach(jedi => jedi.father = 'vader')\n\n// хорошо\nlet luke = {};\nlet leia = {};\n[luke, leia].forEach((jedi) => {\n jedi.father = 'vader';\n});\n\n\n\nНе применяйте модули из ES6, пока что (т.е. слова export и import), так как их семантика пока не не финализирована. Обратите внимание, что это правило будет пересмотрено, после того, как семантика станет полным стандартом.
// Не делайте пока что такие вещи:\n// — — — lib.js — — —\nexport function square(x) {\n return x * x\n}\nexport function diag(x, y) {\nreturn sqrt(square(x) + square(y));\n}\n//------ main.js ------\nimport { square, diag } from 'lib';\n\n\n\nЭта практика допустима, но в основном это считается дурным тоном следуя стилю от Google. Не нужно даже продолжать использовать горизонтальные выравнивания в местах, где это уже использовалось.
Горизонтальное выравнивание это практика добавления большого количества пробелов в ваш код, чтобы определенные символы появлялись прямо под другими символами на предыдущей строке.
\n\n\n\n// плохо\n{\n tiny: 42, \n longer: 435, \n };\n // хорошо\n {\n tiny: 42, \n longer: 435,\n };\n\n\n\nОбъявляйте все локальные переменные с помощью const или let. Используйте const по дефолту, пока переменную не надо будет переназначить. Слово var не должно использоваться.
Я до сих пор вижу людей, которые используют слово var в примерах кода. Не могу сказать, есть ли для этого веские причины или это просто дело долгоумерающей привычки.
// плохо\nvar example = 42;\n// хорошо\nlet example = 42;\n\n\n\nСтрелочные функции дают краткий синтаксис и решают много сложностей с ним. Предпочитайте стрелочные функции вместо слова function, особенно во вложенных функциях.
Буду честен, я просто думал, что стрелочные функции это отлично, потому что они короче и вообще лучше выглядят. Но оказывается, что у них довольно важное предназначение в плане упрощения написания кода.
\n\n\n\n// плохо\n[1, 2, 3].map(function (x) {\n const y = x + 1;\n return x * y;\n});\n\n// хорошо\n[1, 2, 3].map((x) => {\n const y = x + 1;\n return x * y;\n});\n\n\n\nИспользуйте шаблонные строки, обозначемые с помощью `, вместо сложного объединнения строк, особенно если есть несколько строчных литералов. К тому же, они могут быть в несколько строк.
// плохо\nfunction sayHi(name) {\n return 'How are you, ' + name + '?';\n}\n\n// плохо\nfunction sayHi(name) {\n return ['How are you, ', name, '?'].join();\n}\n\n// плохо\nfunction sayHi(name) {\n return `How are you, ${ name }?`;\n}\n\n// хорошо\nfunction sayHi(name) {\n return `How are you, ${name}?`;\n}\n\n\n\nНе применяйте line continuations как в обычных строках, так и в шаблонных строках. Пусть даже ES5 позволяет делать это, такой подход может привести с неловким ошибкам, если какой-нибудь пробел будет после слеша и это менее очевидно для читателей.
Интересен тот момент, что это правило по которому мнения Google и Airbnb расходятся. Вот пример Airbnb.
\n\n\n\nВ то время, как Google рекомендует связывать длинные строки, как показано ниже, руководство от Airbnb советует буквально ничего не делать и допускать длинным строкам тянуться сколько хотят.
\n\n\n\n// Плохо (Извините, это не показывается как надо на мобильных)\nconst longString = 'This is a very long string that \\\n far exceeds the 80 column limit. It unfortunately \\\n contains long stretches of spaces due to how the \\\n continued lines are indented.';\n// Хорошо\nconst longString = 'This is a very long string that ' + \n 'far exceeds the 80 column limit. It does not contain ' + \n 'long stretches of spaces since the concatenated ' +\n 'strings are cleaner.';\n\n\n\nВ ES6, у языка теперь три разных типа циклов for. Их все можно использовать, хотя for-of циклы должны быть предпочтительнее, если возможно.
Это странно, если вы спросите меня, но я думаю это надо упомянуть, так как довольно интересно, что Google объявил предпочтительный тип цикла loop.
\n\n\n\nЯ был всегда впечатлен тем, что for…in циклы были лучше для объектов, в то время как for…of были лучше для массивов. В общем правильный инструмент для подходящей ситуации.
Пока спецификация Google не противоречит этой идее, до сих пор интересно узнать, почему они сделали предпочтение в сторону этого цикла.
\n\n\n\n\n\n\n\nНе используйте eval или Function(…string) конструктор, кроме кодлоадеров. Этот функционал потенциально опасен и просто не работает в CSP среде.
На страничке eval() в MDN, даже есть секция под названием “Не используйте eval!”
// плохо\nlet obj = { a: 20, b: 30 };\nlet propName = getPropName(); // returns \"a\" or \"b\"\neval( 'var result = obj.' + propName );\n\n// хорошо\nlet obj = { a: 20, b: 30 };\nlet propName = getPropName(); // returns \"a\" or \"b\"\nlet result = obj[ propName ]; // obj[ \"a\" ] is the same as obj.a\n\n\n\nЕсли вы уверены в том, что какие-либо переменные не должны меняться, вы можете указать это написав имя переменной с большой буквы. Это сделает неизменность константы очевидной, как только она начнет использоваться по всему коду.
НО есть примечательное исключение для этого случая, это константы в функциях. Тут они должны писаться камелКейсом или по-русски горбатым регистром.
\n\n\n\n// Плохо\nconst number = 5;\n// Хорошо\nconst NUMBER = 5;\n\n\n\nКаждая локальная переменная объявляет только одну переменную: такие объявления как let a = 1, b =2 не используются.
// bad\nlet a = 1, b = 2, c = 3;\n// good\nlet a = 1;\nlet b = 2;\nlet c = 3;\n\n\n\nОбычные строчные литералы заключаются в одинарные кавычки, а не в двойные.
Совет: если строка содержит один символ цитирования, то рассмотрите использование шаблонных строк во избежании выхода из области цитаты.
\n\n\n\n// плохо\nlet directive = \"No identification of self or mission.\"\n// плохо\nlet saying = \n'Say it ain\\u0027t so.';\n// хорошо\nlet directive = 'No identification of self or mission.';\n// хорошо\nlet saying = `Say it ain't so`;Как я и сказал вначале, это не строгие правила. Google это просто один из технологических гигантов и это просто рекомендации.
\n\n\n\nИнтересно посмотреть на стиль рекомендаций, которые выкладывают компании, такие как Google, которые нанимают множество блестящих людей, которые тратят непомерно много времени на написание отличного кода.
\n\n\n\nВы можете следовать этим правилам, если хотите. Но всегда будут недовольные и вы спокойно можете пренебречь некоторыми или вообще всеми из этих правил.
\n\n\n\nЯ лично считаю, что есть несколько случаев, в которых спецификации Airbnb более подходящи, чем от Google. Не важно какую позицию вы занимаете по этим конкретным правилам, все ещё важно соблюдать стилистическую последовательность при написании любого кода.
\n","date":"2020-08-17T14:14:10.000Z","title":"13 интересных моментов по стилизации JavaScript кода от Google","id":"9624dab4-aa17-5129-835c-f320b0ba8e95","excerpt":"Для тех кто еще не в курсе, Google выложил стилевое руководство по написанию JavaScript, которое излагает лучшие стилистические практики по написанию ясного и понимаего кода.
\n","type":"js","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/08/DglYtvO7Bn0.jpg"}}}]},"allWordpressWpHtmlCss":{"edges":[{"node":{"slug":"standarty-napisaniya-gibkogo-nadezhnogo-i-zhiznesposobnogo-html-s-css","content":"\nВообще, эта статья является неким руководством по написанию грамотного HTML и CSS. Но явно не полноценным руководством сводом правил или БЭМ, который, кстати, является очень спорным моментом в мире фронт-энда. Но об этом потом.
\n\n\n\nТо, что вы прочитаете, скорее является сводом правил хорошего тона при вёрстке, которые сведут на минимум проблемы с пониманием и рендерингом вашей работы.
\n\n\n\n\n\n\n\nИспользуйте двойные пробелы — это единственный способ, который будет гарантировать то, что ваш код покажется и отрендерится одинаковым образом в любой среде разработки.
\n\n\n\nВложенные элементы должны иметь только одинарный отступ, то есть двойным пробелом.
\n\n\n\nНа атрибутах всегда используйте двойные кавычки, а не одинарные.
\n\n\n\nНе включайте закрывающий слеш в самозкрывающиеся элементы — HTML5 спецификация указывает на то, что они вообще опциональны, но мы то знаем.
\n\n\n\nНи в коем случае не пропускайте закрывающие теги (такие как </li> или </body>).
<!DOCTYPE html>\n<html>\n <head>\n <title>Заголовок страницы</title>\n </head>\n <body>\n <img src=\"images/company-logo.png\" alt=\"Company\">\n <h1 class=\"hello-world\">Привет, братиш!</h1>\n </body>\n</html>Чтобы работать в режиме стандартов и последовательного рендеринга элементов в каждом доступном браузере — добавляйте этот простой доктайп в начале каждой HTML страницы. Вообще, всегда старайтесь помнить про стандарты.
\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n </head>\n</html>Вырезка из спецификации HTML5:
\n\n\n\nРазработчикам рекомендуется указывать атрибут языка в начале html файла, тем самым указывая на принадлежность языка документа. Это способствует инструментам генерации голоса определить то, какое произношение использовать, а инструментам перевода определить каким правилам придерживаться и так далее.
\n\n\n\nВообще, прочитайте побольше об атрибуте lang в этой спецификации.
\n\n\n\nА вот, ссылка на Sitepoint со списком языковых кодов
\n\n\n\n<html lang=\"ru\">\n <!-- ... -->\n</html>Internet Explorer поддерживает тег использования совместимости <meta>, чтобы указывать то, под какую версию IE должна быть отрендерена страница. Да, пока что обстоятельства этого требуют и самый подходящий способ — это указать IE использовать последний поддерживаемый мод с edge mode.
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge\">Легко и быстро делайте правильный рендеринг вашего контента, указывая точную кодировку вашим страницам. Так вы можете избежать использования мнемоников в HTML ( Это и т.п. В общем, дальше вы поняли), указывая их точную кодировку документу. В основном, самая ходовая кодировка это UTF-8.
<head>\n <meta charset=\"UTF-8\">\n</head>По спецификации HTML5, нет нужды в конкретном указании type при вставке CSS и JavaScript файлов, добавля как text/css так и text/javascript как страндартные указатели на типы подключаемых файлов. Теперь это лишнее.
Просто сделайте так:
\n\n\n\n<!-- Внешний CSS -->\n<link rel=\"stylesheet\" href=\"code-guide.css\">\n\n<!-- Внутренний CSS -->\n<style>\n /* ... */\n</style>\n\n<!-- JavaScript -->\n<script src=\"code-guide.js\"></script>Старайтесь поддерживать HTML стандарты и семантику, но не ценой практичности. Используйте как можно меньше разметки с наименее возможным количеством запутанных моментов и спорных вложений.
\n\n\n\nHTML атрибуты должны располагаться именно в таком порядке для облегчения чтения кода:
\n\n\n\nclass\nid, name\ndata-*\nsrc, for, type, href, value\ntitle, alt\nrole, aria-*Классы сделаны для удобного переиспользования компонентов, так что они идут первыми. ID это уже более специфичные вещи и относится к ним нужно довольно бережно, так что они идут вторыми.
<a class=\"...\" id=\"...\" data-toggle=\"modal\" href=\"#\">\n Example link\n</a>\n\n<input class=\"form-control\" type=\"text\">\n\n<img src=\"...\" alt=\"...\">p.s. тут используется слово булиные для простоты упоминания в тексте, который и так не очень простой. В общем, как в простом сленге разработки.
\n\n\n\nЭто атрибуты, которые нуждаются в необъявленном значении. Да, XHTML требует, чтобы вы объявляли их значение, но в HTML5 нет такого требования.
Для дальнейшего чтения, примите во внимание следующую WhatWG секцию по булиным атрибутам.
\n\n\n\n\n\n\n\nПрисутствие булиных атрибутов на элементе указывает на значение
true, а отсутствие атрибута указывает на значениеfalse.
Если вам необходимо присутствие атрибута, НО наличие его значения вам ненужно, то следуйте этому наставлению WhatWG:
\n\n\n\nЕсли атрибут есть, его значение должно быть либо пустой строкой, либо каноничным именем атрибута, без заглавного или замыкающего пробела.
\n\n\n\n<input type=\"text\" disabled>\n\n<input type=\"checkbox\" value=\"1\" checked>\n\n<select>\n <option value=\"1\" selected>1</option>\n</select>Где только возможно, избегайте излишних родительских элементов при написании HTML. Во многих случаях это приводит к повторениям и рефакторингу, но в итоге вы получаете меньше HTML. Вот хороший пример:
\n\n\n\n<!-- Отстой -->\n<span class=\"avatar\">\n <img src=\"...\">\n</span>\n\n<!-- Уже получше -->\n<img class=\"avatar\" src=\"...\">Создание разметки в JavaScript файле усложняет поиск контента, усложняет его редактирование и уменьшает скорость его рендеринга. Избегайте такого подхода всегда, когда это только возможно.
\n\n\n\nИспользуйте двойные пробелы, это единственный способ гарантировать то, что ваш код везде одинаково отрендерится и будет легко прочитан.
\n\n\n\nГруппируя селекторы, дайте каждому по строке.
\n\n\n\nВключайте один пробел перед открывающей скобкой блока, чтобы было понятнее.
\n\n\n\nСтавьте закрывающие скобки на новой строке.
\n\n\n\nДелайте один пробел после каждого :
Каждое объявление должно появляться на своей собственной строке для получения точного отчета об ошибках. В общем, чтобы видеть на какой строке был сбой.
\n\n\n\nЗаканчивайте каждое объявление точкой с запятой. В последнем объявлении это опционально, но в таком случае ваш код будет более склонен выдать ошибку в самых странных моментах при рендеринге.
\n\n\n\nСвойства, разделенные запятой, должны включать в себя пробел после каждой запятой. Например как в случае с box-shadow.
Не ставьте пробелы после запятых в значениях rgb(), rgba(), hsl(), hsla(), or rect(). Это поможет различать разные значения цвета(запятая, без пробела) от разных значений свойств (запятая с пробелом).
Не добавляйте ноль к свойствам значений или цветовым параметрам, то есть .5 вместо 0.5 и -.5px вместо -0.5px.
Все хекс значения пишите в нижнем регистре, то есть #fff. Буквы в нижнем регистре легче отличить, когда читаешь документ, так как у них больше уникальных очертаний.
Используйте сокращенные хекс значения, где это только возможно. Например, #fff вместо #ffffff.
Заключайте в скобки значения атрибутов в селекторах. Например, input[type=”text”]. Хоть это и опционально, но это хорошая практика в плане логичности.
Избегайте указывания единиц измерения для нулевых значений. Например, margin: 0, вместо margin: 0px.
/* Плохой CSS */\n.selector, .selector-secondary, .selector[type=text] {\n padding:15px;\n margin:0px 0px 15px;\n background-color:rgba(0, 0, 0, 0.5);\n box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF\n}\n\n/* Хороший CSS */\n.selector,\n.selector-secondary,\n.selector[type=\"text\"] {\n padding: 15px;\n margin-bottom: 15px;\n background-color: rgba(0,0,0,.5);\n box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;\n}Следующие объявления, должны группироваться в таком порядке:
\n\n\n\nПозиционирование
\n\n\n\nBox model
\n\n\n\nТипография
\n\n\n\nВизуализация
\n\n\n\nГлавное — позиционирование идет первым, так как оно может удалить элемент с потока документа и переопределить относительные стили для box-модели, которая идет следующей, так как указывает размещение и размеры элемента.
\n\n\n\nВсё остальное, что внутри компонента или не влияет на предыдущие две секции, идет последним:
\n\n\n\n.declaration-order {\n /* Позиционирование */\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 100;\n\n /* Box-model */\n display: block;\n float: right;\n width: 100px;\n height: 100px;\n\n /* Типография */\n font: normal 13px \"Helvetica Neue\", sans-serif;\n line-height: 1.5;\n color: #333;\n text-align: center;\n\n /* Визаулизация */\n background-color: #f5f5f5;\n border: 1px solid #e5e5e5;\n border-radius: 3px;\n\n /* Всякое */\n opacity: 1;\n}В сравнении с <link>, @import медленнее, добавляет несколько дополнительных запросов странице и может вызывать другие непредвиденные проблемы. Избегайте его применение и делайте уклон на другие решения:
Используйте несколько <link> элементов
Компилируйте свой CSS с препроцессором, таким как Sass, в один файл.
\n\n\n\nСливайте вместе ваши CSS файлы с функционалом, предоставленным в Rails, Jekyll и других.
\n\n\n\n<!-- Используйте link -->\n<link rel=\"stylesheet\" href=\"core.css\">\n\n<!-- Избегайте @imports -->\n<style>\n @import url(\"more.css\");\n</style>Размещайте медиа запросы как можно ближе к своим релевантным наборам правил. Не связывайте их через разные таблицы стилей или под конец документа. Делая так, вы только усложните работу с ними в будущем, не говоря уже о том треше, с которым придется столкнуться тому, кто потом будет работать с вашим кодом. Вот обычная хорошая разметка с медиа-запросами:
\n\n\n\n.element { ... }\n.element-avatar { ... }\n.element-selected { ... }\n\n@media (min-width: 480px) {\n .element { ...}\n .element-avatar { ... }\n .element-selected { ... }\n}Используя вендорные свойства префиксов, делайте отступ каждому свойству так, будто это объявление нового свойства, то есть в линию, для того, чтобы облегчить мультистрочное редактирование.
\n\n\n\nВ Textmate, используйте Text → Edit Each Line in Selection (⌃⌘A). В Sublime Text 2, используйте Selection → Add Previous Line (⌃⇧↑) и Selection → Add Next Line (⌃⇧↓).
\n\n\n\n/* Свойства с префиксами */\n.selector {\n -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);\n box-shadow: 0 1px 2px rgba(0,0,0,.15);\n}В примерах, где набор правил включает только одно указание стиля, рассмотрите вариант с удалением переноса строк, для улучшения читабельности и быстроты редактирования. Каждый набор правил с несколькими декларациями должен разделяться на разные строки.
\n\n\n\nКлючевой фактор тут, это обнаружение ошибок — то есть CSS валидатор подмечает то, что у вас есть синтаксическая ошибка на 183 строке. С одиночной декларацией, вы её не пропустите. В множественном объявлении стилей, разные строки обязательны для сохранения здравого смысла.
\n\n\n\n/* Одиночное объявление стиля */\n.span1 { width: 60px; }\n.span2 { width: 140px; }\n.span3 { width: 220px; }\n\n/* Множественное объявление, по стилю на строку */\n.sprite {\n display: inline-block;\n width: 16px;\n height: 15px;\n background-image: url(../img/sprite.png);\n}\n.icon { background-position: 0 0; }\n.icon-home { background-position: 0 -20px; }\n.icon-account { background-position: 0 -40px; }Ограничивайте себя в использовании условных сокращений, в тех примерах, где вам надо выставлять все доступные значения. По обыкновению, злоупотребляют сокращениями следующих свойств:
\n\n\n\npadding
\n\n\n\nmargin
\n\n\n\nfont
\n\n\n\nbackground
\n\n\n\nborder
\n\n\n\nborder-radius
\n\n\n\nЗачастую, нам просто не нужно выставлять все значения в условных сокращениях. Для примера, HTML заголовки выставляют только верхний и нижний margin, так что когда необходимо, переписывайте только два этих значения. Чрезмерное использование сокращений зачастую ведет к медленному рендеренгу кода, с ненужными перезаписями и непреднамеренными побочными эффектами.
\n\n\n\n/* Плохой пример */\n.element {\n margin: 0 0 10px;\n background: red;\n background: url(\"image.jpg\");\n border-radius: 3px 3px 0 0;\n}\n\n/* Хороший пример */\n.element {\n margin-bottom: 10px;\n background-color: red;\n background-image: url(\"image.jpg\");\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n}Под страхом расстрела избегайте ненужных вложений в препроцессорах. Просто если вы можете это делать, то это не означает того, что вам всегда надо это делать. Рассматривайте использование вложений только в тех случаях, если вам надо масштабировать стили по родителю и если есть несколько элементов для вложения.
\n\n\n\n// Без вложения\n.table > thead > tr > th { … }\n.table > thead > tr > td { … }\n\n// С вложением\n.table > thead > tr {\n > th { … }\n > td { … }\n}Для улучшения читабельности, заключайте математические операции в скобки с пробелом между значениями, переменными и операторами.
\n\n\n\n// Плохой пример\n.element {\n margin: 10px 0 @variable*2 10px;\n}\n\n// Хороший пример\n.element {\n margin: 10px 0 (@variable * 2) 10px;\n}Помните, что код пишется и поддерживается людьми. Убедитесь, что ваш код достаточно описателен, хорошо прокомментирован и доступен для понимания другими. Создавайте комменты в коде, передающие контекст и своё конкретное предназначение. А не просто повторяющие компонент или имя класса.
\n\n\n\nУбеждайтесь в том, что вы пишите полные предложения для больших комментариев и сжатые фразы для заглавных записей.
\n\n\n\n/* Плохой пример */\n/* Modal header */\n.modal-header {\n ...\n}\n\n/* Good example */\n/* Wrapping element for .modal-title and .modal-close */\n.modal-header {\n ...\n}Пишите классы в нижнем регистре и используйте тире, а не нижние подчеркивания или горбатый регистр. Тире служит как естественный пробел в связанных классах. (.btn и .btn-danger).
Избегайте чрезмерных или слишком коротких, спорных определений названий. .btn очень полезно для кнопок, но .s не означает ровным счетом ничего.
Классы должны быть как можно короче и более сжатыми, на сколько это возможно.
\n\n\n\nИспользуйте имена со смыслом, предпочитайте структурные или целесообразные имена, взамен презентативных.
\n\n\n\nДобавляйте классам префикс, основываясь на их ближайшем родителе или основном классе.
\n\n\n\nИспользуйте .js-* классы для обозначения поведения, но держите эти классы подальше от вашего CSS.
Также, очень полезно применять эти правила при раздаче имен переменным в Sass и Less.
\n\n\n\n/* Плохой пример */\n.t { ... }\n.red { ... }\n.header { ... }\n\n/* Хороший пример */\n.tweet { ... }\n.important { ... }\n.tweet-header { ... }Обязательно обратите внимание на эту статью — Прокачиваем навыки работы с CSS селекторами
\n\n\n\nИспользуйте классы вместо обычных тегов элементов для оптимального рендеринга.
\n\n\n\nИзбегайте исползования нескольких селекторов атрибутов, например [class^=\"…\"], на часто встречающихся компонентах. Известно, что производительность браузера страдает из-за этого.
Сохраняйте селекторы краткими и ограничивайте количество элементов в каждом селекторе до трех.
\n\n\n\nМасштабируйте классы до ближайшего родителя, только тогда, когда нужно. Когда не используются префиксные классы.
\n\n\n\n/* Плохой пример */\nspan { ... }\n.page-container #stream .stream-item .tweet .tweet-header .username { ... }\n.avatar { ... }\n\n/* Хороший пример */\n.avatar { ... }\n.tweet-header .username { ... }\n.tweet .avatar { ... }Организуйте секции кода по компонентам.
\n\n\n\nСоздавайте последовательную иерархию комментирования.
\n\n\n\nИспользуйте последовательные пробелы при разделении секций кода, чтобы потом вам было легче читать большие документы.
\n\n\n\nИспользуя несколько CSS файлов, разделяйте их по компонентам, а не по страницам. Страницы могут быть перераспределены, а компоненты смещены.
\n\n\n\n/*\n * Начало секции компонента\n */\n\n.element { ... }\n\n\n/*\n * Начало секции компонента\n *\n * Иногда вам надо добавлять дополнительный контекст для целого компонента. Делайте это как описано ниже, при необходимости.\n */\n\n.element { ... }\n\n/* Связанный саб-компонент или модификатор стиля */\n.element-heading { ... }Выставите вашему редактору следующие настройки, чтобы избежать распространенные несоответствия в коде и странные различия:
\n\n\n\nИспользуйте двойной пробел.
\n\n\n\nОбрезайте болтающиеся(лишние) пробелы при сохранении.
\n\n\n\nВыставляйте кодировку на UTF-8.
Добавляйте новые строки с конца.
\n\n\n\nРассмотрите документирование и применение этих свойств в вашем проекте в .editorconfig файле. Для примера, вот один для Bootstrap. Вот больше про EditorConfig.
Вообще, эта статья является неким руководством по написанию грамотного HTML и CSS. Но явно не полноценным руководством сводом правил или БЭМ, который, кстати, является очень спорным моментом в мире фронт-энда.
\n","type":"html-css","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/standartynaposankjnfk.jpg"}}},{"node":{"slug":"css-svoistvo-background-image-kak-antipattern","content":"\nCSS свойство background-image позволяет нам делать крутые вещи, но в большинстве случаев наступило время оставить его позади. На всякий случай — что такое антипаттерн.
Многие из нас набили руку, используя такое свойство CSS как background-image, делая c ним всё, что только можно. Для многих оно стало просто старым хорошим товарищем, но уже видимо тем, с которым пора распрощаться.
Сама проблема заключается не в свойстве background-image как таковом. Зачастую оно используется там, где ему совсем не место, например в CTA изображениях или для графики, имеющей отношение к элементам UI.
Если использовать его неправильно, то оно вполне может стать антипаттерном. Но есть ли подходящие кейсы для использования background-image? Несомненно есть.
Однако, есть несколько серьёзных недостатков при использовании background-image и что куда важнее, уже сейчас у нас есть способы действительно лучше подходящие для работы с изображениями.
\n\n\n\nДавайте не будем вспоминать дни танцующих хомячков на фоне.
Перейдем к делу и поговорим о конкретных недостатках использования background-image и затем о том, что мы можем использовать вместо него.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_yuYUrkMTpxxiYAPXtUPfsA.jpeg\")
Вот несколько причин почему использованием background-image может быть плохой практикой в вёрстке:
Изображения, которые лежат в background-image не краулятся или не индексируются Google. Не велика проблема, да? Тогда посмотрите эту цитату из статьи How to Rank in Google Image Search на moz.com:
\n\n\n\nТреть всех поисковых запросов в Google выходит на изображения и 12.5% страниц с результатами поиска показывают блоки(карточки) с результатами для изображений.
Давайте призадумаемся. Одна треть или 33% всех запросов в Google выходит на изображения. Если картинка релевантна теме страницы или бизнес направлению вашего клиента (а если и нет, то возможно должно быть), вам точно нужно быть проиндексированным.
\n\n\n\nЕсли вы используете background-image, то тут вы в пролёте и у вас не может быть тега alt=«», чтобы отдать Google описание и контекст изображения.
Свойство background-image не очень хорошо сказывается на доступности. Скринридеры будут полностью его игнорировать.
Посмотрите на ограничения с доступностью в этом случае:
\n\n\n\n\n\n\n\nБраузеры не отдают никакой конкретной информации о фоновых изображениях для вспомогательных технологий. Это важно в первую очередь для скринридеров, так как они не будут обозначать присутствие фоновых изображений и следовательно, пользователь не получит никакой полезной информации о них.
Даже если скринридеры не полностью игнорируют изображения, в фонах которых нет текста alt=\"\", который может дать полезное описание об изображении или передать его контекст.
Совет: Если вы хотите, чтобы скринридер пропустил изображение (ну вдруг это просто элемент дизайна), просто оставьте alt=\"\" пустым (использование role=\"presentation\" тут не самый оптимальный вариант, так как оно нарушает первое правило ARIA).
Как свойство background-image может негативно влиять на производительность?
Так как обычно только одно изображение используется для background-image, вне зависимости от ширины экрана устройства или разрешения.
Что нам в идеале надо, так это иметь возможность использовать адаптивные изображения таким образом, чтобы браузер мог загрузить разные размеры изображений в зависимости от ширины экрана устройства или разрешения экрана.
\n\n\n\nТут ощутимая разница будет заметна на мобильных устройствах или при медленных интернет соединениях, так же как и на вычислительной мощности, требуемой для масштабирования изображений. Посмотрите статью Post-Mortem: Applied Image Optimization.
\n\n\n\n\n\n\n\nНа обычном сайте изображения будут самым тяжелым куском из отправляемых данных. Мы просто обязаны оптимизировать их.
Пока вы можете это сделать через @media запросы с помощью CSS background-image, но в итоге, это будет довольно обременительным подходом, если вам понадобится изменить изображение или переименовать его, ну или поменять его версию.
Причина по которой это становится таким обременительным в том, что изображение вставлено в ваш CSS, который обычно формируется на стадии сборки страницы, которая в свою очередь не находится под клиентским контролем.
\n\n\n\nТак как это всё слишком замудрено, люди просто забивают на этот момент и в итоге имеют одну версию изображения для всех размеров экранов и разрешений.
\n\n\n\nХотя и есть всякие JavaScript библиотеки как bgset, но зачем добавлять ещё больше JavaScript для решения проблемы у которой и так много недостатков?
\n\n\n\nДобавьте к этому желание использовать фишки следующего поколения, такие как WebP, как прогрессивное улучшение и всё станет реально плохо с подходом на background-image.
\n\n\n\nВаш браузер просто не может начать скачивать изображение до того, как он не скачает и не запарсит CSS.
Ещё одна польза в том, что если ваши изображения вставлены в CSS через background-image, браузеру нужно скачать и запарсить ваш CSS, перед тем, как он сможет запросить изображения.
Это говорит о том, что ваше “основное” изображение будет понижено в очереди загрузок и довольно медленно загрузится, имея низкий приоритет. Если вы используете изображения через HTML элементы, то браузер может запросить их куда быстрее, иногда даже перед началом загрузки стилей страницы.
\n\n\n\nСвойство background-image также не очень хорошо, если дело касается CMS’ок и CDN’ов.
Давайте представим, что у нас есть главное изображение на сайте, которое я показываю с помощью background-image в div.
Люди со всего мира заходят на этот сайт и мне нужно, чтобы CDN доставлял им эти ресурсы оптимально быстрым способом.
\n\n\n\nЕсли у меня есть ссылка на изображение, вставленная в CSS, то я сделаю глобальный поиск в редакторе и заменю все свои изображения, а вернее ссылки на них с локальных на CDN’овские.
\n\n\n\nЕсли вы предварительно выставили ссылки на изображения, как переменные с помощью CSS Variables, то вам повезло! Но большинство людей так не делает и необходимость в создании и деплое CSS с обновленными ресурсами, всякий раз как вы хотите обновить ваши изображения кажется ну уж слишком избыточной для работы с таким таском. Но придется делать либо так, либо генерить инлайновый CSS, но давайте уже обойдемся без этого.
\n\n\n\nКуда проще просто дать вашей CMS добавить URL префикс, но это может стать грубоватым подходом, если вы делаете это через CSS background-image, требующим генерацию инлайновых стилей или же если вы прибегаете к другим махинациям с вёрсткой.
Вообще, вставка ссылок на изображения в CSS сейчас мне кажется каким-то хардкодингом.
\n\n\n\nИтак, мы только что обсуждали недостатки, но когда же выходит было бы хорошо воспользоваться background-image?
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_sKlmyvnuxzCcrYlAG8XKxw.jpeg\")
Это покажется слишком очевидным, но если вам надо просто добавить декоративное изображение как фон, то это именно тот кейс, в котором нужно использовать background-image!
\n\n\n\nХорошо использовать
background-imageтогда, когда вам нужно просто фоновое изображение и ничего более.
Если вы так делаете, то рассмотрите использование image-set() вместе с background-image(), чтобы уменьшить проблемы с производительностью, упомянутые выше.
Не то, чтобы свойство само по себе плохое, просто его впихивали куда ни попадя, для задач в которых оно является далеко не лучшим решением.
\n\n\n\nЯ полагаю, что весьма весомой причиной широкого использования background-image является сопутствующее свойство — background-size: cover;, которое точно даст вам знать, что заданное изображение покрывает всю положенную область, к которой оно прикреплено.
\n\n\n\nСвойство object-fit уже спешит на помощь!
Если вы используете семантически верный элемент в купе со свойством object-fit, то вы получите тот же самый эффект, что и в случае с background-size: cover;, но также вы получите ещё и такие плюшки: SEO-friendly изображения.
\n\n\n\nИзображения, которые будут читаемы скринридерами. Тут нужно просто использовать свойство alt=\"\".
Отличную работу с CMS сгенерированными ссылками на изображения и CDN’ами.
\n\n\n\nЭтот подход будет отлично работать с srcset для оптимизированных изображений
Вы сможете использовать <source> для передовых форматов изображений, таких как .webp.
Это вообще не сложно сделать, а профитов немерено! Свойство object-fit указывает изображению или видео то, как оно должно умещаться в родительский контейнер. Вам нужно просто поменять это:
<div style=\"background-image: url('/some/man-with-a-dog.jpg');\n background-size: cover;\">\n</div>На это:
\n\n\n\n<picture>\n <img src=\"/some/man-with-a-dog.jpg\"\n alt=\"Man with a dog\"\n style=\"object-fit: cover;\"\n />\n</picture>Очевидно, что в обоих случаях вы бы не стали использовать инлайновые стили, но к нашей радости вы можете видеть то, какой гибкий подход у нас есть под рукой, если бы мы оставили background-image свойство и использовали бы действительно семантические HTML элементы, такие как <picture> и <img>.
Затем мы можем в лёгкую добавить адаптированные по размерам изображения через srcset. Мы также можем легко использовать передовые форматы, такие как .webp на выбор браузера из <source>.
Более того, мы можем воспользоваться преимуществом таких плюшек, как нативная ленивая загрузка в Chrome, ну и в других бразуерах тоже, как только они её внедрят.
\n\n\n\nВот как бы выглядел код, который делает все эти вещи:
\n\n\n\n<picture>\n <source\n srcset=\"/some/_1170x658_crop_center-center/man-with-a-dog.webp 1170w,\n /some/_970x545_crop_center-center/man-with-a-dog.webp 970w,\n /some/_750x562_crop_center-center/man-with-a-dog.webp 750w,\n /some/_320x240_crop_center-center/man-with-a-dog.webp 320w\"\n sizes=\"100vw\"\n type=\"image/webp\"\n />\n <source\n srcset=\"/some/_1170x658_crop_center-center/man-with-a-dog.jpg 1170w,\n /some/_970x545_crop_center-center/man-with-a-dog.jpg 970w,\n /some/_750x562_crop_center-center/man-with-a-dog.jpg 750w,\n /some/_320x240_crop_center-center/man-with-a-dog.jpg 320w\"\n sizes=\"100vw\"\n />\n <img\n src=\"/some/man-with-a-dog-placeholder.jpg\"\n alt=\"Man with a dog\"\n style=\"object-fit: cover;\"\n loading=\"lazy\"\n />\n</picture>Так мы получаем:
\n\n\n\nЛенивую загрузку, если браузер её поддерживает (в противном случае они не происходит, всё нормально)
\n\n\n\nwebp, если браузер его поддерживает.
\n\n\n\nsrcset из оптимизированных адаптивных изображений на выбор браузера.
SEO-friendly, прогрессивное улучшение, доступность и производительность — всё это обернуто в одной, хорошо сделанной компактной вундервафле.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_vYspc0OoBfjiz52Typht9Q.jpeg\")
Boom!
\n\n\n\nИ все эти изображения могут быть автоматически заресайзены прямо из CMS, с помощью таких инструментов, как ImageOptimize, упрощая ссылаемость на CDN или Amazon S3. И в конце концов, вы же можете делать обрезку изображений с помощью object-fit.
Поддержка бразуерами <picture> и scrset фантастически хороша! (есть даже полифиллы, если они вам нужны.) и такая же хорошая поддержка для object-fit (тоже есть полифилл). Ещё один хороший паттерн для использования через polyfill.io.
В общем, настало время избавиться от background-image в вашем наборе инструментов, кроме тех редких случаев, когда оно вам реально будет нужно по назначению.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_UbvQz5_BW-rP0WREgCpE1Q.jpeg\")
Пишите код, используя лучшие практики для подавляющего большинства, затем используйте прогрессивное улучшение и при нужде полифиллы. Не будьте закованы в узы прошлого из-за очень маленького процента ваших посетителей, у которых не будет работать это свойство.
\n\n\n\nНе используйте изображения, как просто картинки; используйте соответствующие семантические HTML элементы.
\n\n\n\nЯ думаю, что в конечном итоге вы поймете то, что ваши сайты станут более SEO-friendly, более доступны и куда более производительнее… а еще у вас будет ощущение удовлетворенности от написания на семантически грамотном HTML.
\n\n\n\nСвойство CSS background-image никогда не подразумевалось для использования основных изображений или UI элементов. Но сейчас для этого уже есть способы получше, так что давайте их просто использовать.
Если все это заинтересовало вас в плане оптимизации изображений, обратите внимание на отличную книгу images.guide, чтобы узнать об этом ещё больше!
\n\n\n\nEnjoy your object-fit!
CSS свойство background-image позволяет нам делать крутые вещи, но в большинстве случаев наступило время оставить его позади. В этой статье вы узнаете почему это свойство является антипаттерном и чем его заменить
\n","type":"html-css","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/bgimgantipatternfdnsf.jpg"}}},{"node":{"slug":"kak-ya-perestal-ispolzovat-bootstrap-v-ugodu-css-grid","content":"\nЛично я считаю, что в плане веба, Bootstrap ещё рано полностью заменять на CSS Grid. Но перевел эту статью с точки зрения перспективы на будущее, которое уже далеко не за горами.
\n\n\n\n\n\n\n\nBootstrap требует слишком много писанины: вам нужно наплодить много div’ов, даже если вам нужно сделать в макете всего два блока.
Дела становятся еще хуже, когда вы добавляете адаптивность
\n\n\n\nИли когда вы хотите переместить блоки
\n\n\n\nСетка Bootstrap ограничена 12-ю колонками
\n\n\n\nПо дефолту, у Boostrap 10px внутренние отступы, которые довольно сложно переписать.
Bootstrap должен скачиваться со стороны пользователя, что тормозит ваш сайт.
\n\n\n\nПредположим, что у вас есть следующий шаблон, который вам нужно интегрировать:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_GExAbQYr_tSQ5-HlmtG4lw.png\")
<body>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12 header\">...</div>\n </div>\n <div class=\"row\">\n <div class=\"col-4 navigation-menu\">...</div>\n <div class=\"col-8 main-content\">...</div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 footer\">...</div>\n </div>\n </div>\n</body>Хоть у вас всего четыре блока, вам понадобилось аж 9 div’ов, чтобы закодить ваш шаблон.
Спасибо гридам, вы можете получить тот же результат с помощью всего четырёх div’ов.
<body>\n <div class=\"container\">\n <div class=\"header\">...</div>\n <div class=\"navigation-menu\">...</div>\n <div class=\"main-content\">...</div>\n <div class=\"footer\">...</div>\n </div>\n</body>Хоть это не так просто как с импортом в Bootstrap, но вам надо будет добавить некоторые дополнительные CSS стили.
\n\n\n\n.container {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n}\n.header {\n grid-column: span 12;\n}\n.navigation-menu {\n grid-column: span 4;\n}\n.main-content {\n grid-column: span 8;\n}\n.footer {\n grid-column: span 12;\n}На примере выше, вы сначала определили 12-ти колоночный контейнер в гридах. А затем выставили количество строк, через которые будет проходить элемент.
\n\n\n\nБолее того, помимо простой версии, скорее всего вам понадобится адаптивность шаблона не только под смартфоны, но и под планшеты.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_GyKr6Hd8wKnQC_ACgq5IXQ.png\")
Чем сложнее становится дизайн, тем сложнее и запутанней становится ваш HTML c всё большим и большим количеством классов:
\n\n\n\n<body>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-xs-12 header\">...</div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-12 col-md-6 col-lg-4 navigation-menu\">...</div>\n <div class=\"col-xs-12 col-md-6 col-lg-8 main-content\">...</div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-12 footer\">...</div>\n </div>\n </div>\n</body>Если вы хотите добавить адаптивность вашему шаблону, то впринципе нет нужды в замене HTML.
\n\n\n\nВам только лишь надо добавить некоторые медиа запросы в ваш CSS:
\n\n\n\n...\n@media screen and (max-width: 768px) {\n .navigation-menu {\n grid-column: span 6;\n }\n .main-content {\n grid-column: span 6;\n }\n}\n@media screen and (max-width: 480px) {\n .navigation-menu {\n grid-column: span 12;\n }\n .main-content {\n grid-column: span 12;\n }\n}Скажем, к примеру, что вместо на мобильных устройствах вы хотите навигационную панель над шапкой:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_ndnFvkhKgfhMqrOY9YdE7A.png\")
На Bootstrap это бы выглядело так. Вам надо было бы продублировать ваше меню, спрятать одно и показывать другое на мобильных телефонах, а другое на десктопах соответственно.
\n\n\n\n<body>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-xs-12 hidden-sm-up navigation-menu-mobile\">...</div>\n <div class=\"col-xs-12 header\">...</div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6 col-lg-4 hidden-xs-down navigation-menu\">...</div>\n <div class=\"col-xs-12 col-md-6 col-lg-8 main-content\">...</div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-12 footer\">...</div>\n </div>\n </div>\n</body>И само собой, HTML станет все больше и сложнее с ростом шаблона.
\n\n\n\nВам нужна только одна строчка CSS, чтобы передвинуть меню навигации наверх и вот как:
\n\n\n\n...\n@media screen and (max-width: 480px) {\n .navigation-menu {\n grid-row: 1;\n grid-column: span 12;\n }\n ...\n}Имейте столько колонок, сколько хотите.
\n\n\n\nПо-дефолту, Bootstrap идет с 12-ти колоночной системой сеток. Это значение может быть переписано, но если вы так сделаете, это будет переписано везде в приложении.
\n\n\n\nС другой стороны, с CSS Grid, вы можете указать количество колонок на строку для каждого вашего грида.
\n\n\n\nВ grid-template-columns: repeat(12, 1fr); вы можете просто указать число колонок, которые вы хотите вместо 12ти.
Колонки в Bootstrap имеют 10px внутренние отступы слева и справа. Самое лучшее решение тут, это переписать их используя padding-right: 0 !important; и padding-left: 0 !important;
С CSS Grid шаблоном, вам надо контролировать все CSS классы, вы можете выставлять внутренние отступы везде где вам надо.
\n\n\n\nДаже если таблица стилей Bootstrap весит всего несколько килобайт, она затормозит загрузку вашей страницы.
\n\n\n\nВсе основные браузеры поставляются с поддержкой CSS Grid, начиная с 2017, так что нет нужды скачивать какие-либо дополнительные CSS, чтобы использовать гриды.
\n\n\n\nНа время обновления статьи, уже 95.47% браузеров поддерживали CSS Grid.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/Screenshot-2021-02-09-at-17.43.08-1024x403.png\")
В этой статье вы узнаете как можно заменить сетку на Bootstrap, сделав её на CSS Grid
\n","type":"html-css","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/gridbootstrpafnksdnf.jpg"}}},{"node":{"slug":"css-selectory-4-urovnya","content":"\nВ этой статье рассказывается про селекторы 4 уровня в CSS, которые уже можно частично применять в разработке, про которые ещё мало кто знает и про те, которые только ожидают часа своего всеобщего признания. Но в любом случае знание и понимание этого материала значительно упростит ваш процесс работы как в настоящем, так и в будущем.
\n\n\n\n\n\n\n\nСелекторы это основная часть CSS. Они дают вам возможность делать такие вещи, как например, выборка всех элементов определенного типа:
\n\n\n\ndiv {\n /* some styles to apply to all div elements */\n}Или вы можете выбрать элемент, который является замыкающим дочерним элементом своего родителя:
\n\n\n\nul li:last-child {\n /* some styles to apply to only the last child of a list */\n}Конечно же они дают вам возможность делать куда более сложные вещи, например выбор всех дочерних элементов списка, кроме последнего.
\n\n\n\nПо факту, есть куда больше одного способа сделать это и куда более запутанные и сложные.
\n\n\n\nДля примера, сравним этот:
\n\n\n\nul li {\n /* Styles to apply to all children */\n}\nul li:last-child {\n /* Styles to reset the previous styles because they don’t apply to the last child */\n}С этим:
\n\n\n\nul li:nth-last-child(n+2) { \n /* Styles to apply to all children except the last one */\n}ul li это примеры селекторов первого уровня.
last-child и nth-last-child это примеры селекторов 3-го уровня.
Вы можете рассматривать уровни, как версии спецификаций CSS селекторов, в которых каждый уровень добавляет селекторы “помощнее”.
\n\n\n\nВ этой статье я предоставлю вам обзор последнего поколения селекторов, а именно 4 уровня, в соответствии со спецификацией Editors’s Draft на январь 2019 года, по следующим категориям:
\n\n\n\nЛогические комбинации\n\n\n\n
Селекторы атрибутов
Лингвистические псевдоклассы
Псевдоклассы положения
Пользовательские псевдоклассы
Псевдоклассы форм ввода
Древовидные псевдоклассы
Табличные селекторы
Во время написания, спецификация для селекторов 4 уровня находится в драфте. Ситуация может измениться, если они достигнут статуса официальной рекомендации и к своему сожалению, вы в итоге обнаружите, что многие селекторы либо не поддерживаются некоторыми браузерами или им нужен префикс с :-moz- или :-webkit-.
Для каждого селектора я дам ссылку на его Can I Use страничку, так что вы увидите какие браузеры его поддерживают (если это возможно), также дам краткое описание, пример и ссылку на Codepen, так что вы сможете попробовать его в действии (даже если он сейчас не работает, всё равно это может измениться в будущем).
\n\n\n\nУчитывая всё вышесказанное, давайте начнем с селекторов из категории логических комбинаций.
\n\n\n\nЭта категория включает в себя селекторы, которые комбинируют другие селекторы.
\n\n\n\nЭтот селектор выделяет все элементы, кроме тех, которые не подходят по селекторам из списка, который представлен в виде аргумента. К примеру:
\n\n\n\np:not(.beginning, .middle) {\n color: red;\n}Сделает все p элементы у которых нет классов beginning и middle красного цвета.
\n\n\n\nВерсия 3 уровня для этого селектора позволяет включить только один селектор, вместо списка из нескольких. Для примера, вышеупомянутый селектор может быть записан как:
\n\n\n\np:not(.beginning):not(.middle) {\n color: red;\n}Он выбирает элементы, которые подходят по выборке селекторов из списка аргументов. Для примера:
\n\n\n\np:is(.beginning, .middle) {\n color: blue;\n}Сделает все элементы p у которых есть классы beginning и middle синим цветом.
Одним из самых примечательных изменений с последнего рабочего драфта является то, что селектор :matches() был переименован в :is() и убран из Safari (который был единственным браузером с его полной поддержкой), так что теперь он куда более совместимый со своей противоположностью, такой как :not().
:matches можно применять как алиас для :is(), если нужно для обратной совместимости. Хотя, :matches() ранее назывался :any(), так что многие браузеры поддерживают этот псевдокласс с префиксом:
p:-webkit-any(.beginning, .middle) {\n color: blue;\n}\n\np:-moz-any(.beginning, .middle) {\n color: blue;\n}На время написания, этот селектор не поддерживался ни одним браузером.
\n\n\n\nУ него такой же синтаксис и функционал, как и у :is(), но ни сам селектор и ни какой из его аргументов влияют на его специфичность, которая всегда равна нулю.
Специфичность это “вес” CSS правила. Если два селектора применены к одному и тому же элементу, то выигрывает тот у которого наивысшая специфичность. Всё понятно. А если у нескольких правил одинаковая специфичность, то последнее правило в CSS будет применено к элементу.
\n\n\n\nЭтот селектор можно использовать как фильтр или для перезаписи стилей связанных с элементом.
\n\n\n\nВ спецификации приводится следующий пример:
\n\n\n\na:not(:hover) {\n text-decoration: none;\n}\n\nnav a {\n /* Has no effect */\n text-decoration: underline;\n}\n\n/* With the new :where Level 4 selector */\na:where(:not(:hover)) {\n text-decoration: none;\n}\n\nnav a {\n /* Should work */\n text-decoration: underline;\n}Поддержка браузерами. На время написания, этот селектор не поддерживался ни одним браузером.
\n\n\n\nЭтот селектор берет список родственных селекторов как список аргументов. Он выделяет элемент, если любой из его родственных селекторов (в его области видимости) подходит по критерию. Для примера:
\n\n\n\np:has(strong, em) {\n color: red;\n}Тут всем элементам p, в которых есть <strong> или <em> теги, выставится красный свет.
Эта категория включает в себя селекторы, которые работают с селекторами атрибутов.
\n\n\n\nЭтот селектор выберет тот элемент, чьё значение атрибута foo равно bar, вне зависимости от регистра.
Для примера:
\n\n\n\np[class=\"text\" i] {\n color: green;\n}Сделает зеленым всем элементы p, чей атрибут class имеет значения text, TEXT, text или другую комбинацию.
\n\n\n\n\n\n\n\nНа время написания, этот селектор пока не поддерживался ни одним браузером.
\n\n\n\nВыбирает элемент, чью имя атрибута foo, точно соответствует bar, в соответствии с регистром.
Для примера:
\n\n\n\np[class=\"text\" s] {\n color: green;\n}Сделает зеленым все элементы p, у которых атрибут class имеет значение text (и не Text или тп).
Эта категория включает в себя селекторы, которые работают с лингвистическими установками, основанными на тонкостях каждого языка или правописания.
\n\n\n\nВыбирает элементы написанные слева направо, там где указана направленность написания. И напротив, :dir(rtl) выбирает элементы, которые написаны справа налево.
Для примера:
\n\n\n\np:dir(ltr) {\n background-color: red;\n}Тут фоновый цвет выставится на красный всем элементам p, написанным слева направо.
\n\n\n\n\n\n\n\nПоддержка браузерами. На время написания, версия 4-го уровня для этого селектора не поддерживалась ни одним браузером.
\n\n\n\nВыбирает элемент, отмеченный как китайский (или другой язык, просто поменяйте zh на нужный) или написанный традиционными китайскими символами (или любой другой системой символов, просто поменяйте *-hant на любой другой код символов)
На самом деле, этот селектор можно использовать с CSS2, однако, структуризация поиска по языку и разделение запятой в аргументах, являются нововведениями в селекторах 4-го уровня.
\n\n\n\nЭтот селектор может принимать список из одного языка или диапазон языков, как аргумент. Если диапазон языков содержит звездочки, то они должны быть либо экранированы (:lang(es-\\*)), либо указаны как строка (:lang(\"es-*\")).
Для примера:
\n\n\n\np:lang(\"*-CH\") {\n background-color: red;\n}Выставит фоновый цвет красным, всем элементам p, в которых есть текст, написанный на одном из языков Швейцарии (CH указывает Швейцарию).
Эта категория включает в себя селекторы, относящиеся к ссылкам.
\n\n\n\nПока что нет странички на Can I Use, но он поддерживается большинством основных браузеров.
\n\n\n\nЭтот селектор выделяет все элементы, у которых есть атрибут href (такие как <a> или <link>). Другими словами, все элементы, которые подходят псевдоклассам :link и :visited.
Для примера:
\n\n\n\na:any-link {\n color: red;\n}Выдаст всем элементам a c атрибутом href, красный цвет.
\n\n\n\n\n\n\n\nНа момент написания, этот селектор не поддерживается ни одним из браузеров.
\n\n\n\nЭтот элемент выбирает элементы, которые ссылаются на эту же страницу. Если ссылка включает в себя фрагмент настоящей ссылки, то она тоже подпадает под селектор. Если же нет, то фрагмент части ссылки настоящего URL не рассматривается.
\n\n\n\nДля примера:
\n\n\n\na:local-link {\n text-decoration: none;\n}Этот селектор сделает все ссылки с атрибутом href, которые ссылаются на эту же страницу, без подчеркнутыми.
Это категория включает в себя селекторы для тех элементов, с которыми взаимодействует пользователь.
\n\n\n\nВыбирает элементы, который либо подходят под псевдокласс :focus (когда элемент в фокусе), либо когда у них есть потомки, которые подходят под :focus.
Для примера, рассмотрим следующую форму:
\n\n\n\n<form>\n<input type=\"text\" id=\"name\" placeholder=\"Enter your name\" />\n</form>Она добавит рамку вокруг поля ввода при фокусе.
\n\n\n\nform:focus-within {\n border: 2px solid;\n}Выбирает элемент, если он в фокусе (как псевдокласс :focus) и браузер определяет, что фокус сделан прямо явным образом, обычно это делается с помощью кольца фокусировки (в браузерах такая штука в настройках есть).
Однако, разница с :focus довольно тонкая, но всё же есть.
Если :focus-visible что-то выбирает, то :focus делает это тоже, но на самом деле это не всегда так и зависит от браузера (включена ли у него отрисовка кольца фокуса) и того, как элемент попал в фокус (мышкой или клавиатурой).
У Firefox есть свой такой селектор, как псевдокласс :-moz-focusring.
Для примера, в некоторых случаях, следующая стилизация:
\n\n\n\n/* Standard Level 4 selector */\n:focus-visible {\n background-color: lightgray;\n}\n\n/* Level 4 selector for Firefox*/\n:-moz-focusring {\n background-color: lightgray;\n}Применится только к элементу, если на нем сфокусировались через клавиатурную навигацию (tabbing navigation).
\n\n\n\n\n\n\n\nЭта категория включает в себя селекторы, которые применяются к элементам имеющем отношение к формам ввода.
\n\n\n\n:read-write выбирает элементы, чьё значение можно изменить, такие каr <input> без атрибута readonly.
:read-only выбирает элементы, которые в свою очередь уже нельзя изменить, например тот же <input>, но с атрибутом readonly.
Однако, эти селекторы не просто выбирают элементы <input> или <textarea>, они выбирают любой элемент, который может быть отредактирован пользователем, например как <p> с атрибутом contenteditable со значением true.
К примеру:
\n\n\n\n:read-write {\n background-color: lightyellow;\n}\n\n:read-only {\n background-color: lightgray;\n}\n\n/* For Firefox */\n:-moz-read-write {\n background-color: lightyellow;\n}\n\n:-moz-read-only {\n background-color: lightgray;\n}Тут фоновый цвет измениться для всех элементов, которые можно изменить и которые нельзя. На lightyellow и lightgrey, соответственно.
Этот селектор выбирает элемент ввода, который в данный момент показывает текст плейсхолдера.
\n\n\n\nДля примера:
\n\n\n\ninput:placeholder-shown {\n color: red;\n}Выставит красный текст плейсхолдеру элемента <input> (только для самого плейсхолдера).
Выбирает элемент, который является дефолтной опцией в группе связанных элементов. Обычно он применяется к кнопкам и выбранным спискам/меню.
\n\n\n\nДля примера:
\n\n\n\ninput:default {\n box-shadow: 0 0 2px 2px green;\n}\n\ninput:default + label {\n color: green;\n}Задаст зеленую тень дефолтному <input> элементу и зеленый цвет его лейблу.
Тут выберутся элементы, чьё значение имеет промежуточное состояние. Для примера, радио и чекбокс группы состоящие из не выбранных элементов или прогресс-бары, процент завершения которых неизвестен.
\n\n\n\nДля примера:
\n\n\n\ninput[type=\"radio\"]:indeterminate + label {\n color: red;\n}Этот пример выдаст лейблам радио элементов в группе, красный цвет, в том случае, если в этой группе нет выбранных элементов.
\n\n\n\n\n\n\n\nОни выделят элементы, чьё содержимое или значение, соответственно, валидное или наоборот, в соответствии с семантикой их валидности. Если семантика не определена (или не может быть определена), то элемент и не :valid, и не :invalid.
Пример для элемента ввода типа email:
\n\n\n\ninput:invalid {\n color: red;\n}\n\ninput:valid {\n color: green;\n}Эти селекторы применяются только к элементам, которые имеют диапазон ограничений, для примера, если у них может быть указанные минимум и максимум. Если же нигде нет таких ограничений, то элемент не является и не :in-range, и не :out-of-range.
К примеру, для <input> элемента с минимальным значением 1 и максимальным 5:
input:out-of-range {\n color: red;\n}\n\ninput:in-range {\n color: green;\n}В некоторых случаях, эти селекторы будут иметь тот же эффект, что и :valid и :invalid.
Поддержка браузерами для :required
\n\n\n\nПоддержка браузерами для :optional
\n\n\n\nЭти селекторы применяются к элементам формы, которые соответственно, required или optional, перед отправкой формы. Элементы, которые не являются элементами форм, являются ни чем иным, как ни тем и не другим.
\n\n\n\nДля примера:
\n\n\n\ninput:optional {\n color: gray;\n}\n\ninput:required {\n color: red;\n}Даст элементам с required красный цвет и опциональным элементам выдаст серый цвет.
Эта категория включает в себя селекторы, которые основаны на информации, лежащей в древовидной структуре документа, но не может быть представлена другими селекторами, например как позиция элемента относительно его родителя.
\n\n\n\nПоддержка браузерами (на момент написания, версия 4 уровня для этого селектора ничем не поддерживается).
\n\n\n\n:nth-child выбирает каждый элемент, который является N-ным дочерним элементом своего родителя. :nth-last-child делает то же самое, но ведёт счет с конца. Вы можете поиграться с :nth тестером, чтобы понять разницу и узнать больше об An+B обозначениях.
В самом начале этой статьи, я показал вам пример :nth-last-child и сказал, что это был селектор 3-го уровня. Однако, для 4-го уровня, этот селектор принимает опциональный of селектор, который отфильтровывает потомков по признаку, который подходит под этот селектор.
Вообще тут могут быть различия в том, как объявлен селектор. Для примера:
\n\n\n\nli.item:nth-child(-n+2)Выберет первые два элемента li, но только если у них есть класс item.
Это не то же самое, что:
\n\n\n\n:nth-child(-n+2 of li.item)Тут выберутся первые два <li> элемента, которые имеют класс item, даже если они не первые два потомка в списке.
Попробуйте (в браузере, который поддерживает этот селектор, таком как Safari):
\n\n\n\n\n\n\n\n\n\n\n\nЭта категория включает селекторы, которые работают с колонками таблицы.
\n\n\n\nНа время написания, этот селектор вообще никем и ничем не поддерживался.
\n\n\n\nСелектор комбинирования колонок (||), выбирает элемент типа E, который представляет ячейку в таблице и принадлежит колонке, представленной элементом с типом F.
Для примера, рассмотрим следующую таблицу:
\n\n\n\n<table>\n <colgroup>\n <col span=\"2\">\n <col class=\"selected\">\n </colgroup>\n <tr>\n <th>ID</th>\n <th>Description</th>\n <th>Price</th>\n </tr>\n <tr>\n <td>1</td>\n <td>Computer</td>\n <td>$999</td>\n </tr>\n <tr>\n <td>2</td>\n <td>Tablet</td>\n <td>$499</td>\n </tr>\n</table>Выдаст ярко-желтый цвет ячейкам (<td> элементам), которые относятся к selected колонке (price).
На время написания, этот селектор не поддерживается никем и ничем.
\n\n\n\nВы можете рассматривать эти селекторы, как колоночную версию :nth-child и :nth-last-child.
:nth-col(An+B) выбирает элемент в гриде или таблице, который представляет собой ячейку колонки, у которой An+B-1 колонок перед ней, с любым положительным целым числом или нулевым значением n.
:nth-last-col(An+B) выберет элемент сетки или таблицы, который представляет собой ячейку колонки, у которой An+B-1 колонок после неё, с любым положительным или нулевым значением n.
Для примера:
\n\n\n\ncol.nth-col(1) {\n background-color: lightyellow;\n}\n\ncol.nth-last-col(1) {\n background-color: lightgreen;\n}Выдаст первой колонке таблицы светло-желтый фон, а также последней колонке выдаст светло-зеленый фон.
\n\n\n\nСелекторы 4 уровня позволяют вам делать сложную выборку селекторами, довольно простым способом.
\n\n\n\nМы сейчас покрыли большинство селекторов указанных в Editor’s Draft спецификации на январь 2019 года, однако, я оставил в покое некоторые селекторы, которые скорее всего исчезнут или изменятся, ну или если по ним вообще нет никакой информации, в том числе и о поддержки другими браузерами:
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nНо вам определенно нужно за ними следить, так же как и за другими селекторами 4-го уровня.
\n","date":"2021-02-02T16:49:13.000Z","title":"CSS селекторы 4-го уровня","id":"24790ac6-bf80-560b-b036-68445e7a41b3","excerpt":"В этой статье рассказывается про селекторы 4 уровня в CSS, которые уже можно частично применять в разработке, про которые ещё мало кто знает и про те, которые только ожидают часа своего всеобщего признания.
\n","type":"html-css","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/cssselectorzdfnks.jpg"}}},{"node":{"slug":"razmery-shriftov-css-pikseli-vs-em-vs-rem-procenti-vs-viewport-edinitsy","content":"\nВ этой статье вы узнаете про выставление размера шрифта в пикселях, em, rem, процентах и viewport единицах.
\n\n\n\n\n\n\n\nОчень много обсуждений велось по поводу пикселей, em, процентов, rem и какое свойство шрифтов когда использовать. Не смотря на более сотни статей в сети, эта тема может быть довольно запутанной, учитывая то, как использование этих свойств шрифтов разнится в зависимости от нужд наших проектов. Для примера, некоторые советуют не использовать фиксированные пиксели на базовом уровне (html и body элементы), так как пользователь не будет иметь возможности сбросить размер шрифтов под свои параметры. Но для людей типа меня, которые зависимы от bootstrap, это не совсем благоразумно. Мы заканчиваем с фиксированными основными значениями в пикселях и начинаем создавать свойства шрифтов для всего проекта, отталкиваясь от основных пиксельных значений.
Эта статья объясняет разницу между свойствами шрифтов и как лучше их использовать. Естественно нет конкретного пути того, как это делать и большая часть того какой шрифт использовать и насколько будет определяющим этот момент, основываясь на понимании единиц размерности шрифтов и тип проекта — всё это определяющие моменты, от которых зависит выборка в вариативности инструментов.
\n\n\n\nПеред наступлением эпохи адаптивного дизайна, пиксели широко использовались как единица размерности шрифтов для всего от типографики до ширины, отступов и высоты. Тем не менее, пиксели это единицы с фиксированным размером и они не меняются, основываясь на размере viewport или масштабности. Если вы хотите сделать адаптивный сайт, используя пиксели, то это может стать довольно сложным занятием, так как вам придется отслеживать все значения основанные на пикселях в CSS, включая значения в медиа запросах. Так какое же свойство шрифта мы можем использовать, чтобы делать минимальные изменения в нашем CSS, но оставаться масштабируемыми? И тут нам на помощь приходят em, rem, проценты и единицы viewport.
\n\n\n\nEm — гибкая масштабируемая единица, которая конвертируется браузером в пиксели. Если стандартный размер шрифта в Chrome равен 16px, то 1 em = 16px. Главное заблуждение по поводу em в том, что оно зависит от размера шрифта родительского элемента. Следуя спецификации W3, em относителен размеру шрифта элемента на котором их используют. Em широко используются для типографии, такой как заголовки, текста, параграфы и с элементами ассоциированными с ней, такими как внешние отступы и внутренние. Если вы выставите базовый размер шрифта для для html и body элементов в пикселях и свойства ваших типографических элементов будут определяться в с помощью em, для адаптивного дизайна все что вам нужно будет сделать это изменить стандартный размер шрифта на базовом уровне, например.
@media (max-width: 400px) {\n html, body { font-size: 15px; }\n}и все em значения будут автоматически пересчитаны.
Тем не менее, у em есть большое предостережение! Наследование!
\n\n\n\nДля примера, <div> с размером шрифта в 16px содержит <p> размером шрифта в 2em, что пересчитывается как 32px для <p>. Теперь добавьте <div> в <p> с размером шрифта в 0.5em, как результат у дива будет размер 16px, как у половины от 32px, а не 8px. И тут нам на помощь приходят rem.
rem относителен размеру шрифта корневого элемента(html элемент). Если размер шрифта html элемента равен 16px, то 1rem = 16px. Rem будет ВСЕГДА относителен корневому элементу, не полагаясь на вложенные элементы. Тем не менее, использование исключительно rem без em может вызвать своеобразные проблемы в плане типографики, так как она может стать слишком большой или маленькой, что приведет к проблемам в масштабируемости.
Значения в процента всегда относительны от другого значения, будь это родительское значение элемента или другое свойство элемента. Проценты широко используются в адаптивном дизайне. Отличный тому пример Bootstrap. Двенадцати колоночный макет бутстрапа имеет значения ширины выставленные в процентах, таким образом они всегда гибкие и подстраиваются относительно родительского элемента.
\n\n\n\nПроценты широко используются для выставления ширины и высоты контейнеров, дивов и для адаптивной графики.
\n\n\n\nШирина и высота viewport свойств относительна ширине/высоте заданного размера viewport.
\n\n\n\nПодробно про viewport единицы вы можете почитать в этой статье.
\n\n\n\n1vw = 1% ширины viewport
1vh = 1% высоты viewport
Viewport в данному случае означает размер окна браузера. Если вы хотите выставить размер элемента, основываясь на ширине viewport, а не на родительском/корневом элементе, то viewport единицы это то, что вам нужно. vw/vh единицы отлично работают с типографикой и широко используются там же.
С тех пор как я часто начал использовать Bootstrap, мой стандартный размер базового шрифта стал в пикселях. Я использую проценты, чтобы выставить ширину и высоту для изображений, контейнеров и дивов, а em и rem для типографики и элементов относящихся к типографике, таким как margin и padding и т. п. Сейчас я играюсь с единицами viewport для адаптивной типографики и нахожу это очень крутым. Экспериментируйте с этими свойствами как можно больше и вы вскоре найдете стиль подогнанный именно для вас.
В этой статье вы узнаете про выставление размера шрифта в пикселях, em, rem, процентах и viewport единицах.
\n","type":"html-css","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/rememviewportjndksfn.jpg"}}},{"node":{"slug":"viewport-edinitsy-v-css","content":"\nВ этой статье вы узнаете про единицы вьюпорта в CSS и варианты их применения.
\n\n\n\n\n\n\n\nViewport единицы уже существуют несколько лет и со временем я вижу рост их применения другими разработчиками. Их полезность заключается в том, что они дают нам возможность выставлять размеры гибким и динамическим образом, без прямого использования JavaScript. Также, для них легко сделать фоллбэк в случае отсутствия поддержки браузером.
\n\n\n\nВ соответствии со спецификацией CSS, процентные вьюпорт единицы относительны размеру изначального блок контейнера, который сам по себе является корневым элементом страницы.
\n\n\n\nViewport единицы это vw, vh, vmin и vmax.
Единица vw представляет собой процентное измерение ширины корневого элемента. Один vw равен 1% ширины вьюпорта.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_L2AVtkxRhUB7zoiajq2NAg.png\")
Тут у нас есть элемент с таким CSS:
\n\n\n\n.element {\n width: 50vw;\n}Когда ширина вьюпорта равна 500px, то 50vw будут высчитаны таким образом:
width = 500*50% = 250pxЕдиница vh представляет собой процентное измерение высоты корневого элемента. Один vh равен 1% высоты вьюпорта.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_kc2g2fzTx3SAkcph9NBt-A.png\")
У нас есть элемент с таким CSS:
\n\n\n\n.element {\n height: 50vh;\n}Если высота вьюпорта равна 290px, то 70vh будет высчитано следующим образом:
height = 290*70% = 202pxВот и всё! Теперь давайте взглянем на другие единицы.
\n\n\n\nЭта единица является минимумом ширины или высоты вьюпорта. Если ширина вьюпорта больше его высоты, то значение единицы будет высчитано, основываясь на высоте.
\n\n\n\nДавайте посмотрим на пример ниже.
\n\n\n\nУ нас есть мобильный телефон в лэндскейп режиме и у элемента на странице есть такая единица как vmin. В этом случае, значение будет высчитано по высоте вьюпорта, так как оно меньше ширины.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_DDoJrXcoVX5loBUkMc17FQ-1024x552.png\")
.element {\n padding-top: 10vmin;\n padding-bottom: 10vmin;\n}Вот как она будет считаться:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_J_Wol0-88jy5cRj7211gKQ.png\")
Как вы уже могли предположить, результат будет считаться таким образом:
\n\n\n\npadding-top = (10% of height) = 10% * 164 = 16.4px \npadding-bottom = (10% of height) = 10% * 164 = 16.4pxЭто прямая противоположность vmin. Значение считается основываясь на максимальной ширине и высоте.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_v-p6MyuVPBKae9ZiIZXufA.png\")
Давайте посмотрим на пример:
\n\n\n\n.element {\n padding-top: 10vmax;\n padding-bottom: 10vmax;\n}![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_INb5s2nv253EyecbEkCBxQ.png\")
Результат бы был высчитан таким образом:
\n\n\n\npadding-top = (10% of width) = 10% * 350 = 35px\npadding-bottom = (10% of width) = 10% * 350 = pxОни берут за основу корневой элемент страницы, в то время как проценты основаны на размере своего контейнера. Поэтому они и отличаются друг от друга и каждый имеет свойственные себе примеры использования.
\n\n\n\nВ следующих секциях мы посмотрим на некоторые примеры использования единиц viewport и на то, как их применять в ваших рабочих проектах.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_5itbhe1WrKZly_Ju2zXPbw.png\")
Единицы вьюпорта идеальны для адаптивной типографики. Для примера, мы можем использовать следующий код для заголовка статьи:
\n\n\n\n.title {\n font-size: 5vw;\n}Размер заголовка будет увеличиваться или уменьшаться в зависимости от ширины вьюпорта. Это как будто бы мы выдали размеру шрифта 5% ширины страницы. Однако, как бы не хотелось, а надо протестировать и смотрим, что получается.
\n\n\n\nОбратите внимание, что шрифт стал очень мелким при мобильных размерах, это очень плохо в плане доступности и UX. Насколько я знаю, минимальный размер шрифта на мобильных устройствах не должен быть ниже 14px. А там у нас выходит уже ниже 10px.
Чтобы решить эту проблему, нам надо дать заголовку минимальный размер шрифта, который не может быть меньше положенной нормы. И тут CSS calc() спешит на помощь!
.title {\n font-size: calc(14px + 2vw);\n}У функции calc() будет основное значение и оно добавит к нему 2vw. Учитывая это, размер шрифта точно не будет слишком маленьким.
Ещё стоит рассмотреть то, как себя будет вести размер шрифта на больших экранах, к примеру на 27” аймаках. Что будет? Ну вы уже наверное предположили. Размер шрифта бахнет аж в 95px, что само по себе уже кошмар. Чтобы предохраниться от этой ситуации мы можем использовать медиа запросы на определённых брейкпоинтах и менять размеры шрифтов.
@media (min-width: 1800px) {\n .title {\n font-size: 40px;\n }\n}Сбрасывая font-size мы можем быть уверены в том, что размер шрифта не будет слишком большим. Тут возможно вам понадобится несколько медиа запросов, но это сугубо ваше личное дело когда и как их использовать в контексте проекта.
Иногда нам надо, чтобы секция забирала 100% высоты виюпорта. Это так называемые полноэкранные секции. Для их создания мы можем использовать вьюпорт единицу высоты.
\n\n\n\n.section {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}Добавив height: 100vh, мы можем точно убедиться в том, высота секции будет в 100% высоту вьюпорта. Также, тут я добавил немного флексбокса, чтобы отцентровать контент вертикально и горизонтально.
На больших экранах вы могли уже обратить внимание на то, что футер не прилипает к концу страницы. Ну и это нормально. Это даже не рассматривается как плохая практика. Однако, тут у нас есть пространство для улучшений. Давайте рассмотрим следующий кейс, в котором и происходит эта ошибка.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_S-PyPpXWDVK0_Cx9h9mEZQ.png\")
Чтобы её решить, нам нужно отдать основному контенту высоту, равную разнице между высотой вьюпорта и суммой хедера и футера. Динамически это довольно хитрая операция, но с помощью единиц вьюпорта всё становится довольно быстро и понятно.
\n\n\n\nЕсли высота хедера и футера фиксированны, то их можно совместить с помощью функции calc():
header,\nfooter {\n height: 70px;\n}\n\nmain {\n height: calc(100vh - 70px - 70px);\n}Это решение не гарантирует того, что оно будет всегда работать, особенно для футера. За всю свою карьеру я никогда не использовал футер с фиксированной высотой, потому что это просто непрактично, особенно на разных размерах экранов.
\n\n\n\nДобавляя 100vh как высоту для body элемента, мы можем использовать флексы для того, чтобы основной контент занимал всё оставшееся место.
body {\n min-height: 100vh;\n display: flex\n flex-direction: column;\n{\n\nmain {\n flex-grow: 1;\n}С учетом этого, наша проблема решена и у нас есть прилипающий футер вне зависимости от длины контента.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_GZPj18NGgpdOsrwiY7TP2w.png\")
Занимаясь подготовкой материала я наткнулся на эту статью и она мне реально понравилась. Так что я возьму пример использования оттуда и объясню его своим способом.
\n\n\n\nПредположим, что у нас есть портфолио для того, чтобы показать свои адаптивные работы и у нас имеется три типа устройства (мобильные, планшеты и ноутбук). В каждом устройстве есть по изображению. Суть в том, чтобы сделать этот контент 100% отзывчивым на CSS.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_1v5lqmbFRzLL_OJ6rLRnhQ.png\")
Используя гриды и единицы вьюпорта, мы можем сделать это адаптивным и динамическим.
\n\n\n\n<div class=\"wrapper\">\n <div class=\"device laptop\"></div>\n <div class=\"device mobile\"></div>\n <div class=\"device tablet\"></div>\n</div>Обратите внимание, что вьюпорт единицы используются в grid-* свойствах. Они также используются для border, border-radius и других свойств. Всё это приведет к флюидному дизайну.
.wrapper {\n display: grid;\n grid-template-columns: repeat(20, 5vw); \n grid-auto-rows: 6vw;\n}\n\n.mobile { \n position: relative;\n z-index: 1;\n grid-column: 2 / span 3;\n grid-row: 3 / span 5;\n}\n \n.tablet {\n position: relative;\n z-index: 1;\n grid-column: 13 / span 7; \n grid-row: 4 / span 4;\n border-bottom: 1vw solid #a9B9dd;\n border-right: solid 3vw #a9B9dd;\n}\n \n.laptop {\n position: relative;\n grid-column: 3/span 13;\n grid-row: 2 / span 8;\n}\n\n.laptop:after {\n content:\"\";\n position:absolute;\n bottom: -3vw;\n left: -5.5vw;\n right: -5.5vw;\n height: 3vw;\n background-color: #a9B9dd;\n border-radius: 0 0 1vw 1vw;\n}Я обратил внимание на случай, который больше всего подходит для редакторских шаблонов. А именно когда дочерний элемент забирает 100% ширины вьюпорта, хотя его родитель ограничен в ней. Давайте рассмотрим пример ниже:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_DjtxL4aIngGA5J05fH7HbQ.png\")
Чтобы достигнуть такого же эффекта, мы можем использовать вьюпорт единицы и свойства позиционирования. Вот наш CSS:
\n\n\n\n.break-out {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n}Давайте разберем всё по полочкам и поймём как это работает.
\n\n\n\nДобавляем width: 100vw
Самый важный шаг, который даст изображению ширину равную 100% вьюпорта.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_vTFWpH84uKolcHE5MhO8sw.jpeg\")
Добавляем margin-left: -50vw
Чтобы отцентровать изображение, нам понадобится выдать отрицательный маргин с половиной ширины вьюпорта.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_7m757QtQai0rfpEoDHRT6A.jpeg\")
Добавляем left: 50%
И наконец, мы отодвинем изображение в правую сторону со значением 50% от ширины его родителя.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_10qY852nZN2HUDjBOf_eNQ.jpeg\")
Ещё один интересный пример, а именно использование вьюпорт единиц для спейсинга между элементами. Его можно использовать с таким значениями как margin, top, bottom и grid-gap. Применяя его, спейсинг будет основываться на ширине вьюпорта и его высоте, что может быть крайне полезным для создания динамических шаблонов.
В случае с модалками нам надо отталкивать их с самого верха вьюпорта. Зачастую я делал это с помощью свойства top и процентов с пикселями. Однако, с единицами вьюпорта, мы можем добавить спейсинг, который может меняться, основываясь на высоте самого вьюпорта.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_p23BlRWcD1yDxCF46-hnJg.png\")
.modal-body {\n top: 20vh;\n}Посмотрите это видео, чтобы посмотреть на результат.
\n\n\n\nШапка это секция, которая показывает нам общую картину на странице или сайте. Часто там есть заголовок и описание, и среди этого всего есть фиксированная высота и падинги для верха и подвала страницы. Тут нам интересны падинги.
\n\n\n\nДля примера, вот как выглядит CSS:
\n\n\n\n.page-header {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n@media (min-width: 800px) {\n .page-header {\n padding-top: 4rem;\n padding-bottom: 4rem;\n }\n}Вертикальный паддинг довольно мал на мобильных устройствах и он становится больше на больших вьюпортах. Как насчет использования единиц вьюпорта? Давайте посмотрим на это.
\n\n\n\n.page-header {\n padding-top: 10vh;\n padding-bottom: 10vh;\n}\n\n.page-header h2 {\n margin-bottom: 1.5vh;\n}Я использовал vh для паддинга в шапке и маргина под заголовком. Обратите внимание как меняется спейсинг!
Ещё один пример динамического спейсинга можно применить в сетке из нескольких элементов. Тут может быть всё: статьи, секции контента, услуги и тп. В нашем примере мы посмотрим на то, как можно использовать вьюпорт единицы для сетки из статей.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_n4PxGmabRTUM_ZQAtZICNA.png\")
Используя их в grid-gap, мы можем получить желаемый результат. Обратите внимание, что я применял функцию calc(). Суть использования calc() в том, чтобы у нас уже был базис для вертикального и горизонтального промежутков.
.wrapper {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n grid-gap: calc(14px + 1vh) calc(14px + 0.5vw);\n}Изучая примеры использования для этих двух единиц, я не нашёл ничего, только этот пример из CSS-tricks.
\n\n\n\nЭтот пример показывает возможность работы с верхним и нижним паддингом в шапке элемента. Паддинг зачастую слишком сокращен, когда вьюпорт довольно мал. Используя vmin, мы можем иметь флюидные верхние и нижние паддинги, которые основываются на вьюпорте с маленькими размерами.
.page-header {\n padding: 10vmin 1rem;\n}Несколько лет назад я написал статью о вертикальных медиа запросах.
\n\n\n\nСейчас я хочу пролить свет на эту тему, так как она имеет прямое отношение к статье, которую вы сейчас читаете.
\n\n\n\nИспользуя вертикальные медиа запросы мы можем проверять находится ли девайс пользователя в лэндскэйп режиме. Если так, то тогда не будет смысла иметь секцию, занимающую всю высоту вьюпорта, применяя height: 100vh.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_qgPdQB23xvXBNy4YBtWKAw.png\")
Чтобы решить эту проблему, мы можем сделать следующее.
\n\n\n\n@media (min-height: 400px) {\n .section {\n height: 100vh;\n }\n}Или мы можем использовать orientation в медиа запросах:
@media (orientation: landscape) {\n .section {\n height: 100vh;\n }\n}Мы можем использовать vh для создания адаптивных элементов, которые поддерживают актуальное состояние соотношения сторон вне зависимости от размера вьюпорта. Давайте на это посмотрим.
Нам нужно решить, какое соотношение сторон нам нужно. Для примера, 9/16.
\n\n\n\nsection {\n /* 9/16 * 100 */\n height: 56.25vw;\n}Я не уверен правильно ли я назвал это, но надеюсь, что вы поймете суть следующих графических примеров.
\n\n\n\nДовольно популярный подход с верхним бордером
\n\n\n\nВы знали, что верхний бордер один из самых используемых элементов на веб сайтах к сегодняшнему дню? В основном его цвет, это такой же как и основной цвет страницы.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_4x1A2_WWsg8UKpz3_OTUeA.png\")
Давайте сделаем изначальным значением бордера 3px. Как конвертировать это фиксированное значение в вьюпорт единицу? Вот как можно это посчитать:
vw = (Pixel Value / Viewport width) * 100Ширина вьюпорта используется для расчета отношения между пикселями и vw единицей.
\n\n\n\nДля примера, вот как добавлен верхний бордер:
\n\n\n\n.header {\n border-top: 4px solid #8f7ebc; \n}В моём случае ширина вьюпорта равна 1440.
\n\n\n\nvw = (4 / 1440) * 100 = 0.277\nИ вот такой CSS мы получим:
\n\n\n\n.header {\n border-top: 0.277vw solid #8f7ebc; \n}Даже лучше, мы можем использовать основное значение в пикселях и единицу вьюпорта.
\n\n\n\n.header {\n border-top: calc(2px + 0.138vw) solid $color-main;\n}Для элементов секций с каунтером или иконкой, мы можем тоже применить единицы вьюпорта. Посмотрите на макет ниже:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_1VR3NGEF5a-xfJkS0mJUOA.png\")
/**\n1. Используем гибкое значение для flex, width и height свойств.\n2. line-height используется для центровки текста вертикально.\n3. Размер шрифта.\n4. Расстояние между кругом и текстом\n**/\n.point:before {\n flex: 0 0 calc(24px + 4vw); /* [1] */\n width: calc(24px + 4vw); /* [1] */\n height: calc(24px + 4vw); /* [1] */\n line-height: calc(24px + 4vw); /* [2] */\n font-size: calc(14px + 1vw); /* [3] */\n margin-right: calc(10px + 0.5vw); /* [4] */\n}![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_6KQUVxezgQKBjuObN8yf5g.png\")
Я сделал инструмент, которые помогает мне в проверке высчитанного значения элементов у единиц вьюпорта. Посмотрите ниже:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_DmeKMXjoSmVPcmJ-uOu3zQ.png\")
Я добавил имя класса и свойство для каждого элемента и при смене размеров вьюпорта, значение будут динамически обновляться. Это куда лучше, чем использование DevTools и высчитывание каждого отдельного элемента.
\n\n\n\n\n\n\n\nЕсть распространенная проблема на мобильных устройствах, которая касается скролла, даже если используется 100vh. Проблема тут в том, что адресная строка находится во вьюхе. Луис Хобрегс написал статью об этом и показал простое и легкое её решение.
.my-element {\n height: 100vh;\n height: calc(var(--vh, 1vh) * 100);\n}А теперь js:
\n\n\n\nlet vh = window.innerHeight * 0.01;\ndocument.documentElement.style.setProperty('--vh', `${vh}px`);![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_u3KmHDsW72H43eSr3-9row.png\")
Применяя 100vw для того, чтобы выдать элементу полную ширину вьюпорта, всё у вас будет отлично работать на Mac OS, так как вертикальный скроллбар там спрятан по-дефолту. Как результат, ширина скроллбара добавлена полной ширине.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_PQ2GypNHM9GOKCRbYDR-fQ.png\")
Однако, пользователи Windows обратят внимание на то, что появился горизонтальный скроллинг. Почему? Потому что ширина скроллбара была добавлена ширине экрана. Скажем, что вы добавили такой CSS:
\n\n\n\n.element {\n width: 100vw;\n}На Windows, высчитанная ширина .element будет равна 100vw + 8.5px, где 8.5px это ширина вертикального скроллбара.
![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_nVyFuQ04gY-d8HTc62L3Zg.png\")
Насколько я знаю, то пока что нет конкретного решения этой проблемы без использования JavaScript, применение которого тут я не советую. Лучше избегать 100vw и использовать альтернативу. Для примера, мы можем применить CSS Grid, чтобы элемент вышел за пределы контейнера, посмотрите на решение в этой статье.
Спасибо Крису Моргану и Килиану Валкхофу за то, что предупредили меня об этой проблеме.
\n\n\n\nИспользуя единицы вьюпорта довольно часто на вашем проекте, например для создание всего макета, доступность становится очень важной. Когда шаблон зумится ближе или отдаляется, элементы с единицами вьюпорат не будут увеличиваться или уменьшаться как вы ожидали. Это станет проблемой для пользователей, которые полагались на зум в браузере.
\n\n\n\nПо словам Сары Суейдан, использование единиц вьюпорта для размеров шрифтов это плохая практика в плане доступности. Лучше комбинировать их с фиксированными значениями, как описано ниже:
\n\n\n\n.title {\n font-size: calc(16px + .3vw);\n}Даже лучше, мы можем использовать CSS единицы em и rem, вместо px. Таким образом у нас будет больше контроля при изменении размера шрифта.
.title {\n font-size: calc(1rem + .3vw);\n}И это будет хорошо. Пожалуйста, убедитесь в том, что использование единиц вьюпорта подходит для того, что вы делаете и не забывайте хорошо тестировать.
\n\n\n\nЯ нашёл этот полезный конвертер из px в vw, который может помочь вам в вашем проекте.
У вас есть какие-нибудь полезные инструменты? Дайте мне знать.
\n\n\n\nЭто всё. У вас есть какие-нибудь комментарии и предложения? Пишите автору на shadeed9.
\n","date":"2021-01-27T17:38:57.000Z","title":"Viewport единицы в CSS","id":"b8a232fa-254e-5bfa-8f47-687718f3808a","excerpt":"В этой статье вы узнаете про единицы вьюпорта в CSS и варианты их применения.
\n","type":"html-css","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/viewportcssjnkjn.jpg"}}},{"node":{"slug":"kak-dovesti-raboty-s-form-do-ideala","content":"\nУ всех у нас были моменты, когда при использовании автозаполнения мы попадали в полный беспорядок. Одни поля остаются пустыми, другие заполняются неверными значениями, а еще одни полагаются на placeholder’ы, которые должны нам сказать то, чем же должна быть заполнена форма. Правильно ли вы в таком случае введете содержимое формы?
\n\n\n\nВозможно единственным способом убедиться в верности заполненного значения будет удаление значения, выставленного автозаполнением, чтобы увидеть заново placeholder. Это расстраивает и вообще так не должно быть, в принципе.
Хорошая форма начинается с правильной разметки.
\n\n\n\nВыключайте autocorrect, когда он вам не нужен. Очень надоедает, когда система пытается что-то исправить, особенно если она не знает что. Это могут быть имена, названия улиц, компаний и городов. Всякий раз, когда вы пишете <input>, спросите себя: является ли потенциальное значение чем-то из общепринятого словаря? Если ответ — нет, то выключайте автокоррекцию. Вам это не нужно и пользователю уж темболее.
<input autocorrect=\"off\" ...>Выключайте его когда он вам не нужен. Похоже, что этот подход можно применить только к полям email, но поверьте, это очень удобно, избегать того, чтобы первый символ email был написан с большой буквы.
\n\n\n\n<input autocapitalize=\"off\" …>Этот атрибут позволяет вам контролировать то, как браузер должен заполнять заданные поля формы. Это ключ к правильно работающему автозаполнению. Популярными значениями для атрибута являются: name, email, username, new-password и current-password, но лист значений которые вы можете использовать может быть буквально бесконечным.
<input autocomplete=\"tel\" …>\n<input autocomplete=\"email\" …>Этот атрибут указывает на то, что поле ввода должно быть обязательно заполнено перед отправкой. Старайтесь использовать его, вместо валидации на JS, тогда, когда это возможно. Лучше дать браузеру сделать эту работу, вместо изобретения колеса с кастомной валидацией.
\n\n\n\nБраузеры по дефолту делают очень много: например, появляется подсказка и input попадает под видимость, когда пользователь пытается засабмитить пустое, требующее заполнение поле.
Так же рекомендуется указывать на обязательность заполнения поля, добавляя подсказку для пользователя рядом с input или label. И даже тогда, когда все поля требуют заполнения.
<input required ...>type и patternСенсорные устройства могут показывать разные, оптимизированные клавиатуры для каждой формы ввода, сразу же, как вы укажете им это сделать. Для примера: цифровая клавиатура на iPhone 6S имеет область-клика на 521% больше, чем дефолтная клавиатура. И это просто идеально для инпутов, которые принимаются только числовые значения.
\n\n\n\nОптимизированные шаблоны клавиатуры могут быть вызваны при использовании type и pattern атрибутов. Есть также новый атрибут inputmode, но пока что он не может использоваться во многих браузерах.
Используйте pattern=\"[0–9]*\" или inputmode=\"numeric\" для вызова числовой клавиатуры.
Используйте type=\"email\", чтобы вызвать email клавиатуру.
Используйте type=\"url\", чтобы вызвать url клавиатуру.
<input pattern=\"\\d*\" ...>\n<input type=\"email\" ...>\n<input type=\"url\" ...>Дизайнеры и разработчики любят пропускать <label>, так как это делает форму чище, а код и стилизацию проще, но он играет важную роль для пользователей. Контроль формы, который полагается только на placeholder, является неидентифицируемым при заполнении. Это является особенной проблемой, тогда когда форма была заполнена с использованием автозаполнения: пользователи не могут сказать, заполнен ли input правильно, пока они не удалят введенное значение.
<label for=\"email\">E-Mail</label>\n<input id=\"email\" …>Placeholder это подсказка для пользователя. Они всегда должны показывать потенциальное значение в ожидаемом формате. Такие placeholder как +49 или https:// идеальны для того, чтобы сказать пользователям, что они должны начать вводить номера телефонов с кода страны, а ссылки с протокола.
<input placeholder=\"Jane Doe\" …>Используйте этот атрибут, чтобы деактивировать поля ввода. Не класс. Я повторяю: не класс. disabled может быть применен ко всем контроллерам форм и говорить браузеру, чтобы пользователь не использовал этот элемент. Добавление дополнительного класса в плане стилизации это ок, но помните, что вы можете также выбрать элемент с использованием input[disabled] в CSS.
<select disabled>\n\t<option value=\"a\">A</option>\n\t<option value=\"b\">B</option>\n</select>\n\n<select>\n\t<option disabled>Choose A or B</option>\n\t<option value=\"a\">A</option>\n\t<option value=\"b\">B</option>\n</select>\n\n<input disabled ...>\n<textarea disabled ...></textarea>Правильная разметка это уже хорошая база для хорошего юзабилити. autocorrect, autocapitalize и autocomplete упрощают заполнение формы, используя type и pattern, вы точно будете знать, что сенсорные устройства показывают оптимизированную клавиатуру и placeholder дает пользователям знать, что им нужно ввести. Но этого недостаточно. Все еще есть множество моментов, в которых вы можете ошибиться, когда дело доходит до стилизации и общей структуры. Вот три отличных ресурса, чтобы улучшить UX ваших форм.
UX Movement. Это блог, который вам поможет улучшить ваши интерфейсы, показывая то, как хороший и плохой дизайн практически влияют на поведение пользователя.
\n\n\n\n\n\n\n\nE-commerce UX исследование — раскрывает то, какие дизайн-проекты вызывают проблемы с юзабилити и как создать опыт взаимодействия в e-commerce по последнему слову техники. Бесплатные статье также содержат некоторые отличные посты, относящиеся к формам и инпутам.
\n\n\n\nСтилизация формы это кошмар. Элементы даются со своим собственным стилем, который варьируется от системы к системе и от браузера к браузеру. Есть даже многостраничное руководство на MDN, объясняющее то, почему так тяжело стилизовать виджеты с CSS?
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/01/1_yy6jDGA2Pga_Kpg6bZA7zQ.png\")
Я провел очень много времени за стилизацией форм, так что принял решение сделать базу дефолтных стилей для распространенных input элементов: formbase устраняет кроссбраузерные баги, несоответствия между системами и применяет красивую дефолтную стилизацию для нескольких элементов input. Ноль зависимостей, без JavaScript, только CSS.
\n\n\n\nАльтернатива formbase это Boilerform: маленький бойлерплэйт из HTML и CSS, который начался с подачи Chris Coyier (A Boilerform Idea) Она уже превратилась в проект, который пытается сделать работу с формами безболезненной.
\n\n\n\nЯ бы хотел завершить этот пост несколькими примерами, показывающими распространенные поля ввода и их правильные атрибуты. Заходите в эту секцию всякий раз, когда вы пишите форму, чтобы убедиться в том, что ваша разметка соответствует лучшим практикам в этом деле.
\n\n\n\nСовет: всегда используйте одно имя, вместо разделения одного целого инпута.
\n\n\n\n<label for=\"name\">Name</label>\n<input id=\"name\" name=\"name\" type=\"text\" autocorrect=\"off\" autocomplete=\"name\" placeholder=\"Jane Doe\"><label for=\"company\">Company</label>\n<input id=\"company\" name=\"company\" type=\"text\" autocorrect=\"off\" autocomplete=\"organization\" placeholder=\"World Wide Web Consortium\">Совет: некоторые страны используют буквы в своих почтовых кодах. Убедитесь, что вы удалили pattern, когда пользователю нужно будет ввести почтовый код одной из таких стран.
\n\n\n\n<label for=\"postalcode\">Postal code</label>\n<input id=\"postalcode\" name=\"postalcode\" type=\"text\" pattern=\"\\d*\" novalidate autocorrect=\"off\" autocomplete=\"postal-code\" placeholder=\"02139\"><label for=\"city\">City</label>\n<input id=\"city\" name=\"city\" type=\"text\" autocorrect=\"off\" autocomplete=\"address-level2\" placeholder=\"Cambridge\"><label for=\"country\">Country name</label>\n<input id=\"country\" name=\"countryname\" type=\"text\" autocomplete=\"country\" placeholder=\"Germany\"><label for=\"tel\">Phone</label>\n<input id=\"tel\" name=\"tel\" type=\"tel\" autocorrect=\"off\" autocomplete=\"tel\" placeholder=\"+1 617 253 5702\"><label for=\"email\">E-Mail</label>\n<input id=\"email\" name=\"email\" type=\"email\" autocapitalize=\"off\" autocorrect=\"off\" autocomplete=\"email\" placeholder=\"janedoe@example.com\"><label for=\"birthday\">Birthday</label>\n<input id=\"birthday\" name=\"birthday\" type=\"date\" autocorrect=\"off\" autocomplete=\"bday\" placeholder=\"YYYY-MM-DD\" disabled>