Подготовка к интервью jsliang 2019

Привет друзья, если вы считаете, что эта статья неплохая, не забудьте датьstar, друзья моиstarЭто моя мотивация продолжать обновлять!Адрес GitHub

【2019-08-16】Привет друзья, потому чтоjsliangБиблиотека документации подверглась рефакторингу, некоторые ссылки в этой статье могут быть неработоспособны, иjsliangИзвините за отсутствие сил поддерживать старые статьи на стороне Наггетс. Для тех, кому нужно получать последние статьи, щелкните адрес GitHub выше и перейдите в библиотеку документов, чтобы просмотреть скорректированные статьи.

Дело не в том, что по дороге можно бегать только в определенные сезоны, просто потому, что люди много бегают, дорога устоялась.

Золото, три серебра, четыре сезона смены работы,jsliangВ11 февраля 2019 г.Написал эту статью и начал готовиться к своему путешествию на собеседование.

к17 марта 2019 г.до,jsliangПостройте систему знаний о личных интервью, прочитайте много информации, оставленной старшими, и проведите несколько интервью, исходя из личных потребностей, чтобы еще больше улучшить статью и опубликовать ее.

каталог

Чем отличается передок без закидывания от соленой рыбы?

содержание
каталог
2 Предисловие
2.1 Самостоятельное введение
2.2 Причина смены места работы
2.3 Атака цели
2.4 Открытие темы
Три HTML
3.1 Рекомендации по изучению HTML
3.2 Семантика HTML
3.3 Новая вкладка HTML5
3.4 Распространенные браузеры и их ядра
3.5 куки, сессия, sessionStorage, localStorage
Четыре CSS
4.1 Рекомендации по изучению CSS
4.2 CSS reset
4.3 Блочная модель CSS
4.4 Единицы CSS
4.5 Селекторы CSS
4.6 Общий макет CSS
4.7 Новые возможности CSS3
4.8 BFC
4.9 Встроенные и блочные элементы
4.10 Встроенный, встроенный, связанный и импортированный
4.11 Горизонтальное и вертикальное центрирование
5 JavaScript
5.1 Рекомендации по обучению JS
5.2 Эталонный метод JS
5.3 Прототипы и цепочки прототипов
5.4 Область действия и замыкания
5.5 Мелкие и глубокие копии
5.6 Модульность и компонентизация
5.7 Объектно-ориентированный и процессно-ориентированный
5.8 Защита от сотрясений и дросселирование
5.9 ES6
5.10 Операции с массивами
Шесть Вью
6.1 MVVM
6.2 Жизненный цикл
6.3 Двусторонняя привязка данных
6.4 Virtual DOM
6.5 Компиляция шаблона
6.6 key
6.7 nextTick
6.8 Связь между родительским и дочерним компонентами
Семь мини-программ WeChat
7.1 Основной каталог файла и функция файла
7.2 Жизненный цикл мини-программы WeChat
7.3 Как инкапсулировать запросы данных
7.4 Передача данных страницы
7.5 Методы оптимизации производительности загрузки
7.6 Различия между мини-программами WeChat и нативными приложениями, Vue и H5
7.7 Принципы мини-программ WeChat
Восемь браузеров
8.1 URL-адрес анализа браузера
8.2 Перерисовка и перекомпоновка
8.3 Хранение данных
8.4 Управление памятью и сборка мусора
8.5 Утечки памяти
Девять сетевых протоколов
9.1 Сетевой уровень
9.2 HTTP/HTTPS
9.3 Коды состояния HTTP
9.4 Трехстороннее рукопожатие TCP и четырехсторонняя волна
Десять оптимизаций производительности
10.1 Оптимизация HTML
10.2 CSS-оптимизация
10.3 Оптимизация JavaScript
Одиннадцать алгоритмов
12 других
13 Резюме
14 ссылок
14.1 Об интервью
14.2 О HTML
14.3 О CSS
14.4 О JS
14.5 О других
15 отзывов пользователей

2 Предисловие

Пожалуйста, всегда готовьте свое резюме, будь то из-за плохой интернет-экономики и увольнений, или из-за внутренней борьбы в компании, или из-за того, что вы устали от всего в настоящее время... Только обновляйте себя в любое время, подготовьте свое возобновить, вы Только тогда вы знаете, когда работает лучший вариант.

2.1 Самостоятельное введение

Привет друзья, меня зовут Лян Цзюньронг, мое онлайн-имяjsliang, из-за поклонения передовых воротилтехнический жир(jspang), а поскольку я изучил внешний интерфейс (JavaScript), я взял один для себя.jsliang(JavaScriptLiang), я надеюсь, что смогу пойти дальше по фронтенд-пути, создав свою собственную систему фронтенд-знаний. И поделитесь своим опытом с друзьями, и возьмитесь за руки с друзьями, чтобы двигаться вперед вместе.

Вот личная история:

первый,jsliangЛетом, после вступительных экзаменов в колледж, я послушался совета старшекурсника и начал изучать программирование, в то время я выучил язык C и почувствовал, что самая волшебная вещь в мире — это не что иное, как Дважды тапаю по клавиатуре и нажимаю Enter, а комп все мигает и мигает Ответьте нам! Поэтому, когда я учился в колледже, я изучал C, C#, .Net и т. д. один за другим.

потом, я начал связываться с HTML на втором курсе, тогда я взял "Основы веб-дизайна" и вслед за преподавателем сделал статичный сайт всего из нескольких страниц. Когда я был младшим, я участвовал в специальном учебном классе школы и создал веб-сайт, включающий управление ролями, покупки и другие функции от начала до конца в соответствии с процессом. В то же время, когда я был в классе спецподготовки, я увидел, что бэкэнд использует ThinkPHP (сокращенно TP), и я подумал, что это довольно хорошо, поэтому я повозился и создал свой собственный блог, используя TP 3.2.3 + Bootstrap 3 + MySQL (уже оффлайн).

тогда, Так как я прошел курс Node.js, я также пошел по стопам больших парней, чтобы связаться с Vue, Koa и т. д. В то время я мало знал о npm и т. д. Чтобы бросить это, мой внешний мир открыл дверь.

наконец, я использовал Node.js + Vue + ElementUI + MongoDB в своем выпускном проекте для создания одностраничного приложения для сообщества с такими функциями, как вынос в кампусе и экспресс-доставка.

В мае 2018 года моя семья уговорила меня прийти на собеседование. К счастью, в отличие от других больших шишек, окончание учебы равняется безработице.jsliangЯ сделал предложение на первом собеседовании, поэтому я присоединился к этой компании, в то время я чувствовал, что моя предыдущая студенческая жизнь была напрасной, и я знал только мех ES5, jQuery, HTML/HTML5, CSS/CSS3.

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

Так, в августе 2018 г.jsliangНачните писать Markdown и организуйте заметки, записанные в документе Word с мая по август, вбиблиотека документации jsliang, И вСамородки ДжслянаПервая статья была опубликована на .

18 августа по настоящее время,jsliangПримерно испытал следующее:

Изучите Webpack и создайте многостраничную конфигурацию с помощью Webpack. Затем, к счастью, я только что наткнулся на задачу компании по имитации сайта, поэтому вся фронтенд-команда напрямую использовала мою подпрограмму Webpack + jQuery + VS Code Live Share для совместной разработки!
Изучите апплет WeChat и примените его к проекту апплета WeChat Yi Xiaowei, разработанному Telecom.
Изучите отчет ECharts и используйте его для создания отчета Vue + ECharts для отображения операционных данных AiMusic.
Изучите Node, затем настройте корпоративный веб-сайт (company.jsliang.top) и написал небольшую статью (самое высокое достижение на данный момент, более 1100 лайков).
Изучая Vue, из-за Vue, который я изучил раньше, у меня много работы, и я постепенно забываю его, поэтому я начинаю с основ и готовлюсь написать набор «Vue от 0 до 1».

выше, то естьjsliangкарьера программиста.

Сегодня пиши сюдаjsliangДля того, чтобы сменить место работы, я организовал некоторые материалы фронтенд-интервью, основанные на личных идеях. Если вы считаете, что это хорошо, пожалуйста, поставьте лайк или перейдите на GitHub, чтобы отметить его. Если вы считаете, что что-то не так, пожалуйста, укажите на это, спасибо ~

2.2 Причина смены места работы

Босс Ма однажды сказал, что есть две причины смены работы:

Деньги не дали.
Сердце было обижено.

первый, если вы должны датьjsliangМоя собственная скитания - это позиция, она должна быть такова, что деньги не даются на месте, а труд и выработка не пропорциональны. Перед тем, как я пришел в компанию в мае 2018 года, я узнал из разговора с HR, что повышение зарплаты доступно в августе и феврале каждого года.Первоначальный стек технологий был: HTML, CSS, ES5.

потом, с июня 2018 года по январь 2019 года изученные и примененные в работе технологии включают:

jQuery
Webpack
JSP
Апплет WeChat
Vue
ECharts

Среди них я только что стал постоянным клиентом в августе 2018 года, и я не смею сказать, что моя технология сделала большой шаг вперед, и я не смею сказать, что мой проект внес большой вклад и сколько пользы он принес для компании, поэтому я понятия не имею о повышении моей зарплаты.

