Привет! 👋
Сегодня мы рассмотрим 10 пользовательских функций JavaScript, которые могут пригодиться в большинстве ваших проектов.
Да, инструмент, который мы все любим и используем для печати, отладки и т.д. Так почему бы не сократить его, чтобы уменьшить набор текста и сэкономить немного времени?
Оглавление
console.log()
const { log } = console;
log("Hello world!");
// Expected output: Hello world!
// SAME AS //
console.log("Hello world!");
// Expected output: Hello world!
Объяснение: мы используем назначение деструктуризации, чтобы иметь возможность извлечь метод log из консоли.
querySelector()
При работе с JavaScript вы могли слышать термин DOM Manipulation и использовать getElementById(), querySelector() и другие методы для доступа к элементам DOM. Итак, давайте упростим работу с ними.
const select = (selector, scope = document) => {
return scope.querySelector(selector);
};
const title = select("h1");
const className = select(".class");
const message = select("#message", formElem);
// SAME AS //
const title = document.querySelector("h1");
const className = document.querySelector(".class");
const message = formElem.querySelector("#message");
Объяснение: Мы передаем 2 параметра в функции select():
1-й: DOM-элемент, который вы хотите выбрать
2-й: Область, из которой вы получаете доступ к этому элементу (по умолчанию = document);
addEventListener()
Обработка событий click, mousemove и других в основном реализуется с помощью метода addEventListener().
const listen = (target, event, callback, ...options) => {
return target.addEventListener(event, callback, ...options);
};
listen(buttonElem, "click", () => console.log("Clicked!"));
listen(document, "mouseover", () => console.log("Mouse over!"));
listen(formElem, "submit", () => {
console.log("Form submitted!");
}, { once: true }
);
Объяснение: Мы передаем 4 параметра в функции listen():
1-й: Элемент, на который вы хотите нацелиться (например, ‘window’, ‘document’ или конкретный элемент DOM).
2-й: Тип события (например, ‘click’, ‘submit’, ‘DOMContentLoaded’ и т.д.).
3-й: Функция обратного вызова
4-й: Оставшиеся необязательные опции (например, ‘capture’, ‘once’ и т.д.). Кроме того, мы используем синтаксис распространения, чтобы при необходимости можно было использовать другие опции. В противном случае их можно опустить, как и в методе addEventListener.
random()
Вы, вероятно, знаете о функции Math.random(), которая генерирует случайные числа от 0 до 1. Вы также можете знать о других хаках, таких как Math.random() * 10, которая теперь должна генерировать случайные числа от 0 до 10. Однако проблема в том, что, несмотря на знание предела, у нас нет особого контроля над минимальным значением.
const random = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
random(5, 10);
// 7
Объяснение: Вот лучшее объяснение от MDN Docs
times()
Иногда мы сталкиваемся с необходимостью выполнить определенную функцию несколько раз.
Конечно, мы можем использовать setInterval() для запуска через каждый интервал времени, например, так:
setInterval(() => {
randomFunction();
}, 5000); // runs every 5 seconds
Проблема в том, что мы не можем указать, сколько раз мы хотим его запустить. Итак, давайте это исправим!
const times = (func, n) => {
Array.from(Array(n)).forEach(() => {
func();
});
};
times(() => {
randomFunction();
}, 3); // runs 3 times
Пояснение:
Array(n) - создает новый массив длиной n.
Array(5); // => [,,]
Array.from() - создает неглубокую копию из массива Array(n). Это помогает нам сделать массив пригодным для использования, заполнив его ‘undefined’. Вы также можете использовать метод Array.prototype.fill() для достижения того же результата.
Array.from(Array(3)); // => [undefined,undefined,undefined]
Примечание: Исследуя эту служебную функцию, я понял, что некоторые программисты предпочитают сначала помещать параметр n, а затем функцию times(n, func). Но для меня это выглядело довольно странно, поэтому я решил поменять их местами, тем самым сделав синтаксис более похожим на синтаксис функции setInterval():
setInterval(func, delay);
times(func, n);
Кроме того, вы называете его setTimes() вместо times() для согласования с методами setInterval() и setTimeout() в зависимости от ваших предпочтений.
slugify()
Вы когда-нибудь сталкивались с необходимостью преобразования заголовков статей вашего блога в “URL-подобный” формат?
JS Utility Functions => js-utility-functions
Вот небольшая полезная функция, которая это делает:
const slugify = (string, separator = "-") => {
return string
.toString() // Cast to string (optional)
.toLowerCase() // Convert the string to lowercase letters
.trim() // Remove whitespace from both sides of a string (optional)
.replace(/\s+/g, separator) // Replace spaces with -
.replace(/[^\w\-]+/g, "") // Remove all non-word chars
.replace(/\_/g, separator) // Replace _ with -
.replace(/\-\-+/g, separator) // Replace multiple - with single -
.replace(/\-$/g, ""); // Remove trailing -
};
slugify("Hello, World!");
// Expected output: "hello-world"
slugify("Hello, Universe!", "_");
// Expected output: "hello_universe"
Пояснение: Вот обсуждение сообщества GitHub
validateEmail()
Когда вы работаете над небольшими проектами и пробуете валидацию электронной почты для вашей формы, вы можете использовать этот супер простой метод для достижения вашей цели. Кроме того, он может быть очень удобен для небольших тестов.
const validateEmail = (email) => {
const regex = /^\S+@\S+\.\S+$/;
return regex.test(email);
};
validateEmail("youremail@org.com"); // true
validateEmail("youremail@com"); // false
validateEmail("youremail.org@com"); // false
Пояснение: Здесь вы можете поиграть с regex.
RegExp.test() проверяет, совпадает ли предоставленное выражение regex со строкой.
Примечание: Для больших проектов я бы рекомендовал использовать такие библиотеки, как validator.js, чтобы они выполняли тяжелую работу за вас.
capitalize()
В JavaScript есть встроенные методы toUpperCase() и toLowerCase(). Однако у нас нет встроенной поддержки капитализации. Так давайте же создадим ее!
const capitalize = (str) => {
const arr = str.trim().toLowerCase().split(" ");
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
}
return arr.join(" ");
};
capitalize("hello, world!");
// Expected output: "Hello, World!"
Пояснение:
split() - превращает строку в массив
arr[i].charAt(0).toUpperCase() - переводит в верхний регистр первую букву каждого слова
arr[i].slice(1) - возвращает оставшиеся буквы слова.
arr.join(” ”) - превращает массив обратно в строку
sanitizeHTML()
Вы когда-нибудь слышали об атаках межсайтового скриптинга (XSS)? Если нет, то это тип атаки, который встречается на большинстве веб-сайтов. Например, при отправке формы злоумышленник может попытаться отправить вредоносные сценарии для взлома системы. Чтобы этого не произошло в ваших формах, вы можете использовать эту удобную функцию, которая ”санирует” код скрипта.
const sanitizeHTML = (str) => {
const div = document.createElement("div");
div.textContent = str;
return div.innerHTML;
};
sanitizeHTML("<h1>Hello, World!</h1>");
// Expected output: "<h1>Hello, World!</h1>"
Пояснения: В отличие от innerHTML, textContent не разбирает строку как HTML, в то время как innerText показывает только ”человекочитаемые” элементы.
Более того, использование textContent может предотвратить XSS-атаки. - MDN Docs
localStorage
Возможно, вы использовали localStorage в своих приложениях для составления списка дел или любых других проектах для сохранения определенных данных в памяти компьютера пользователя. При получении и установке элементов приходится использовать методы JSON parse() и stringify() для достижения желаемого результата. Итак, давайте упростим работу с ними.
const storage = {
get: (key, defaultValue = null) => {
const value = localStorage.getItem(key);
return value ? JSON.parse(value) : defaultValue;
},
set: (key, value) => localStorage.setItem(key, JSON.stringify(value)),
remove: (key) => localStorage.removeItem(key),
clear: () => localStorage.clear(),
};
storage.set("motto", "Eat, Sleep, Code, Repeat");
storage.get("motto");
Пояснение: Если вы не знаете о методах JSON parse() и stringify(), посмотрите MDN Docs для лучшего объяснения.
Примечание: Мне было довольно сложно придумать хорошее название, которое имело бы гораздо больше смысла, чем просто хранилище. Потому что на первый взгляд разработчики могут не понять, относится ли это к ‘localStorage’ или к чему-то другому. Однако вы можете назвать его как угодно. Также, если вы нашли хорошие названия, пожалуйста, сообщите мне об этом в разделе комментариев.
Заключение
Если у вас есть вопросы или предложения, раздел комментариев в вашем распоряжении. Возможно, мы сделаем вторую часть этой статьи с вашими предложениями.
Спасибо за чтение! 🙂