1. Дросселирование, 2. Переключение в полноэкранный режим, 3. UUid, 4. Работа с временем, 5. Object.keys({}), 6. Преобразование в логическое значение, 7. Передача параметров с объектами
Здесь мы отобрали 7 советов по внешнему интерфейсу, которые будут знакомы с первого взгляда и очень практичны. Давайте посмотрим.
1. Регулирование
Что касается дросселирования, то большинство моих друзей должны понимать это с первого взгляда, поэтому я не буду здесь вдаваться в подробности. Давайте непосредственно посмотрим на соответствующий код:
export const throttle = (() => {
let last = 0
return (callback, wait = 800) => {
let now = +new Date()
if (now - last > wait) {
callback()
last = now
}
}
})()
2. Включить полноэкранный режим и отключить полноэкранный режим
Чтобы повысить производительность полноэкранного режима, давайте рассмотрим различные способы включения и выключения полноэкранного режима.
export const launchFullscreen = (element) => {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen()
}
}
export const exitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}
3. UUId
Как только вы увидите этот заголовок, многие коллеги обязательно зададут вопросы, а UUid вообще не генерируется бэкендом? Да, в этом нет никаких сомнений, давайте посмотрим:
export const uuid = () => {
const temp_url = URL.createObjectURL(new Blob())
const uuid = temp_url.toString()
URL.revokeObjectURL(temp_url)
return uuid.substring(uuid.lastIndexOf('/') + 1)
}
4. Время операции
На время эксплуатации, по моему общению с вами и собственному проектному опыту, я чувствую, что не должно быть необходимости писать много кода самому, и здесь рекомендуется использовать Day.js.
Что касается Day.js, вот краткое введение: это облегченная библиотека JavaScript для обработки времени и даты, поэтому требуется меньше JavaScript для загрузки, анализа и выполнения, поэтому оставьте больше времени для кода.
5. Объект пуст
Какую схему вы обычно используете для суждения об объекте? Вот небольшая хитрость по использованию Object.keys({}).
Object.keys({}).length // 0
Object.keys({key: 1}).length // 1
6. Преобразовать в логическое значение
Преобразование типа «!!», это так просто.
!!fine // false !!"good" // true !!null // false !!No // false
7. Передайте параметры с объектами
Как вы обычно передаете параметры? Как фронтенд-инженер вы должны уметь думать, что вам нужно упаковать параметры в объект, а затем передать их, иначе вы не сможете понять такого рода бесконечные и упорядоченные параметры.
function getItem(price, quantity, name, description) {}
getItem(15, undefined, 'green', 'color')
function getItem(args) {
const {price, quantity, name, description} = args
}
getItem({
name: 'green',
price: 10,
quantity: 1,
description: 'color'
})
Спасибо, что прочитали, с нетерпением жду вашего внимания, давайте вместе добьемся прогресса.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.