В конце января 2019 года я почувствовал, что мой проект также сделан, я также смотрел Sports West Road в 4/5/6 утра, и технология также была улучшена, поэтому я поговорил с HR, надеясь получить повышение зарплаты в феврале, HR сказал, что отчетная речь по итогам года была хорошей. Ладно, позвольте мне поднять мне зарплату. Когда я приступил к работе в феврале, я сказал, что у меня нет списка прибавок к зарплате...

наконец,jsliangУ меня была частная беседа с директором проекта, и я предложил разработать несколько новых продуктов, чтобы компания могла получить новый доход, а я мог еще больше бросить вызов своей технологии. Однако, поскольку наша компания является устоявшейся компанией и в основном зависит от телекоммуникационных проектов для расширения...

энм... так и мое сердце скорбит.

2.3 Атака цели

Целевой город: Гуанчжоу
Целевая зарплата: 10K - 15K
Целевая технология:

1. 熟悉 HTML/HTML5、CSS/CSS3、ES5/ES6。
2. 了解 OOP 概念，并尝试在工作中使用过 OOP 技巧。
3. 对 MVC/MVVM 架构有一定了解，如有 Vue/React/Angular 或者 微信小程序开发经验更佳。
4. 使用过 Bootstrap 或者 ElementUI 等 UI 库，并对前端 UI 库有一定的个人理解。
5. 了解 Git、Webpack 等工具。
6. 对 Java、Node.js 等后端编程有一定了解。
7. 一年及以上工作经验。

Внешний анализ Гуанчжоу:

Требования к зарплате в Гуанчжоу 13K:
1. Опыт работы 2/3 года.
2. Знаком с ООП, может использовать его в работе, может самостоятельно разрабатывать плагины и т.д...
3. Вам не обязательно знать Vue, но вы должны знать React!
Гуанчжоу 15k+ Требования к зарплате:
1. 5 лет + опыт работы.
2. Всемогущий, разбираюсь во фронтенде, знаком с бэкендом, умею писать документы...
3. Вел команду на разработку.
Филиал Гуанчжоуской аномальной компании:
1. Необходимо понимать бэкэнд.
2. Требуется знание Android или IOS разработки.
3. Требования Должен владеть jQuery Family Bucket (jQuery UI, jQuery Mobile и т. д.).

2.4 Открытие темы

Знания этой статьи будут включать HTML, CSS, JS, HTTP, Vue, Webpack, инструменты упаковки, оптимизацию производительности и т. д. Предварительных условий нет.

Что касается интервью, вот три вопроса и ответа, которые я увидел в видео на MOOC.com и с которыми я лично согласен:

В: Когда я получил вопрос на собеседовании, что вы увидели в первый раз? Ответ: контрольная точка
В: Как вы смотрите на бескрайнее море вопросов, найденных в Интернете? Ответ: То же самое следует изменить
Q: Как быть с вопросами интервью? Ответ: От вопроса к знанию и к вопросу

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

Личное свидетельство 1: Почему я всегда хуже других?

При написании бизнес-кода, когда я сталкиваюсь с бизнес-ошибкой, я обычно использую Baidu для этой бизнес-ошибки, чтобы посмотреть, как ее решают пользователи сети. Однако программисты высшего уровня сделают дополнительный шаг: они подумают о том, что лежит в основе этой бизнес-ошибки, и о том, как применить эту технологию для решения проблемы в следующий раз. Так что со временем я действительно не могу сравниться с другими.

Личное свидетельство 2: Отставка — вещь неудобная.

Способ 1. Если собеседование прошло успешно, отправьте в свою компанию заявление об увольнении, пройдите процедуру и подайте заявку на работу через месяц с противоположным часом.

Способ 2: Если собеседование прошло успешно, отправьте в свою компанию заявление об увольнении, спросите, можете ли вы быстро покинуть компанию, и подтвердите время с противоположным часом, когда получите ответ. 【рекомендовать】

Способ 3: Сначала подайте заявление об увольнении и одновременно пройдите собеседование.Если собеседование пройдет успешно, вы подадите заявку на работу на следующий день после месячного процесса первоначальной компании.

Наконец, я желаю вам всего наилучшего здесь~

Три HTML

HTML относится к структурному слою и отвечает за отображение структуры контента.

CSS относится к уровню представления и отвечает за то, как отображается контент.

JavaScript относится к поведенческому слою и отвечает за то, как контент должен реагировать на события.

3.1 Рекомендации по изучению HTML

Справочник фронтенд-инженера
«Учебник по HTML — (стандарт HTML5) — учебник для новичков»

3.2 Семантика HTML

Смысл семантики в том, чтобы делать правильные вещи с правильными тегами. Семантика HTML в том, чтобы сделать содержимое страницы структурированным. Она имеет следующие преимущества:

Удобен для анализа браузера и поисковых систем;
Слепым удобно просматривать веб-страницы;
Для облегчения разделения, обслуживания и понимания веб-сайта теми, кто читает исходный код;

Проще говоря, его можно использовать<header>,<footer>Не нужно ждать новой вкладки H5<div class="header">,Не используйте<div>для хранения абзацев и т. д.

3.3 Новая вкладка HTML5

Новые теги в HTML5 выглядят примерно так:<header>,<footer>,<aside>,<nav>,<video>,<audio>,<canvas>и т.п.

3.4 Распространенные браузеры и их ядра

	Chrome	Firefox	Safari	IE	Opera
Наборный движок	Blink	Gecko	Webkit	Trident	Blink
JS-движок	V8	SpiderMonkey	Nitro	Chakra	V8

Дискриминация HTML для разных ядер браузеров:

Идентификация браузера ядра IE:
Идентификация браузера ядра, отличного от IE:

Для разных ядер браузеров CSS различает:

/* 设置文字不可选取 */
* {
  -moz-user-select: none; /* 火狐 浏览器 */
  -webkit-user-select: none; /* Webkit 浏览器 */
  -o-user-select: none; /* Opera 浏览器 */
  -ms-user-select: none; /* IE10 浏览器 */
  -khtml-user-select: none; /* 早期浏览器 */
  user-select: none; /* 默认 */
}

3.5 куки, сессия, sessionStorage, localStorage

cookies: данные хранятся на стороне браузера. Время истечения срока действия файлов cookie можно установить, если время не установлено, они исчезнут, когда браузер закроет окно.
session: данные хранятся на стороне сервера. сеанс хранит свойства и информацию о конфигурации, необходимые для определенного пользовательского сеанса.
cookiesа такжеsessionРазница в следующем:

Данные cookie хранятся в браузере клиента, а данные сеанса хранятся на сервере.
Фронтенд весь голый господа, безопасности нет вообще, а куки могут использоваться хакерами для обмана данных. Так что важная информация не забудьте сохранить сеанс.
Если сессия слишком велика в течение срока действия, она будет занимать производительность сервера.
Данные, сохраняемые одним файлом cookie, не могут превышать 4 КБ, и многие браузеры ограничивают сайт максимум 20 файлами cookie.

sessionStorage: жизненный цикл существует во вкладке или окне и используется для локального хранения данных в сеансе, которые будут очищены при закрытии окна или вкладки.
localStorage: жизненный цикл является постоянным, если пользователь активно не очистит информацию localStorage, хранящуюся в браузере, он будет существовать вечно.
sessionStorageа такжеlocalStorageМетод работы:setItem,getItemтак же какremoveItem.

localStorage.getItem('name'); // 获取 name 的值
localStorage.setItem('name', 'jsliang'); // 设置 name 的值为 jsliang
localStorage.removeItem('name'); // 删除 name 的值

Четыре CSS

HTML относится к структурному слою и отвечает за отображение структуры контента.

CSS относится к уровню представления и отвечает за то, как отображается контент.

JavaScript относится к поведенческому слою и отвечает за то, как контент должен реагировать на события.

4.2 CSS reset

В процессе работы вы обнаружите, что различные браузеры имеют свои уникальные стили для определенного тега.

А вот во фронтенд-разработке, если не будет принят единый стандарт, то будут всякие странные баги. Поэтому, чтобы уменьшить возникновение ошибок в будущем, разработчики внешнего интерфейса будут сбрасывать стиль CSS, чтобы сделать разработанные веб-страницы максимально похожими в каждом браузере.

НижеjsliangСбросить используемый стиль, конечно, если у ваших друзей другие идеи, вы можете перейти кBaidu/Bing/гуглНайдите и используйте другую версию сброса стиля:

Сброс стиля CSS для jsliang

4.3 Блочная модель CSS

В процессе работы, возможно, маленькому партнеру нужно, чтобы общая ширина блока div была 100px, а потом обнаруживает, что он всегда приподнят на отступ, что из-за определения боксовой модели:

В CSS есть свойство, называемоеbox-sizing.

box-sizing: border-box
box-sizing: content-box

border-boxв целомdivширина и высота, включаяmargin,padding,border.
content-boxв целомdivширина и высота, вышеуказанные элементы не включены.

Как показано выше, еслиdiv, ваш код выглядит следующим образом:

div {
  box-sizing: border-box;
  margin: 10px;
  width: 100px;
  height: 100px;
  padding: 10px;
}

Тогда вся ваша ширина и высота по-прежнему100px.

Однако, если ваш код выглядит следующим образом:

div {
  box-sizing: content-box;
  margin: 10px;
  width: 100px;
  height: 100px;
  padding: 10px;
}

Тогда вся ширина и высота вашей коробки120px.

Если вы обнаружите, что область содержимого разрывается на странице дизайна, проверьте текущуюborder-boxчто лучше цитироватьreset.css, правильноborder-boxЕдиные настройки для удобного управления.

