DD Weekly Front-End Seven Questions Подробное объяснение — выпуск 5

DD Weekly Front-End Seven Questions Подробное объяснение — выпуск 5

Введение в серию

Ты с нетерпением ждешь мира, надеюсь, у тебя нетbug. Всем привет! Я Лин Дуан!

Каждую неделю Дэнни будет делиться со всеми семью предварительными вопросами под названием «DD Weekly Seven Questions».

Основная форма серии:3道JavaScript + 2道HTML + 2道CSS, чтобы помочь всем нам укрепить переднюю основу.

Все темы также будут интегрированы вLinDaiDai/niubility-coding-jsизissues, каждый может предложить лучшие идеи решения проблем, спасибо 😁.

Давайте рассмотрим семь вопросов этой недели.

основная тема

1. Реализуйте функцию маски для преобразования «123456» в «##3456», сохраняя только последние четыре символа.

(источник темы:GitHub.com/30-seconds/…)

Прежде всего, позвольте представить смысл названия😄, дело🌰 в следующем:

const mask = (str, maskChar = '#') => {
 // 代码
}
console.log(mask('123456')); // '##3456'
console.log(mask('lindaidai')); // '#####idai'

Сложность этого вопроса не должна быть такой большой, и есть много способов справиться с ним. Пребывание здесь в основном для того, чтобы объяснить, как использоватьpadStartбыть реализованным.

Краткое введениеpadStartкстати, этоES8Недавно добавленная функция экземпляра, имеющая аналогичный эффект, называетсяpadEndФункция:

• String.prototype.padStart
• String.prototype.padEnd

"эффект": позволяет добавлять пустые строки или другие строки в начало или конец исходной строки.

"грамматика":

padStart(targetLength, [padString])

• targetLength: Обязательный параметр, целевая длина, до которой необходимо дополнить текущую строку. Если это значение меньше длины текущей строки, возвращается сама текущая строка.
• padString: необязательный, заполняющая строка. Если строка слишком длинная и длина дополненной строки превышает целевую длину, будет сохранена только самая левая часть, а остальные части будут усечены.Значение этого параметра по умолчанию равно" ".

Например:

'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'

Хаха, другой хочет узнать, как реализоватьpadStartМладший партнер может увидеть статью перед глупостью йо:Подробное объяснение семи предварительных вопросов DD каждую неделю - второй выпуск

"Ближе к дому", вернемся к этому вопросу, сначала разберемся со случаем границы входного параметра, например входногоstrне существует или длина меньше4когда:

const mask = (str, maskChar = '#') => {
 if (!str || str.length <= 4) return str;
}

Во-вторых, мы можем просто сохранитьstrпоследние четыре символа, затем используйтеpadStartдополнить эти четыре символаstr.lengthВы можете следующим образом:

const mask = (str, maskChar = '#') => {
  if (!str || str.length <= 4) return str;
  return str.slice(-4).padStart(str.length, maskChar);
}

• sliceНе влияет на исходную строку
• использоватьpadStartПросто заполните

GitHub.com/Linda ID Love/You…

Во-вторых, ввести NaN и реализовать isNaN.

"Представляем NaN":

• NaNАтрибут — это специальное значение, представляющее нечисловое значение и используемое для указания того, что значение не является числом;
• NaNне равноNaN, т.е.NaN === NaNРезультатfalse;
• использоватьObject.is()Сравнить дваNaNоказатьсяtrue,Прямо сейчасObject.is(NaN, NaN)Результатtrue;
• typeof NaNдля"number";
• методparseInt()а такжеparseFloat()Это значение возвращается, когда указанная строка не может быть проанализирована;
• можно использоватьisNaNопределить, является ли переменнаяNaN,этоJSвстроенные объектыNumberстатический метод на .

(Что касается третьего пункта, вы можете посмотреть мою предыдущую статью «Второе дополнение: определение типа JS —Object.is()和===的区别«Есть упомянутые:Прочтите краткое изложение «Вопрос души Sanyuan-JS» и подарите себе нативную поставку JS (1))

"Реализовать isNaN":

дляisNaNизpolyfillЭто относительно просто реализовать его, просто нужно использоватьNaNЭто не означает, что вы можете владеть:

const isNaN = v => v !== v;

GitHub.com/Linda ID Love/You…

3. Побитовое отрицание, почему~2 = -3?