4.4 Единицы CSS

В CSS в дополнение к обычно используемомуpx, есть и другие юниты, о которых друзья могут узнать:

единица измерения	описывать
%	процент
px	пиксель. Точка на экране компьютера`1px`.
em	относительная единица. Вычисляется относительно родительского элемента, если элемент p`font-size: 12px`, внутри него есть тег span, устанавливаем`font-size: 2em`, тогда размер шрифта диапазона в это время составляет:`12 * 2 = 24px`
rem	относительная единица. относительно корневого элемента html`font-size`, если html`font-size: 12px`, тогда для div внутри него устанавливается значение`font-size: 2rem`, то есть div в нем есть`24px`.
rpx	Относительная единица измерения апплета WeChat. 1rpx = ширина экрана / 750 пикселей. На эскизе дизайна размером 750 пикселей 1rpx = 1px.

4.5 Селекторы CSS

Селектор — это шаблон для сопоставления элементов.

О парсере CSS:

HTML анализируется для создания дерева DOM; после анализа CSS результаты анализа необходимо проанализировать вместе с содержимым дерева DOM, чтобы создать дерево визуализации, которое в конечном итоге используется для рисования.

Элементы в дереве рендеринга соответствуют элементам DOM, но не взаимно однозначно: элемент DOM может соответствовать нескольким рендерерам.Например, после переноса текста разные «линии» станут разными рендерерами дерева рендеринга. Существуют также элементы DOM, которые полностью игнорируются деревом рендеринга, например элементы с display:none.

При построении дерева рендеринга браузер определяет, какой рендерер генерировать для каждого элемента в дереве DOM, в соответствии с результатом синтаксического анализа CSS. Для каждого элемента DOM должен быть найден соответствующий селектор во всех правилах стиля, и соответствующие правила должны быть объединены. Здесь фактически выполняется «разбор» селектора.При обходе дерева DOM ищите соответствующий селектор из правил стиля.

Порядок парсинга CSS

В селекторах CSS он будет иметь приоритетАнализ справа налево, потому что при сопоставлении элементов таким образом он может искать как можно меньше, поэтому селекторы лучше писать лаконично.

Общие селекторы CSS

Подстановочный знак:*
Селектор идентификатора:#ID
Выбор класса:.class
Селектор элементов:p,aЖдать……
Выбор потомка:p span,div aЖдать……
Селектор псевдокласса:a:hoverЖдать……
Селектор атрибутов:input[type="text"]Ждать……
Селектор дочерних элементов:li:firth-child,p:nth-child(1)Ждать……

Вес селектора CSS

!important -> встроенные стили -> #id -> .class -> элементы и псевдоэлементы -> * -> наследование -> по умолчанию

4.6 Общий макет CSS

Центрируется по горизонтали и вертикали. Эта планировка является обычным явлением,jsliangЭто также упоминается в этой статье, пожалуйста, объяснитенажмите на ссылку
Компоновка в две колонки. Одна сторона фиксированная, а другая адаптивная.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Two Column Layout</title>
  <style>
    .container {
      display: flex;
    }
    .child-one {
      width: 300px;
      height: 300px;
      background: red;
    }
    .child-two {
      width: 100%;
      height: 300px;
      background: deepskyblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="child-one"></div>
    <div class="child-two"></div>
  </div>
</body>
</html>

Компоновка в три колонки. Как и в макете с двумя столбцами, добавьте фиксированную ширину<div>Просто блоки. Конечно, друзья могут сказать:jsliangвы должны рассмотретьflexсовместимость! эм...Поддерживаются все последние версии браузеров! Пожалуйста, обновите ваш браузер, дорогой~

4.7 Новые возможности CSS3

классический: Знаете ли вы свойства, связанные с CSS3, какие они? Можете ли вы рассказать о некоторых свойствах CSS3, которые вы используете в своей работе?

Итак, каковы новые возможности CSS3?

переход: переход
трансформировать: вращать, масштабировать, перемещать или наклонять
анимация: анимация
Градиент: градиент
Тень: тень
радиус границы: закругленные углы

Для удобства памяти кинем их на этот же HTML файл, а друзья скопируют его в локальный и откроют.Вы можете увидеть небольшой шарик с градиентом,делающий горизонтальное движение.Если навести на него мышку , его ширина будет увеличена и наклонена.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS3 新特性</title>
<style> 
  div {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: linear-gradient(red, orange);
    box-shadow: 10px 10px 5px #888888;
    position: relative;
    transition: width 2s;
    animation: mymove 5s infinite;
  }
  div:hover {
    width:300px;
    transform: rotate(7deg);
  }
  @keyframes mymove {
    from { left: 0px; }
    to { left: 200px; }
  }
</style>
</head>
<body>
  <div></div>
</body>
</html>

4.8 BFC

Что такое БФК?

BFC — это контекст формата блочного уровня, представляющий собой независимую область рендеринга, которая изолирует элементы внутри и снаружи BFC друг от друга, так что расположение внутренних и внешних элементов не влияет друг на друга.

Определенные объявления CSS могут генерировать BFC, и у браузера есть ряд правил рендеринга для сгенерированного BFC, и с помощью этих правил рендеринга можно добиться определенного эффекта макета.

Зачем нужен БФС?

Это может предотвратить перекрытие элементов поля (div содержит ul, а расстояние по вертикали между div и ul зависит от максимального поля между div, ul и li. В это время дайте ul display:inline-block. решить эту проблему )
Очистите внутренний float (div содержит ul, а ul использует float:left, тогда div станет длинной полосой, в это время добавьте правила в div, чтобы он стал BFC)

Как сгенерировать BFC?

display: inline-block
position: absolute/fixed

Это может вообще не учитываться при работе:

float используется редко, по возможности используйте flex
Сброс css обычно устраняет некоторые проблемы и сокращает использование BFC.

4.9 Встроенные и блочные элементы

встроенный элемент: ширина и высота определяются содержимым Элементы, которые находятся на одной линии с другими элементами, называются встроенными элементами. Например:<span>,<i>,<a>Ждать……

элемент блочного уровня: ширина по умолчанию определяется родительским контейнером, а высота по умолчанию определяется содержимым Элементы, которые занимают одну строку и могут устанавливать ширину и высоту, называются элементами уровня блока. Например:<p>,<div>,<ul>Ждать……

В повседневной разработке мы часто используем CSSdisplayсвойства, чтобы сломать барьеры обоих:display: inline-block, чтобы у них было больше состояний.

4.10 Встроенный, встроенный, связанный и импортированный

При ссылке на CSS существует четыре формы:Встроенные стили,Встроенный,Связанотак же какимпорт, четыре режима описаны ниже.

Встроенные стили

Используйте атрибут стиля непосредственно в HTML-разметке, а затем прямо в него напишите код CSS:

<p style="color: #fff; backgournd: deepskyblue;"></p>

Встроенный

писать CSS<head>а также</head>между и с<style>а также</style>Отметьте, чтобы объявить:

<head>
  <style>
    p {
      color: #fff;
      background: deepskyblue;
    }
  </style>
</head>

Связано

поставив<style>Приведенный выше CSS поднимается до указанного файла CSS, а затем<link>способ ссылки на HTML.

<head>
  <link href="reset.css" type="text/css" rel="stylesheet">
</head>

стиль импорта

<head>
  <style>
    @import url(reset.css);
  </style>
</head>

Приоритет разными способами

в приоритете,Встроенные стили > Связано > Встроенный > @импорт импорт.

4.11 Горизонтальное и вертикальное центрирование

Что такое гибкий макет?

Flex — это аббревиатура от Flexible Box, что означает «гибкая компоновка», которая используется для обеспечения максимальной гибкости блочной модели.

Каковы преимущества макета Flex

/* 设置 Flex 模式 */
display: flex;

/* 决定元素是横排还是竖着排，要不要倒序 */
flex-direction: column;

/* 决定元素换行格式，一行排不下的时候如何排 */
flex-wrap: wrap;

/* flex-flow = flex-direction + flex-wrap */
flex-flow: column wrap;

/* 同一排下对齐方式，空格如何隔开各个元素 */
justify-content: space-between;

/* 同一排下元素如何对齐，顶部对齐、中部对齐还是其他 */
align-items: center;

/* 多行对齐方式 */
align-content: space-between;

Как центрировать элементы по горизонтали и вертикали с помощью Flex?

<div class="container">
  <div class="child"></div>
</div>

.container {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  background: deepskyblue;
  display: flex;
  /* 实现元素水平居中 */
  justify-content: center;
  /* 实现元素垂直居中 */
  align-items: center;
}
.child {
  width: 100px;
  height: 100px;
  background: #fff;
}

Помимо Flex, есть ли другие формы для горизонтального и вертикального центрирования?

<div class="container">
  <div class="child"></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background: pink;
  margin: 0 auto;
}
.child {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  /* 下面两种方式均可 */
  /* margin-top: -50px;
  margin-left: -50px; */
  transform: translate(-50%, -50%);
  background: #fff;
}

Кроме того, давайте поговорим о центрировании CSS по горизонтали или по вертикали?

Центрировать по горизонтали:

Встроенные элементы:display: inline-block; text-align: center;
Элементы уровня блока:margin: 0 auto;
Флекс:display: flex; justify-content: center;

Центрировать по вертикали:

высота строки = высота элемента:line-height: height
Флекс:display: flex; align-items: center;

5 JavaScript

HTML относится к структурному слою и отвечает за отображение структуры контента.

CSS относится к уровню представления и отвечает за то, как отображается контент.

JavaScript относится к поведенческому слою и отвечает за то, как контент должен реагировать на события.

5.1 Рекомендации по обучению JS

Продвинутое программирование на JavaScript (третье издание)
«JavaScript, которого вы не знаете»
JavaScript ниндзя Читы
«Введение в стандарты ES6» — Руан Ифэн
«Шаблоны проектирования JavaScript» — Чжан Жунмин
«Шаблоны проектирования JavaScript и практика разработки» — Цзэн Тан

5.2 Эталонный метод JS

Встроенный импорт:

<body>
  <input type="button" onclick="alert('行内引入')" value="按钮"/>
  <button onclick="alert(123)">点击我</button>
</body>

Внутреннее введение:

<script>
  window.onload = function() {
    alert("js 内部引入！");
  }
</script>

внешний импорт:

<body>
  <div></div>

  <script type="text/javascript" src="./js/index.js"></script>
</body>

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

Запись встроенных или вставка в HTML не рекомендуется<script>, из-за порядка синтаксического анализа браузера, если анализируется код JS, такой как бесконечный цикл, страница зависает.
Рекомендуется выполнять код после события onload, то есть после рендеринга HTML и CSS.

5.3 Прототипы и цепочки прототипов

оprototype,__proto__,new,call(),apply(),bind(),thisЭти очки знаний, потому что пространство слишком длинное,jsliangОн был извлечен и объяснен кратко и подробно.

Очки знаний по интервью — прототип JS и цепочка прототипов

Соответствующие очки знаний высвобождаются ниже:

пример__proto__свойство (прототип), равное его конструкторуprototypeАтрибуты.
Object.proto === Function.prototype
Function.prototype.proto === Object.prototype
Object.prototype.proto === null

5.4 Область действия и замыкания

В JS больше всего сбивает с толку область действия.

В традиционных бэкэнд-языках (таких как C) пара фигурных скобок{}Это область на уровне блока, переменные в области не будут влиять друг на друга, но в JS, как условный оператор if{}Это не считается отдельной областью действия:

var x = 1;
console.log(x); // 1
if(true) {
  var x = 2;
  console.log(x); // 2
}
console.log(x); // 2

Поэтому иногда нам нужно обойти это и создать временную область с самовыполняющейся функцией:

function foo() {
  var x = 1;
  console.log(x); // 1
  if(x) {
    (function(x) {
      console.log(x); // 1
      var x = 2;
      console.log(x); // 2
    })(x)
  }
  console.log(x); // 1
}
foo();

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

Итак, что такое замыкание?

Простое определение закрытия: Функция A содержит функцию B, а функция B использует переменные функции A, тогда функция B называется замыканием.

Или: замыкание — это функция, которая может читать переменные внутри других функций.

function A() {
  var a = 1;
  function B() {
    console.log(a);
  }
  return B();
}

Классическая проблема закрытия: теперь у нас есть кусок кода:

for(var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

Что выводит этот код?

Итак, есть ли способ вывести 0 1 2 последовательно?

Используйте пусть:

for(let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

Здесь каждый блок let и код объединяются, чтобы сформировать область на уровне блока, и когда setTimeout() печатает, она ищет i в ближайшей области на уровне блока, поэтому по очереди печатает 0 1 2.

Если это непонятно, мы можем выполнить следующий код:

for(let i = 0; i < 3; i++) {
  console.log("定时器外部：" + i);
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

На данный момент вывод браузера, в свою очередь, таков:

定时器外部：0
定时器外部：1
定时器外部：2
0
1
2

т. е. сначала закодировать или выполнитьforпетля, но когдаforконец исполненияsetTimeout, это оставит след, так что вот онconsole.log(i), я могу найти ближайшее определение переменной в этом блоке.

Решите проблему закрытия с помощью немедленно выполняемых функций

for(let i = 0; i < 3; i++) {
  (function(i){
    setTimeout(function() {
      console.log(i);
    }, 1000);
  })(i)
}

Выше мы объяснили замыкание и способ решения замыкания.

5.5 Мелкие и глубокие копии

Что такое глубокая копия? Что такое поверхностная копия?

Проще говоря, есть два объекта a и b, b = a, когда вы изменяете a, значение b изменилось, которое называется неглубокому копию в это время. Если нет никаких изменений, он называется глубокой копией.

Почему происходит глубокое копирование и поверхностное копирование?

Сначала нам нужно знатьОсновные типы данных (число, строка, логическое значение, null, undefined)а такжеСправочные типы данных (неупорядоченные объекты, данные и функции).
Затем в примитивных типах данных, таких как:let a = 1; let b = a; a = 2; console.log(b). Когда мы пытаемся написать так, b открывает новую память в памяти стека, поэтому значение b не меняется, оно по-прежнему равно 1.
Затем в справочном типе данных, например.let a = [1, 2, 3], b = a; a[0] = 3; console.log(b). Когда мы пытаемся написать так, b будет ленивым и ссылаться на тот же адрес памяти, что и a, поэтому модификация a повлияет на b, заставив b стать [3, 1, 3].
Наконец, мы можем знать, что в ссылочных типах данных будет проблема поверхностного копирования.

Как реализовать глубокую копию?

Сначала мы пытаемся решить глубокую копию с помощью рекурсии:

function deepClone(obj) {
  let objClone = Array.isArray(obj) ? [] : {};
  if(obj && typeof obj === "object") {
    for(key in obj) {
      if(obj.hasOwnProperty(key)) {
        // 判断 obj 子元素是否为对象，如果是，递归复制
        if(obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          // 如果不是，简单复制
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

let a = [1, 2, 3, 4];
let b = deepClone(a);
a[0] = 2;
console.log(a, b);

// Console
// a = [2, 2, 3, 4];
// b = [1, 2, 3, 4];

разобрать и преобразовать в строку с использованием объектов JSON

function deepClone(obj) {
 let _obj = JSON.stringify(obj);
 let objClone = JSON.parse(_obj);
 return objClone
}
let a = [0, 1, [2, 3], 4];
let b = deepClone(a);
a[0] = 1;
a[2][0] = 1;
console.log(a, b);

// Console
// a = [1, 1, [1, 3], 4];
// b = [0, 1, [2, 3], 4];

5.6 Модульность и компонентизация

Во фронтенд-разработке, с разделением фронтенда и бэкенда, фронтенд-сообщество продолжает расти, фронтенд может делать все больше и больше вещей, задачи все тяжелее и тяжелее, а код становится все длиннее и длиннее. подобноjsliangКогда я использую jQuery для личного развития, на каждом шагу появляются тысячи строк кода, что выглядит немного беспорядочно в редакторе. Если вы столкнетесь с редактором, в котором нет свертывания кода, это еще сложнее.

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

первый, предлагается CommonJS. Как Node.js, так и Webpack поддерживают CommonJS. Он предусматривает, что файл является модулем, а переменные, определенные внутри файла, принадлежат этому модулю и не будут подвергаться воздействию внешнего мира, чтобы загрязнить правила глобальные переменные. В CommonJS экспортируйте через exports или module.exports через requireсинхронная загрузканеобходимые модули. Поскольку он представляет собой синхронно загружаемые модули, он чаще используется на стороне сервера.

потом, Из-за проблемы с тем, что CommonJS может загружаться только синхронно, AMD предложила модуль асинхронной загрузки в соответствии с характеристиками браузера. В то же время у AMD есть проблема, что при использовании require.js все модули должны быть загружены заранее.

тогда, по вопросу AMD, выдвинул CMD: в виде загрузки по требованию можно звонить туда, куда нужно, вместо того, чтобы ждать, пока все модули загрузятся, а потом парсятся.

наконец, ECMA International выпустила модули ES6. В ES6 модули экспортируются с помощью ключевого слова export, а на код ссылаются с помощью ключевого слова import. Конечно, из-за того, что многие производители браузеров ES6 еще не поддерживаются в браузерах, текущая общепринятая практика заключается в том, чтобы сначала скомпилировать ES6 в require через babel.

Конечно, JS модульный,jsliangДумая об этом куске CSS в моем проекте, я действительно не представляю его обзор! Поэтому нам также нужно знать, что для того, чтобы легко управлять CSS, у больших парней все еще есть дела: Less и Sass, которые делают написание CSS более организованным и целенаправленным.

Говоря о модульности, мы можем упомянуть, между прочим, компонентность.В начале, чтобы различать их,jsliangЭто также большое количество статей о Baidu, и, наконец, мне удалось прикрыться.Позвольте мне объяснить, что, как мне кажется, можно объяснить:

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

Итак, на данный момент мы можем упомянуть фронтенд-инжиниринг: весь процесс разработки спланирован так, чтобы повысить эффективность разработки всей команды.

В начальном инжиниринге самое главное — улучшитьКодирование -> Тестирование -> ОбслуживаниеТри стадии эффективности производства. Координация команды очень важна, разделение каждой задачи на каждого члена для достижения максимальной эффективности работы — это то, что менеджеры любят видеть больше всего. Вышеупомянутые модульные и компонентные приложения являются частью фронтенд-инжиниринга и предназначены для облегчения командной разработки и повышения эффективности производства в некоторых сложных проектах.

5.7 Объектно-ориентированный и процессно-ориентированный

Что такое ориентация на процесс и ориентация на объект?

Технологический процесс - это когда строишь стену, сам ее эксплуатируешь, когда укладываешь первый слой: кладешь кирпичи, клеишь цемент, кладешь кирпичи, клеишь цемент; затем, когда второй слой, продолжаешь класть кирпичи, клеить цемент , положить кирпичи, приклеить цемент……
Объектно-ориентированный означает, что при возведении стены вам будут помогать достраивать другие, а первый слой будет извлекаться, то есть размещение кирпичей — это первое действие, а цементирование — второе действие, а затем к этим двум действиям добавить этапы число действий, и, наконец, скажите роботу, что существует n слоев, и пусть робот сделает всю работу за вас.

Зачем вам нужно объектно-ориентированное письмо?

более удобный
Может быть повторно использован для уменьшения избыточности кода
Высокая сплоченность и низкая связанность

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

Писать объектно-ориентированный код?

function Person(name, phone) {
  this.name = name;
  this.phone = phone;
  this.eat = function() {
    console.log(name + " 吃饭");
  }

  return this;
}

let p1 = new Person("jsliang", "18818881888");
console.log(p1.name); // jsliang
p1.eat(); // jsliang 吃饭

Конечно,jsliangЯ могу писать только здесь, а потом напишу о точках знаний, таких как шаблоны проектирования.

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

5.8 Защита от сотрясений и дросселирование

оЗащита от тряски и дросселирования,jsliangДанные намеренно объединены:

Защита от тряски и дросселирования
Перерисовка и перекомпоновка
Браузер анализирует URL
Разрешение доменного имени DNS
Трехстороннее рукопожатие TCP и четырехсторонняя волна
Браузер отображает страницу

Друзья могут пойти в«Значения интервью — JS Anti-Shake и Throttling»Проверить.

5.9 ES6

ES6 — это большая точка знаний.Если компания, с которой вы проводите собеседование, не из тех, что «разорвали превратности жизни», то обязательно будут некоторые вопросы ES6, такие как:

Разговор о разнице между let, var и const
Разговор об обещаниях и о том, как их использовать

потому чтоjsliangМне кажется, что я даже не вошел в дверь ES6, так что меня здесь не будет.быть умным, порекомендуйте учебник Ruan Yifeng:

«Введение в ECMAScript 6 — Руан Ифэн»

Я надеюсь, что мои друзья смогут что-то почерпнуть после прочтения и использовать в своей работе.

5.10 Операции с массивами

В JavaScript одна из наиболее часто используемых операций — это, несомненно, операции с массивами.Вот несколько вариантов использования массивов:

map: пройтись по массиву и вернуть новый массив, состоящий из возвращаемого значения обратного вызова
forEach: невозможно сломать, вы можете использовать команду throw new Error в try/catch, чтобы остановить
filter: фильтр
some: если один элемент возвращает true, все верно
every: Если один элемент возвращает false, то и все в целом является ложным.
join: создать строку, указав конкатенатор
push / pop: Нажмите и вытолкните в конце, измените исходный массив, верните элемент push/pop [ошибка]
unshift / shift: Головка толкается и выталкивается, исходный массив изменяется, и элемент операции возвращается [ошибка]
sort(fn) / reverse: Сортировка и реверсирование, изменение исходного массива
concat: Объединение массивов, не влияет на исходный массив, неглубокая копия.
slice(start, end): возвращает новый усеченный массив без изменения исходного массива.
splice(start, number, value...): возвращает массив, состоящий из удаленных элементов, значением является вставленный элемент, и изменяет исходный массив.
indexOf / lastIndexOf(value, fromIndex): Найдите массив элементов, возвращает соответствующий индекс
reduce / reduceRight(fn(prev, cur)， defaultPrev): Выполнять парами, prev — возвращаемое значение последней упрощенной функции, а cur — текущее значение (начиная со второго элемента).

Я считаю, что маленькие друзья уже играют набор на работе, или какjsliangпросто используйте это простоpush,mapЭти несколько заинтересованных друзей могут найти кое-что на Baidu/bing/google.странные трюки, может быть, это значительно повысит эффективность работы~

Шесть Вью

рекомендовать:

технический жир
МООК

6.1 MVVM

В архитектуре MVVM нет прямой связи между представлением и моделью, но взаимодействие осуществляется через модель представления.Взаимодействие между моделью и моделью представления является двунаправленным, поэтому данные представления будут синхронизированы с моделью, а изменения Данные модели также будут немедленно реагировать на представление.

ViewModel связывает слой View и уровень Model через двустороннюю привязку данных, а синхронизация между View и Model происходит полностью автоматически без вмешательства человека, поэтому разработчикам нужно только обращать внимание на бизнес-логику, не нужно вручную манипулировать DOM, Не нужно обращать внимание на синхронизацию состояния данных, комплексное обслуживание состояния данных полностью управляется MVVM.

М - МОДЕЛЬ. Model представляет собой модель данных, или вы можете определить модификации данных и операции в MODEL.
V-вид. Представление представляет компонент пользовательского интерфейса, который отвечает за преобразование модели данных в отображение пользовательского интерфейса.
ВМ - ViewModel. ViewModel прослушивает изменения в данных модели, контролирует поведение представления и обрабатывает взаимодействие с пользователем.Простое понимание — это объект, который синхронизирует представление и модель, соединяя модель и представление.

6.2 Жизненный цикл

Можете ли вы кратко описать жизненный цикл Vue?

До/после создания: вbeforeCreatedstage, элемент монтирования экземпляра Vue$elи данные объектов данных и события не были инициализированы. существуетcreatedНа этапе данные объекта данных экземпляра Vue и операции метода имеют,$elЕще нет.
До/после загрузки: вbeforeMountсцена,renderКогда функция вызывается в первый раз, $el и данные экземпляра Vue инициализируются, но они все еще монтируются на виртуальном узле DOM. существуетmountedНа этом этапе экземпляр Vue подключается к фактической операции DOM для завершения, и во время этого процесса обычно выполняется взаимодействие Ajax.
Перед обновлением / после: Вызов до обновления данных, то есть до виртуального рендеринга DOM и Patch, вызовbeforeUpdate. Срабатывает после повторного рендеринга и исправления виртуального DOM.updatedметод.
До/после уничтожения: вызывается перед уничтожением экземпляра.beforeDestory, экземпляр все еще может быть вызван в это время. в исполненииdestroyПосле метода изменения данных больше не будут запускать периодическую функцию, указывая на то, что экземпляр Vue был освобожден от отслеживания событий и привязки к DOM в это время, но структура DOM все еще существует.

Каков жизненный цикл Vue?

Процесс экземпляра Vue от создания до уничтожения — это жизненный цикл. Серия процессов от создания, инициализации данных, компиляции шаблонов, монтирования DOM -> рендеринга, обновления -> рендеринга и уничтожения называется жизненным циклом Vue.

Vue имеет несколько жизненных циклов, каковы их основные функции?

8, до создания/после создания, до монтирования/после монтирования, до обновления/после обновления, до уничтожения/после уничтожения. Роль жизненного цикла Vue заключается в том, чтобы помочь нам лучше манипулировать данными в бизнес-коде и реализовывать связанные функции на протяжении всего его жизненного цикла.

Какие хуки будут запускаться Vue при загрузке первой страницы?

Сработают 4 лайфхука: до создания/после создания, до маунта/после маунта

В каком цикле завершается рендеринг DOM?

существуетbeforeMountedкогда он выполняетсяrenderфункция, инициализирует $el и данные, но в это время он все еще подключен к виртуальному узлу DOM, а затем находится вmountedКогда рендеринг DOM завершен, мы обычно также выполняем взаимодействие Ajax.

6.3 Двусторонняя привязка данных

Vue принимаетзахват данныхкомбинироватьИздатель-подписчикрежим черезObject.defineProperty()Чтобы захватить сеттеры и геттеры каждого свойства, публикуйте сообщения подписчикам при изменении данных и запускайте соответствующие обратные вызовы прослушивателя.

Шаг 1: объект данных Observe должен быть рекурсивно пройден, включая свойства объекта подсвойства, а также сеттеры и геттеры. В этом случае присвоение значения этому объекту вызовет установщик, после чего вы сможете отслеживать изменения данных.
Шаг 2: Compile анализирует инструкции шаблона, заменяет переменные в шаблоне данными, затем инициализирует и отображает представление страницы, привязывает функцию обновления к узлу, соответствующему каждой инструкции, и добавляет подписчиков для отслеживания данных. , получить уведомление, обновить данные.
Шаг 3: Подписчик Watcher является связующим звеном между Observer и Compile.Главное, что нужно сделать:
1. Добавьте себя к подписчику свойства (dep) при его создании.
2. Должен сам по себе иметь метод обновления ()
3. ожидающее изменение свойстваdep.notice()Получив уведомление, он может вызвать свой собственныйupdate()метод и вызовите связанный обратный вызов в Compile, после чего все готово.
Шаг 4: MVVM служит точкой входа для привязки данных, интегрирует Observer, Compile и Watcher, отслеживает изменения данных собственной модели через Observer, анализирует и компилирует инструкции шаблона через Compile и, наконец, использует Watcher для установления связи между Observer и Compile. , Мост, чтобы добиться изменения данных -> обновление представления, изменение взаимодействия просмотра (ввод) -> эффект двусторонней привязки изменения модели данных.

<body>
  <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
  </div>
  
  <script>
    window.onload = function() {
      let obj = {};
      Object.defineProperty(obj, "txt", {
        get: function() {
          return obj;
        },
        set: function(newValue) {
          document.getElementById("txt").value = newValue;
          document.getElementById("show").innerHTML  = newValue;
        }
      })
      document.addEventListener("keyup", function(e) {
        obj.txt = e.target.value;
      })
    }
  </script>
</body>

Почему прокси используется в Vue 3.0?

При использовании Object.defineProperty для двусторонней привязки данных в Vue он информирует пользователя о том, что массив можно отслеживать, но только push(), pop(), shift(), unshift(), splice(), sort( ) массива отслеживаются. ) и reverse(), свойства других массивов не могут быть обнаружены.
Object.defineProperty может только захватить свойства объекта, поэтому при обходе свойств каждого объекта, если значение свойства также является объектом, который необходимо пройти в глубину, тогда это более проблематично, поэтому при сравнении способности прокси чтобы полностью захватить объект, выберите Proxy.
Почему Proxy появился, когда был написан Vue 2.0, но You Da его не использовал? Поскольку в то время среда es6 не была достаточно зрелой, совместимость была плохой, особенно это свойство не могло быть совместимо с полифиллом. (polyfill — это js-библиотека, специально разработанная для решения проблем с совместимостью js — js patcher)

6.4 Virtual DOM

Посмотреть вrenderсерединаcreateElement, вместо того, чтобы генерировать реальный элемент DOM, на самом делеcreateElementописанный какcreateNodeDescription, потому что он содержит информацию, которая сообщает Vue, какие узлы необходимо отображать на странице.

Поэтому мы описываем такие узлы как «виртуальные узлы» или сокращенно VNodes. «Виртуальный DOM» — это то, что мы называем всем деревом VNode, построенным из дерева компонентов Vue.

Как фигура, я имею честь сказать своим друзьям: "Вообще-то я тоже не понимаю Virtual DOM!"

Тем не менее, всегда будут упоминаться некоторые случаи интервью, поэтому вот несколько материалов, о которых вы можете узнать больше:

«Виртуальный дом анализа принципов Vue»
"Краткий анализ виртуального дома (реализация Vue)"

Другие должны быть найдены друзьями.Если вы считаете, что есть хорошие документы/видео для разбора Virtual DOM, вы также можете порекомендовать их~

6.5 Компиляция шаблона

Понимание компиляции шаблонов Vue

В Vue шаблон сначала преобразуется в дерево AST, а затем функция рендеринга возвращает VNode (виртуальный DOM-узел Vue).

Шаблон компилируется в синтаксическое дерево AST (абстрактное синтаксическое дерево — древовидное представление абстрактной синтаксической структуры исходного кода) компилятором компиляции. compile — это возвращаемое значение createCompiler, которое используется для создания компилятора. Кроме того, компиляция также отвечает за параметры слияния.
AST получит функцию рендеринга через генерацию (процесс преобразования синтаксического дерева AST в строку функции рендеринга), а возвращаемое значение рендеринга — это VNode, который является виртуальным узлом DOM Vue, который содержит имена тегов, дочерние узлы, и текст ждать.

6.6 key

Функция ключа состоит в том, чтобы определить, совпадают ли два узла при обновлении компонента. Если они совпадают, используйте их повторно, если отличаются, удалите старые и создайте новые.

6.7 nextTick

Применение:Vue.nextTick( [callback, context] )
параметр:
- {Function} [callback]
- {Object} [context]
Описание: Выполняет отложенный обратный вызов после завершения следующего цикла обновления DOM. Используйте этот метод сразу после изменения данных, чтобы получить обновленную модель DOM.
Случай:

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick().then(function () {
  // DOM 更新了
})

Для большего понимания nextTick,jsliangНе будь уродом, друзья, которым нужно учиться, могут проверить:

«Принцип и использование Vue.nextTick»

Или найдите лучшие ресурсы самостоятельно.

6.8 Связь между родительским и дочерним компонентами

Что касается связи между родительскими и дочерними компонентами в Vue, я считаю, что небольшие партнеры, которые часто разрабатывают Vue, болееjsliangзнать намного больше.

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

《Использование $emit во Vue》

Давайте поговорим об использовании bus.js для реализации связи между компонентами, не являющимися родительскими и дочерними:

Допустим, на работе есть три файла .vue: A.vue, B.vue, C.vue. A.vue — это главная страница, B.vue и C.vue аналогичны верхней панели навигации и нижней панели навигации. Теперь нажатие на B.vue переключит маршрут, и C.vue необходимо получить информацию, переданную B.vue.

<template>
  <div>
    <top-nav></top-nav>
    <div class="container">
      <router-view></router-view>
    </div>
    <bottom-nav></bottom-nav>
  </div>
</template>

import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue();

export default bus;

<template>
  <div class="bottom-nav">
    <div class="nav-one" @click="goToPage({path: '/HomeIndex', meta:'首页'})">
      <i class="icon-home"></i>
      <span>首页</span>
    </div>
  </div>
</template>

<script>
  import bus from '../utils/bus'
  export default {
    methods: {
      goToPage(route) {
        this.$router.push(route.path);
        bus.$emit('meta', route.meta);
      }
    }
  }
</script>

<template>
  <div class="top-nav">
    <span class="title">{{title}}</span>
  </div>
</template>

<script>
  import bus from '../utils/bus'
  export default {
    data() {
      return {
        title: ''
      }
    },
    created() {
      bus.$on('meta', msg=> {
        this.title = msg;
      })
    }
  }
</script>

Семь мини-программ WeChat

Мини-программа WeChat, называемая мини-программой, английское название мини-программы, представляет собой приложение, которое можно использовать без загрузки и установки.Оно реализует мечту о приложении «на кончиках ваших пальцев», и пользователи могут сканировать или искать, чтобы открыть приложение.

7.1 Основной каталог файла и функция файла

- component —————————————————— 组件文件夹
  - navBar                  —— 底部组件
    - navBar.js             —— 底部组件的 JS 代码
    - navBar.json           —— 底部组件的配置文件
    - navBar.wxml           —— 底部组件的 HTML 代码
    - navBar.wxss           —— 底部组件的 CSS 代码
- pages  ————————————————————— 页面文件夹
  - index                   —— 首页
    - index.js              —— 首页的 JS 代码
    - index.json            —— 首页的配置文件
    - index.wxml            —— 首页的 HTML 代码
    - index.wxss            —— 首页的 CSS 代码
- public ————————————————————— 图片文件夹
- utils —————————————————————— 工具文件夹
  - api.js                  —— 控制 API 的文件
  - md5.js                  —— 工具 - MD5 加密文件
  - timestamp.js            —— 工具 - 时间戳文件
- app.json ——————————————————— 设置全局的基础数据等
- app.wxss ——————————————————— 公共样式，可通过 import 导入更多
- project.config.json ———————— 项目配置文件

7.2 Жизненный цикл мини-программы WeChat

onLoad(): Запускается при загрузке страницы.
onShow(): срабатывает, когда страница отображается/переключается на передний план.
onReady(): срабатывает, когда завершается первоначальный рендеринг страницы.
onHide(): срабатывает, когда страница скрыта/вырезана на фоне.
onUnload(): срабатывает, когда страница выгружается.

7.3 Как инкапсулировать запросы данных

Интерфейс пакета:

// 将请求进行 Promise 封装
const fetch = ({url, data}) => {

  // 打印接口请求的信息
  console.log(`【step 1】API 接口：${url}`);
  console.log("【step 2】data 传参：");
  console.log(data);

  // 返回 Promise
  return new Promise((resolve, reject) => {
    wx.request({
      url: getApp().globalData.api + url,
      data: data,
      success: res => {
        
        // 成功时的处理 
        if (res.data.code == 0) {
          console.log("【step 3】请求成功：");
          console.log(res.data);
          return resolve(res.data);
        } else {
          wx.showModal({
            title: '请求失败',
            content: res.data.message,
            showCancel: false
          });
        }

      },
      fail: err => {
        // 失败时的处理
        console.log(err);
        return reject(err);
      }
    })
  })

}

/**
 * code 换取 openId
 * @data {
 *   jsCode - wx.login() 返回的 code
 * }
 */
export const wxLogin = data => {
  return fetch({
    url: "tbcUser/getWechatOpenId",
    data: data
  })
}

Интерфейс вызова:

import {
  wxLogin,
} from '../../utils/api.js'

Использование интерфейса:

wxLogin({
  jsCode: this.data.code
}).then(
  res => {
    console.log("【step 4】返回成功处理：");
    console.log(res.data);
  },
  err => {
    console.log("【step 4】返回失败处理：");
    console.log(err);
  }
)

7.4 Передача данных страницы

Переносить параметры через URL, вonLoad()прошедшийoptionsПолучить параметры по URL:

<navigator url="../index/index?userId={{userId}}"></navigator>

<!-- 这两段是分别在 HTML 和 JS 中的代码 -->

onLoad: function(options) {
  console.log(options.userId);
}

Передать параметры через Storage:

wx.setStorageSync('userId', 'jsliang');
wx.getStorageSync('userId');

WXML передает данные в JS

<text bindtap="clickText" data-labelId="{{userId}}">点击传递数据到 JS</text>

clickText(e) {
  console.log(e.currentTarget.labelid)
}

Параметр вызова компонента

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  }
})

{
  "usingComponents": {
    "component-tag-name": "../component/component"
  }
}

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

Передача параметров через интерфейсные вызовы

7.5 Методы оптимизации производительности загрузки

пройти черезthis.$preload()Предварительно загрузите вторую страницу, на которую пользователь может нажать.
Компонентные страницы, части, которые появляются более двух раз, инкапсулируются в компоненты.
Извлечение общих стилей CSS.
Оптимизировать изображения:TinyPNG.

7.6 Различия между мини-программами WeChat и нативными приложениями, Vue и H5

Преимущества и недостатки мини-программ WeChat:

Преимущество:

Загрузка не требуется
Более быстрое открытие
Затраты на разработку ниже, чем у нативных приложений

недостаток:

Много ограничений. Размер страницы не может превышать 1M, а страницы с более чем 5 уровнями не могут быть открыты.
Единый стиль. Внутренние компоненты апплета установлены, и стиль не может быть изменен.
Продвижение узкое. Если вы не можете выйти из WeChat, вы не можете попасть в круг друзей.

Мини-программа WeChat VS родное приложение

Преимущества мини-программ WeChat заключаются в низкой стоимости разработки, низкой стоимости привлечения клиентов и отсутствии необходимости загрузки.

Мини-программа WeChat VS H5

Зависимая среда отличается. Можно запустить в различных мобильных браузерах. Неполный браузер, который работает только в WeChat.
Стоимость разработки разная. Возможная проблема в различных браузерах. Один работает только в WeChat.

Мини-программа WeChat против Vue

Апплет WeChat кажется кастрированной версией Vue.

7.7 Принципы мини-программ WeChat

По сути, это одностраничное приложение, весь рендеринг страниц и обработка событий выполняются на одной странице.
Архитектура — это модель, управляемая данными, пользовательский интерфейс и данные разделены, и все обновления страниц должны выполняться посредством изменений данных.
Апплет WeChat разделен на две части: webview и appService. Среди них webview в основном используется для отображения пользовательского интерфейса, а appServer используется для обработки бизнес-логики, данных и вызовов интерфейса. Они выполняются в двух процессах и взаимодействуют через системный уровень JSBridge для реализации рендеринга пользовательского интерфейса и обработки событий.

Восемь браузеров

8.1 URL-адрес анализа браузера

оБраузер анализирует URL,jsliangДанные намеренно объединены:

Защита от тряски и дросселирования
Перерисовка и перекомпоновка
Браузер анализирует URL
Разрешение доменного имени DNS
Трехстороннее рукопожатие TCP и четырехсторонняя волна
Браузер отображает страницу

Друзья могут пойти в«Значения интервью — JS Anti-Shake и Throttling»Проверить.

8.2 Перерисовка и перекомпоновка

оПерерисовка и перекомпоновка,jsliangДанные намеренно объединены:

Защита от тряски и дросселирования
Перерисовка и перекомпоновка
Браузер анализирует URL
Разрешение доменного имени DNS
Трехстороннее рукопожатие TCP и четырехсторонняя волна
Браузер отображает страницу

Друзья могут пойти в«Значения интервью — JS Anti-Shake и Throttling»Проверить.

8.3 Хранение данных

Сохраненный в коде код выполняется для освобождения памяти.
Хранящиеся в браузере файлы cookie используются для краткосрочного хранения небольшой информации, такой как личность пользователя и статус входа в систему, localStorage/sessionStorage используются для долгосрочного хранения данных, и закрытие браузера не влияет на их память. хранилище может хранить больше ; IndexedDB — это предоставляемая браузером база данных почти NoSQL, которая позволяет хранить большие объемы данных.
хранится в базе данных.

8.4 Управление памятью и сборка мусора

V8 делит память на две категории: пространство памяти молодого поколения и пространство памяти старого поколения.

Пространство памяти нового поколения: в основном используется для хранения объектов с коротким временем существования.
Пространство памяти старого поколения: в основном используется для хранения объектов с длительным временем существования.

Оба используют разные алгоритмы для управления памятью.

8.5 Утечки памяти

Непредвиденная глобальная переменная: не может быть переработана.
Таймер: закрыт неправильно, в результате чего внешняя переменная, на которую указывает ссылка, не освобождается.
Прослушиватель событий: неправильно уничтожен (может появиться в браузерах более ранних версий).
Закрытие: запрещает освобождение переменных в родительском объекте.
Ссылки DOM: ссылки в памяти не очищались должным образом при удалении DOM.
Как проверить изменения памяти?

Используйте временную шкалу Chrome (новая версия Performance), чтобы отметить память, визуализировать изменения в памяти и найти выбросы.

Девять сетевых протоколов

9.1 Сетевой уровень

В настоящее время сетевые уровни можно разделить на два типа: модель OSI и модель TCP/IP.

Модель OSI

Прикладной уровень (Приложение)
Уровень представления
Сеансовый уровень (сеанс)
Транспортный уровень (транспорт)
Сетевой уровень (Сеть)
Уровень канала передачи данных (канал передачи данных)
Физический слой

Модель TCP/IP

Прикладной уровень (Приложение)
Транспортный уровень (транспорт между хостами)
Интернет-уровень (Интернет)
Уровень сетевого интерфейса

Для получения более подробной информации см. следующую статью, которая очень подробная:

«Сетевой протокол TCP/IP и HTTP»

9.2 HTTP/HTTPS

HTTP: Протокол передачи гипертекста (HTTP) — это прикладной протокол для распределенных, совместных и информационных систем гипермедиа. Это основа для обмена данными в Интернете и протокол клиент-сервер, что означает, что запросы обычно инициируются получателями, такими как браузеры.
HTTPS: HTTPS (полное название: Hypertext Transfer Protocol over Secure Socket Layer) — безопасный HTTP-канал, короче говоря, безопасная версия HTTP. То есть уровень SSL добавляется в HTTP, а основой безопасности HTTPS является SSL, поэтому для зашифрованных данных требуется SSL. Это схема URI (схема абстрактного идентификатора) с синтаксисом, аналогичным схеме http:. Для безопасной передачи данных HTTP. https:URL указывает, что он использует HTTP, но HTTPS имеет порт по умолчанию, отличный от HTTP, и уровень шифрования/аутентификации (между HTTP и TCP). Первоначально разработанная Netscape, система обеспечивает аутентификацию и зашифрованные методы связи, а в настоящее время широко используется для защищенных и конфиденциальных коммуникаций во Всемирной паутине, таких как платежи по транзакциям.

9.3 Коды состояния HTTP

Во-первых, мы грубо различаем следующие коды состояния:

1** в начале - информационная подсказка
2** - запрос выполнен успешно
3** - запрос перенаправлен
4** старт - ошибка запроса
5** - ошибка сервера

Затем общие коды состояния:

200 - Запрос выполнен успешно, Ajax получил сообщение.
400 - Сервер не понимает запрос, а мне бэкенд сообщает 400 при работе через домены!
403 — сервер отклонил запрос.
404 - Ошибка страницы запроса.
500 - Внутренняя ошибка сервера, невозможно выполнить запрос.

Наконец, если вы хотите узнать больше, вам все равно нужно найти информацию самостоятельно.

9.4 Трехстороннее рукопожатие TCP и четырехсторонняя волна

оТрехстороннее рукопожатие TCP и четырехсторонняя волна,jsliangДанные намеренно объединены:

Защита от тряски и дросселирования
Перерисовка и перекомпоновка
Браузер анализирует URL
Разрешение доменного имени DNS
Трехстороннее рукопожатие TCP и четырехсторонняя волна
Браузер отображает страницу

Друзья могут пойти в«Значения интервью — JS Anti-Shake и Throttling»Проверить.

Десять оптимизаций производительности

Улучшить скорость загрузки страниц за счет оптимизации.

10.1 Оптимизация HTML

Избегайте написания кода CSS в HTML, так как его сложно поддерживать.
Используйте области просмотра, чтобы ускорить отрисовку страницы.
Используйте семантические теги, уменьшите код CSS, улучшите читабельность и SEO.
Сократите использование тегов, синтаксический анализ DOM — это процесс многократных обходов, сокращения ненужных тегов и уменьшения количества обходов.
Избегайте пустых значений для src, href и т. д., потому что даже если они будут пустыми, браузер сделает HTTP-запрос.
Уменьшите количество DNS-запросов.

10.2 CSS-оптимизация

Оптимизация путей селектора: используйте.c {}вместо.a .b .c {}.
Слияние селекторов: выводится содержимое общего атрибута, сжимая пространство и ресурсы.
Точный стиль: использованиеpadding-left: 10pxвместоpadding: 0 0 0 10px.
Изображение спрайта: объедините маленькие значки в одно изображение, чтобы все изображения нужно было запрашивать только один раз.
Избегайте подстановочных знаков:.a .b * {}Такие селекторы, подстановочные знаки встречаются при разборе в соответствии с порядком разбора справа налево* {}Он пройдет через весь DOM, и производительность будет сильно снижена.
Используйте поплавок экономно:floatПри рендеринге объем вычислений относительно велик, можно использовать гибкую верстку.
Разделение на 0 значений: повышенная совместимость.
Сократите размер файла и уменьшите нагрузку на загрузку ресурсов.

10.3 Оптимизация JavaScript

поставить как можно больше<script>этикетка наbodyПосле этого старайтесь, чтобы выполнение JS не блокировало рендеринг DOM, и убедитесь, что страница отображается как можно быстрее.
Включайте JS-код везде, где это возможно: извлекайте общедоступные методы, выполняйте объектно-ориентированный дизайн и т. д.
CSS можно, попробуйте не делать JS, ведь анализ JS относительно груб, а CSS эффективнее.
Используйте DOM один за другим максимально возможным, и предварительно заказать стили CSS, тем самым уменьшая количество откровения или перекраски.
Создавайте как можно меньше DOM, вместо этого используйте HTML и CSS.display: noneскрывать и показывать по запросу.
Сократите размер файла и уменьшите нагрузку на загрузку ресурсов.

Одиннадцать алгоритмов

В разделе алгоритмаjsliangЯ чувствую, что я все еще относительно слаб, если мои друзья следуютjsliangТаким же образом я также хочу обогатить эти знания Добро пожаловать на чистку LeetCode и вместе добивайтесь прогресса:

LeetCode

12 других

В главе [Другое] оригиналjsliangЯ хотел бы поговорить о некоторых советах на собеседовании, таких как обсуждение заработной платы; или поговорить о вопросах, которые необходимо задать на собеседовании с персоналом, таких как рабочее время, механизм сверхурочной работы, механизм корректировки заработной платы и т. д.

Однако, в конце концов,jsliangОпыта все еще не хватает, а интервью, которые я пережил, недостаточно «грандиозны», поэтому то, что я сказал, может быть «чепухой» и «вводить аудиторию в заблуждение», поэтому я не буду стыдиться здесь, если вы хотите знать больше. , Через группу QQ:798961601Найди меня.

13 Резюме

В процессе прочтения этой статьи у друзей могут возникнуть такие вопросы:

Смотреть не интересно! Почему ты такой "короткий"?

отвечать:

Вы заслуживаете серию пакетов!

Практика интервью 2019 – первый раунд
2019 Практика собеседования - второй раунд
2019 Практика интервью - Третий раунд
Очки знаний по интервью — прототип JS и цепочка прототипов
Очки знаний на собеседовании - защита от встряхивания и дросселирования JS
Интервью точки знаний - фотографии

К чему ты написал всю эту задницу? У меня голова закружилась после просмотра!

отвечать:

Опыт обучения у всех разный, и навыки, очки знаний и опыт работы у них разные.

такjsliangЦель состоит в том, чтобы обогатиться с помощью этой статьи и в то же время выявить свои собственные недостатки, такие как объектно-ориентированное построение колес, проблемы с алгоритмами и т. д.jsliangЯ хочу подбросить его дальше и применить в своей работе.

Поэтому маленькие партнеры должны расширять и дополнять свои собственные точки знаний в соответствии с их реальной ситуацией.

Ведь только ты знаешь себя!

Кажется, что ваше письмо здесь не очень полное? Я до сих пор в неведении после прочтения!

отвечать:

Цель у всех разная, невозможно написать все пункты знаний в одной статье, а некоторые пункты знаний могут бытьjsliangне интересно илиjsliangУровень не достаточен и его нельзя трогать.

И у каждого интервьюера может быть свой набор вопросов для интервью, еслиjsliangЕсли вы можете написать все вопросы для интервью, что еще вам нужно от интервьюера?Каждый должен пройти компьютерный тест прямо как тест на национальный сертификат~ (я тоже с нетерпением жду этого!!!)

14 ссылок

Многие из содержания этой статьи могут быть знакомы маленьким друзьям, потому что большинство из нихjsliangОбратитесь к большому количеству литературы, а затем выберите и систематизируйте, и, наконец, некоторые разработки, основанные на моем собственном понимании.

Ниже статья, которую я лично считаю очень хорошей.

14.1 Об интервью

«Фронтенд PUBG Mobile 2018»
«Проведите интервью с производителями интерфейсов среднего и продвинутого уровня, сопроводите своих золотых, три серебряных и четыре, напрямую крупным производителям (часть 1)»
"Карта интервью"
«Статья, чтобы получить предварительное интервью»
«Мини-программа WeChat должна знать вопросы для интервью»
«Вопросы интервью с мини-программой WeChat с ответами»
«Эти ямы с вопросами для интервью, на которые наступил апплет, с ответами и решениями»

14.2 О HTML

Справочник фронтенд-инженера
«Учебник по HTML — (стандарт HTML5) — учебник для новичков»
«Использование файлов cookie, общих для внешнего интерфейса и единого входа»
"Cookie, session и localStorage, а также разница между sessionStorage"

14.3 О CSS

Справочник фронтенд-инженера
Полное руководство по CSS
Демистификация CSS
"Мир CSS"
«Мое понимание BFC»
«Распространенные методы CSS для достижения вертикального центрирования»
«CSS с использованием position: absolute и преобразование в центральные элементы уровня блока»
"Общий макет CSS"
«Закругленные углы CSS3»
CSS3 градиенты
"Свойства перехода CSS3"
"Свойство преобразования CSS3"
"Свойство анимации (анимации) CSS3"
"Свойство тени окна CSS3"
«Личное резюме (новые возможности CSS3)»

14.4 О JS

【Рекомендация】《JavaScript - MDN》
«Сяо Шао учит вас играть в ES6»
«Сяо Шао учит вас играть в объектно-ориентированный JS»
«Каковы плюсы и минусы реализации двусторонней привязки Proxy, чем defineproperty»
《Использование $emit во Vue》
«Рождение всего в мире JavaScript»
Что именно делает new() в js? ? 》
"Функция MDN.prototype.call()"
"Глубокое понимание вызова, применения и связывания в JavaScript"
«Функция стрелы - Ляо Сюэфэн»
«Введение в ECMAScript 6 — Руан Ифэн»
«Виртуальный дом анализа принципов Vue»
"Краткий анализ виртуального дома (реализация Vue)"
«Принцип и использование Vue.nextTick»

14.5 О других

«Передовые методы оптимизации производительности внешнего интерфейса»
«Что такое фронтенд-инжиниринг, модульность и компонентизация?»
«[Серия Front-end Engineering] Краткий доклад о модульной разработке Front-end и спецификациях разработки»
«Личное понимание модульности»
«Анализ концепции разработки компонентов и модульной разработки»
"Модульизация JavaScript --- модули Commonjs, AMD, CMD, es6"
«О том, что такое фронтенд-инжиниринг»
«Использование файлов cookie, общих для внешнего интерфейса и единого входа»
"Cookie, session и localStorage, а также разница между sessionStorage"
«Сетевой протокол TCP/IP и HTTP»

15 отзывов пользователей

Загляните в область комментариев Nuggets, спасибо за отличный отзыв, потому что я1 апреля 2019 г.После поступления на работу я записал некоторые очки знаний, которые лично мне показались хорошими и которые я не заметил, и выделил их из исходного текста, а затем усовершенствовал для следующей смены работы после Года Обезьяны.

определение закрытия:

Функция A содержит функцию B, а функция B использует переменные функции A, и возвращается функция B, тогда функция B называется замыканием.

box-sizingАтрибуты:

когда значениеborder-boxвремя, ширинаwidth = content + padding + border, включая отступы и границы.

когда значениеcontent-boxвремя, ширинаwidth = content, исключая отступы и границы.

em- относительный размер, здесь относительно родительского элемента элементаfont-size.

Side Project:

Китайцы, соответствующие Side Project, — это сайд-проект, запасной проект или небольшой проект.

Заинтересованные друзья могут пойти узнать.

pushа такжеshiftряд:

Первоначальный текст здесь был отмечен, и он неверен, но он временно недоступен и не редактировался.

Порядок загрузки селектора CSS:

Оригинал: !important -> встроенные стили -> #id -> .class -> элементы и псевдоэлементы -> * -> наследование -> по умолчанию

Нетизен: «Это должно быть последним приоритетом».

Последний наивысший приоритет здесь должен относиться к покрытию того же уровня приоритета. Когда браузер анализирует CSS в дереве правил CSS через CSSParser, он должен загружаться сначала в соответствии с порядком в исходном тексте, а затем на том же уровне, последние атрибуты переопределяют предыдущие атрибуты.

ARIA:

Для семантики HTML5 ARIA означает доступное многофункциональное интернет-приложение,aria-*Роль тега заключается в описании конкретной информации тега в визуальном контексте. Например:

aria-label: указывает встроенную текстовую метку для компонента, которая используется вместо того, чтобы разработчик не использовал<label>Этикетка
aria-labelledby: будет читаться так же, как этоidзначение имени

sessionStorage и localStorage:

Описание статьи недостаточно подробное.

Двухколоночный макет/трехколоночный макет:

child-towустановить вwidth: 100%когдаchild-oneШирина будет варьироваться случайным образом, установитеflex: 1не будет. Так что это зависит от ваших личных потребностей.
В статье не упоминается, как настроить совместимость, вы можете рассмотреть возможность использованияfloatСделайте соответствующие макеты.

Поверхностная копия и глубокая копия:

Справочные статьи:«Окончательный поиск глубокого копирования (90% людей не знают)»

Promiseа такжеasync/await:

Описание статьи недостаточно подробное.

перекрестный домен:

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

«Девять принципов междоменной реализации (полная версия)»

Вышеприведенное является дополнением к текущей области комментариев. Спасибо за вашу поддержку.