Далее поделитесьJavaScriptЭто несвязанная тема, в основном потому, что я видел, как маленький партнер в группе спрашивал о побитовом отрицании.~Использование, вот единая популяризация, 😁.

обычно число, например.1а также2,или-1а также-2.

Если мы инвертируем их побитово, результат будет таким:

• ~1 = -2
• ~2 = -3
• ～-1 = 0
• ～-2 = 1

Неважно, если вы этого не понимаете, давайте пошагово рассмотрим процесс внедрения.

На самом деле это разделено здесь"положительные и отрицательные числа", так как процесс инверсии для разных символов разный.

1.1 побитовая инверсия положительных чисел

Давайте сначала посмотрим на побитовую инверсию положительных чисел.

Например, посмотрите на~1 = -2, процесс выглядит следующим образом:

"1. Преобразование десятичного исходного кода в двоичный"

Сначала преобразуйте десятичную1Преобразованный в двоичный исходный код как:0000 0001

"2. Побитовая инверсия исходного двоичного кода"

Затем инвертируйте исходный код побитно:

то есть0000 0001 => 1111 1110

(Вы должны знать, что значит принять ответ, верно?0заменить1,1заменить0)

"3. Преобразование инвертированного двоичного кода в исходный код"

Затем преобразуйте инвертированный двоичный код в исходный двоичный код:

то есть1111 1110 => 1000 0010

Вы, наверное, немного запутались здесь, когда мы ставим"После взятия двоичного счетчика"Перевести в"исходный двоичный файл"На самом деле есть два шага:

1. Сначала нужно определить, что двоичный бит не инвертируется1, это первое, что мы называем"знаковый бит",если1Если это означает, что будет превращаться в число, это отрицательное число, если оно0Говоря о том, что число вот-вот станет положительным числом, бит знака не перемещается; здесь мы можем видеть1111 1110Первый1, так что число, которое нужно перевернуть, является отрицательным числом, и мы его не перемещаем.
2. Тогда инверсия остальных цифр, кроме первой вне+1. Таким образом, будет два процесса:
   • 1111 1110 => 1000 0001
   • 1000 0001 => 1000 0010(Этот шаг является результатом предыдущего шага+1потому что последний номер на предыдущем шаге1, поэтому он добавляет1нужно продвинуться на один бит вперед, поэтому становится1000 0010)

"4. Преобразовать оригинальный двоичный двоичный в десятичный"

Последним шагом является объединение1000 0010Этот двоичный код преобразуется в десятичный.

Первый знаковый бит1, это означает отрицательное число, поэтому результат-2.

ОК👌, давайте сами конвертируем после того, как разберемся с этим шагом~2 = -3Бар:

1. 0000 0010
2. 1111 1101
3. 1000 0011
4. -3

"Резюме положительного побитового отрицания"

1. Десятичный код в двоичный исходный
2. Побитовая инверсия исходного двоичного кода
3. Бит знака зарезервирован, а остальные биты инвертированы +1
4. Преобразование двоичного кода в десятичный

1.2 Побитовая инверсия отрицательных чисел

Побитовая инверсия отрицательных чисел несколько отличается от приведенной выше, в основном потому, что второй и третий шаги меняются местами:

1. Десятичный код в двоичный исходный
2. Бит знака зарезервирован, а остальные биты инвертированы +1
3. Побитовая инверсия исходного двоичного кода
4. Преобразование двоичного кода в десятичный

Например:~-1 =0Процесс преобразования:

"1. Преобразование десятичного исходного кода в двоичный"

Этот шаг аналогичен побитовому отрицанию положительных чисел:

-1 => 1000 0001

"2. Бит знака зарезервирован, а остальные биты инвертированы +1"

Процесс преобразования:

• 1000 0001 => 1111 1110(Отменить)
• 1111 1110 => 1111 1111(+1 после отрицания)

"3. Побитовая инверсия исходного двоичного кода"

Возьмите побитовую инверсию того, что вы только что получили:

1111 1111 => 0000 0000

"4. Двоичный оригинальный код, чтобы превратиться в десятичное время"

0000 0000 => 0

ОК👌, теперь конвертируй сам~-2 = 1Бар:

1. 1000 0010
2. 1111 1110
3. 0000 0001
4. 1

Здесь нет никакой хитрости, главное помнить процесс преобразования и продолжать практиковаться 😂.

Также о~~Использование также можно увидеть в другой статье ошеломленного«Оператор побитового отрицания ~ и другие операторы в JS»

GitHub.com/Linda ID Love/You…

4. ЗнайinsertAdjacentHTMLметод?

Этот метод был изучен, когда я недавно смотрел на код проекта компании, и я не обращал на это внимание раньше.

Сначала для его использования:

"insertAdjacentHTML()"метод анализирует указанный текст какElementэлемент и вставляет полученный узел в указанную позицию в дереве DOM. Он не выполняет повторный анализ используемого элемента, поэтому он не уничтожает существующие элементы внутри элемента. Это позволяет избежать дополнительного шага сериализации, что делает его быстрее, чем работа непосредственно с innerHTML.

Во-вторых, его ролевой объект является элементомelement,Напримерconst container = document.getElementById('container')

Что насчет синтаксиса:

element.insertAdjacentHTML(position, text);

• position:ОдинDOMString, то есть положение вставленного содержимого относительно элемента, и должно быть одной из следующих строк:
  • 'beforebegin': перед самим элементом.
  • 'afterbegin': Вставить перед первым дочерним узлом внутри элемента.
  • 'beforeend': Вставить после последнего дочернего узла внутри элемента.
  • 'afterend': за самим элементом.
• text: должен быть проанализирован как элемент HTML или XML и вставлен в дерево DOM.DOMString.

"кейс":

Давайте посмотрим на его использование, например 🌰 Теперь естьHTMLСтруктура:

<div id="one">我是one</div>

JavaScriptДобавьте это предложение в код:

const one = document.getElementById('one');
one.insertAdjacentHTML('afterend', '<div id="two">我是two</div>');

Окончательный результат в результате теперь выглядит так:

<div id="one">我是one</div><div id="two">我是two</div>

"использование на работе":

В проекте в основном может применяться к таким сценариям: пустой контейнер (можно понимать какdiv), начиная сloadingэффекта, после загрузки данных нужно поставитьloadingУдалите и очистите элемент контейнера и в противном случае повторно отобразите содержимое контейнера.

Здесь я буду использовать таймер для имитации процесса загрузки данных, код реализации выглядит следующим образом:

<body>
 <div id="container"></div>
</body>
<script>
 const container = document.getElementById('container');
  const loading = '<div id="loading">loading</div>'; // loading可能是一个组件
  container.insertAdjacentHTML('beforeend', loading);
  setTimeout(() => {
    container.innerHTML = ''
  }, 2000)
</script>

(Конечно, мы не используем его ради обдуманного использования, что нам подходит, то и лучше)

"безопасный вопрос":

• использоватьinsertAdjacentHTMLВставьте HTML-контент, введенный пользователем, когда использовать после необходимости выхода.

  Например:

  const one = document.getElementById('one');
  // 由于 encodeURI('<div id="two">我是two</div>')会被转译为：
  // %3Cdiv%20id=%22two%22%3E%E6%88%91%E6%98%AFtwo%3C/div%3E
  // 因此最终会被当成 "%3Cdiv%20id=%22two%22%3E%E6%88%91%E6%98%AFtwo%3C/div%3E"字符串渲染
  one.insertAdjacentHTML('afterend', encodeURI('<div id="two">我是two</div>'));
  

• Если это только для вставки текстового содержимого (не узлов HTML), этот метод не рекомендуется, рекомендуется использоватьnode.textContentилиnode.insertAdjacentText(). Поскольку он не требует преобразования HTML-интерпретатора, производительность будет лучше. (Упоминается здесьMDN-insertAdjacentHTMLсодержание)

GitHub.com/Linda ID Love/You…

Пятерки,insertAdjacentHTMLа такжеinsertAdjacentElementразница

Тип второго параметра другой, первый получает是要被解析为HTML或XML元素的字符串, а последний получаетelementэлемент.

const one = document.getElementById('one');
one.insertAdjacentHTML('afterend', '<div id="two">我是two</div>');

const one = document.getElementById('one');
const two = document.createElement('div')
two.innerHTML = '我是two';
one.insertAdjacentElement('afterend', two);

GitHub.com/Linda ID Love/You…

6. Реализовать расположение девяти сеток

Эффект следующий:

Давайте взглянемHTMLКод аспекта:

<div id="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

осталось немногоitemна основеcssКод:

#container {
    /* css代码 */
}

.item {
    font-size: 2em;
    text-align: center;
    border: 1px solid #e5e4e9;
}

.item-1 {
    background-color: #ef342a;
}

.item-2 {
    background-color: #f68f26;
}

.item-3 {
    background-color: #4ba946;
}

.item-4 {
    background-color: #0376c2;
}

.item-5 {
    background-color: #c077af;
}

.item-6 {
    background-color: #f8d29d;
}

.item-7 {
    background-color: #b5a87f;
}

.item-8 {
    background-color: #d0e4a9;
}

.item-9 {
    background-color: #4dc7ec;
}

"Вариант первый":

Первая схема может использовать число с плавающей запятой + процент:

#container {
    width: 150px;
    height: 150px;
}
.item {
    float: left;
    width: 33.33%;
    height: 33.33%;
    box-sizing: border-box;
    font-size: 2em;
    text-align: center;
    border: 1px solid #e5e4e9;
}

"Вариант 2":

также можно использоватьflexПуть макета:

#container {
    width: 150px;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
}
.item {
    width: 33.33%;
    height: 33.33%;
    box-sizing: border-box;
    font-size: 2em;
    text-align: center;
    border: 1px solid #e5e4e9;
}

"третье решение":

Кроме того, он также может быть в состоянии попробоватьgrid?

#container {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
}
.item {
    font-size: 2em;
    text-align: center;
    border: 1px solid #e5e4e9;
}

Справочный ответ:GitHub.com/все еще в процессе/share-…

GitHub.com/Linda ID Love/You…

7. Говорите о волеизъявлении

will-changeдаCSS3Недавно добавленный стандартный атрибут, его функция очень проста, т.е."增强页面渲染性能", когда мы запускаем страницу для рисования большой области с помощью определенных действий, браузер часто оказывается неподготовленным и может только пассивно использовать ЦП для вычислений и перерисовки.Поскольку нет предварительной подготовки, некоторые сложные рендеринг могут появиться вне кадра, заморозить , так далее.

а такжеwill-changeЭто нужно для того, чтобы сообщить браузеру, что он может быть перерисован до того, как сработает реальное поведение, что эквивалентно тому, что браузер загружает ЦП и спокойно сталкивается со следующей деформацией.

Обычно используемые грамматики:

• whil-change: scroll-position;собирается начать катиться
• will-change: contents;Контент, который нужно анимировать или изменить
• will-transform;Атрибуты, связанные с преобразованием, будут изменены (обычно используются)

Уведомление:

• will-changeХотя ускорение можно включить, его нужно использовать в меру.
• Включите ускорение стоимость энергопотребления телефона увеличится
• Следуйте принципу минимизации воздействия при использовании, вы можете включить ускорение для псевдоэлементов и рендерить самостоятельно
• Может быть написан в псевдо-классе, напримерhover, чтобы при удалении элемента он автоматическиremoveТерятьwill-changeохватывать
• При использованииJSДобавленwill-change, обратите внимание на своевременноеremoveпадение, путьstyle.willChange = 'auto'

GitHub.com/Linda ID Love/You…

Справочная статья

Знания бесценны и поддерживают оригинальность.

Справочная статья:

• «Катаясь на волнах — инвентарь ES7, ES8, ES9, ES10, новые функции»
• "МДН-исНаН"
• «Использование CSS3 позволит улучшить производительность рендеринга прокрутки страниц, анимации и т. д.».

послесловие

Ты с нетерпением ждешь мира, надеюсь, у тебя нетbug. Эта статья представлена ​​здесь.

вы можете проводить каждую неделю48Часы рабочего времени 💻 будут потрачены49Часы сна 😴, можно и больше потратить20Я потратил несколько минут на унылые 7 вопросов, накопившихся со временем, я верю, что мы все можем стать свидетелями роста друг друга😊.

Какой? ты спрашиваешь меня почему сериал называетсяDD? потому что呆呆Ага, хаха 😄.

подобно"Лин Дуан"Также парень надеется обратить внимание на паблик Лина.LinDaiDaiИли отсканируйте QR-код ниже👇👇👇.

Время от времени я буду обновлять некоторый внешний контент знаний и свои собственные оригинальные статьи🎉

Ваша поддержка - главная мотивация для меня продолжать творить 😊.

В этой статье используетсяmdniceнабор текста