Поделитесь большой волной собранных вопросов и ответов на предварительных интервью

Пожалуйста, укажите источник:GitHub.com/Seeking-Deqing/…

Table of Contents generated with DocToc

FE-interview

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

$HTML, HTTP, проблемы веб-интеграции

Временная сложность и пространственная сложность распространенных алгоритмов сортировки

На что SEO нужно обратить внимание во внешнем интерфейсе

Разумный заголовок, описание, ключевые слова: вес трех элементов в поиске уменьшается один за другим, значение заголовка может подчеркивать ключевые моменты, важные ключевые слова не должны появляться более двух раз, и они должны быть впереди, и название разных страниц должно быть разным Содержание страницы очень краткое, длина соответствующая, ключевые слова не должны быть чрезмерно нагромождены Описание разных страниц разное, в ключевых словах могут быть перечислены важные ключевые слова.
Семантический HTML-код, соответствующий спецификациям W3C: семантический код упрощает понимание веб-страниц поисковыми системами.
HTML-код важного контента размещается первым: поисковые системы сканируют HTML сверху вниз. Некоторые поисковые системы имеют ограничения на продолжительность сканирования, чтобы обеспечить сканирование важного контента.
Не используйте js для вывода важного контента: сканер не будет выполнять js для получения контента
Используйте фреймы экономно: поисковые системы не будут сканировать контент в фреймах.
Недекоративные изображения должны быть альтернативными
Улучшите скорость сайта: скорость сайта является важным показателем для рейтинга в поисковых системах.

Какие существуют методы отслеживания сессий в веб-разработке

cookie
session
перезапись URL
скрыть ввод
айпи адрес

`<img>`из`title`и`alt`Какая разница

titleдаglobal attributesОдин, используемый для предоставления дополнительной консультационной информации элементу. Обычно отображается, когда мышь находится над элементом.
altда<img>Уникальный атрибут — это эквивалентное описание содержимого изображения, которое используется для отображения изображения, когда оно не может быть загружено, и для чтения изображения программой чтения с экрана. Это может улучшить высокую доступность картинок.Помимо чисто декоративных картинок должны быть заданы осмысленные значения, а поисковые системы сосредоточатся на анализе.

Что такое doctype, примеры распространенных doctype и их характеристики

<!doctype>Объявление должно быть в начале документа HTML, в<html>Перед тегами нечувствительность к регистру в HTML5
<!doctype>Объявление не является HTML-тегом, это директива, сообщающая браузеру текущую версию HTML.
Механизм разметки html современных браузеров решает, отображать ли документ в режиме совместимости или стандартном режиме, проверяя тип документа, некоторые браузеры имеют модель, близкую к стандартной.
В HTML4.01<!doctype>Объявление указывает на DTD. Поскольку HTML4.01 основан на SGML, DTD определяет правила разметки, чтобы гарантировать, что браузер правильно отображает содержимое.
HTML5 не основан на SGML, поэтому нет необходимости указывать DTD.

Распространенные дотипы:

HTML4.01 strict: выразительные, устаревшие элементы (например, шрифт) и наборы фреймов не допускаются. утверждение:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.01 Transitional: Разрешены выразительные, устаревшие элементы (например, шрифт), набор фреймов не разрешен. утверждение:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML4.01 Frameset: Позволяет использовать выразительные элементы, выхлопные элементы и наборы фреймов. утверждение:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0 Strict: не используйте разрешающую выразительность, отброшенные элементы и набор фреймов. Документ должен быть правильно сформированным XML-документом. утверждение:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0 Transitional: Допускаются выразительные, устаревшие элементы, наборы фреймов не допускаются, документ должен быть правильно сформированным XML-документом. утверждение:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset: Разрешены выразительные, устаревшие элементы и наборы фреймов, и документ должен быть правильно сформированным XML-документом. утверждение:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 5: <!doctype html>

Что такое глобальные атрибуты HTML?

Использованная литература:MDN: html global attributeилиW3C HTML global-attributes

accesskey: набор сочетаний клавиш для обеспечения быстрого доступа к таким элементам, какaaaНажмите в firefox под окнамиalt + shift + aактивируемый элемент
class: установить идентификатор класса для элемента, несколько имен классов разделены пробелами, CSS и javascript могут получить элемент через атрибут класса.
contenteditable: указывает, можно ли редактировать содержимое элемента.
contextmenu: настроить содержимое всплывающего меню правой кнопки мыши.
data-*: добавление настраиваемых атрибутов к элементам.
dir: установить направление текста элемента
draggable: Установите, можно ли перетаскивать элемент
dropzone: Установите тип перетаскивания элемента: копировать, перемещать, связывать
hidden: указывает, связан ли элемент с документом. Стиль приведет к тому, что элемент не будет отображаться, но этот атрибут нельзя использовать для достижения эффекта стиля.
id: идентификатор элемента, уникальный в пределах документа
lang: язык содержимого элемента
spellcheck: включить ли проверку орфографии и грамматики
style: встроенный стиль css
tabindex: Установите элемент, чтобы получить фокус и перемещаться по вкладке.
title: Предлагаемая информация об элементе
translate: Необходимо ли локализовать содержимое элементов и узлов-потомков.

Что такое веб-семантика и в чем ее преимущества

Веб-семантика относится к информации, содержащейся на странице, представленной тегами HTML, включая семантику тегов HTML и семантику именования CSS. Семантика тегов HTML относится к: правильному представлению структуры документа с использованием тегов, содержащих семантику (например, h1-h6). Семантика имен css относится к: добавлению значимых классов в теги html, id дополняет невыраженную семантику, такую какMicroformatДобавляя информацию описания класса, соответствующую правилам Зачем нужна семантика:

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

HTTP method

Сервер должен быть совместим с HTTP 1.1, если он реализован для ресурса.GETиHEADметод
GETявляется наиболее распространенным методом, обычно используемым дляЗапросите сервер отправить ресурс.
HEADАналогично GET, ноСервер возвращает заголовок по значению в ответе, а не тело сущности
PUTпусть серверИспользуйте часть тела запроса, чтобы создать новый документ с именем запрошенного URL-адреса, или, если этот URL-адрес уже существует, замените его телом.
POSTПервоначально использовался для ввода данных на сервер. Фактически, он часто используется для поддержки HTML-форм. Данные, заполненные в форме, обычно отправляются на сервер, который затем отправляет их туда, куда они идут.
TRACEНа целевом сервере будет инициирована петлевая диагностика, и сервер на последней остановке вернет ответ TRACE и перенесет исходное сообщение запроса, которое он получил в теле ответа. Метод TRACE в основном используется в диагностических целях, чтобы убедиться, что запрос проходит по цепочке запрос/ответ, как предполагалось.
OPTIONSМетод запрашивает веб-сервер, чтобы сообщить ему о различных функциях, которые он поддерживает. Вы можете запросить, какие методы поддерживает сервер или какие методы поддерживаются для некоторых специальных ресурсов.
DELETEЗапрашивает сервер удалить ресурс, указанный URL-адресом запроса.

Действия по вводу URL-адреса из адресной строки браузера для отображения страницы (в качестве примера возьмем HTTP)

Введите URL-адрес в адресную строку браузера
вид в браузеретайник, если запрошенный ресурс находится в кеше и свежий, перейти к шагу транскодирования
1. Если ресурс не кэшируется, сделайте новый запрос
2. Если кэшировано, проверьте, достаточно ли оно свежее, чтобы обслуживать непосредственно клиента, в противном случае проверьте с сервером.
3. Проверка свежести обычно контролируется двумя HTTP-заголовками.ExpiresиCache-Control:
  - HTTP1.0 предоставляет Expires, значение которого представляет собой абсолютное время, представляющее дату обновления кеша.
  - HTTP1.1 добавляет Cache-Control: max-age=, значение — максимальное время обновления в секундах.
браузерРазобрать URLполучить протокол, хост, порт, путь
браузерСоберите сообщение запроса HTTP (GET)
браузерПолучить IP-адрес хоста, процесс выглядит следующим образом:
1. кеш браузера
2. родной кеш
3. файл hosts
4. кеш маршрутизатора
5. DNS-кеш провайдера
6. Рекурсивный запрос DNS (может быть балансировка нагрузки, вызывающая каждый раз разные IP-адреса)
Откройте сокет с целевым IP-адресом и портом, чтобы установить TCP-соединение., трехстороннее рукопожатие выглядит следующим образом:
1. Клиент отправляет TCPSYN=1, Seq=Xпакет на порт сервера
2. сервер отправляет обратноSYN=1, ACK=X+1, Seq=Yпакет ответа
3. Клиент отправляетACK=Y+1, Seq=Z
После установления TCP-соединенияотправить HTTP-запрос
Сервер принимает и анализирует запрос, а затем перенаправляет запрос сервисной программе. Например, виртуальный хост использует заголовок HTTP Host для определения запрошенной сервисной программы.
проверка сервераСодержит ли заголовок HTTP-запроса информацию об аутентификации кэшаЕсли кеш проверки свежий, верните304и другие соответствующие коды состояния
Обработчик считывает полный запрос и готовит HTTP-ответ, возможно, запрашивая базу данных и т. д.
Сервер будетОтветное сообщение отправляется обратно в браузер через TCP-соединение.
Браузер получает ответ HTTP, а затем выбирает в зависимости от ситуации.Закройте соединение TCP или сохраните его для повторного использования.Четырехстороннее рукопожатие для закрытия соединения TCP выглядит следующим образом.:
1. Активная сторона отправляетFin=1, Ack=Z, Seq=Xсообщение
2. Отправлено пассивной сторонойACK=X+1, Seq=Zсообщение
3. Отправлено пассивной сторонойFin=1, ACK=X, Seq=Yсообщение
4. Активная сторона отправляетACK=Y, Seq=Xсообщение
Проверяет ли браузер статус ответа: будь то 1XX, 3XX, 4XX, 5XX, эти случаи обрабатываются иначе, чем 2XX
Если ресурс кэшируется,кэшировать
на ответрасшифровка(например, сжатие gzip)
Решите, что делать, исходя из типа ресурса (при условии, что ресурс является HTML-документом).
Разбирать документы HTML, строить дерево DOM, загружать ресурсы, строить дерево CSSOM, выполнять скрипт js, для этих операций нет строгой последовательности, которые поясняются ниже
Построить DOM-дерево:
1. Tokenizing: Преобразует поток символов в разметку в соответствии со спецификацией HTML.
2. Lexing: Лексический анализ преобразует токены в объекты и определяет свойства и правила.
3. DOM construction: Группирует объекты в дерево DOM на основе взаимосвязей HTML-тегов.
В процессе синтаксического анализа встречаются изображения, таблицы стилей и файлы js.начать загрузку
ПостроитьCSSOM-дерево:
1. Tokenizing: преобразовать поток символов в поток токенов.
2. Node: Создание узлов из тегов
3. CSSOM:node для создания дерева CSSOM
Создайте дерево рендеринга из дерева DOM и дерева CSSOM.:
1. Пройти все от корневого узла дерева DOMвидимый узел, к невидимым узлам относятся: 1)script,metaТакие метки не видны сами по себе. 2) Узлы, скрытые css, напримерdisplay: none
2. Для каждого видимого узла найдите соответствующее правило CSSOM и примените его.
3. Публикация содержимого и вычисляемого стиля визуального узла
js анализируется следующим образом:
1. Браузер создает объект Document и анализирует HTML, добавляя в документ проанализированные элементы и текстовые узлы.document.readystate загружается
2. Встречи парсера HTMLБез асинхронных и отложенных скриптов, добавьте их в документ и выполните встроенные или внешние сценарии. Скрипты выполняются синхронно, и анализатор приостанавливается, пока скрипт загружается и выполняется. Это позволяет вставлять текст во входной поток с помощью document.write().Синхронные сценарии часто просто определяют функции и регистрируют обработчики событий, которые могут проходить и манипулировать сценариями и их предыдущим содержимым документа.
3. Когда синтаксический анализатор встречает параметрasyncскрипт атрибута, начните загрузку скрипта и продолжите парсинг документа. скрипт будет в немВыполнить как можно скорее после завершения загрузки,ноПарсер не останавливается и не ждет загрузки. Асинхронный скриптdocument.write() запрещен, они могут получить доступ к своему сценарию и предыдущим элементам документа
4. Когда документ завершает синтаксический анализ, document.readState становится интерактивным.
5. всеdeferсценарий будетВыполнять в том порядке, в котором они указаны в документе, сценарий задержкиДоступ к полному дереву документов, запрещающий использование document.write()
6. браузерИнициировать событие DOMContentLoaded для объекта Document
7. На этом этапе документ полностью проанализирован, и браузер все еще может ожидать загрузки содержимого, например изображений, в ожидании этихКонтент завершает загрузку, и все асинхронные скрипты завершают загрузку и выполнение., document.readState становится завершенным, и окно запускает событие загрузки
показать страницу(Страница будет отображаться постепенно в процессе парсинга HTML)

Какова структура сообщения HTTP-запроса

rfc2616определяется в:

Первая строкаRequest-Lineвключают:метод запроса,запрос-URI,Версия протокола,CRLF
За первой строкой следует несколько строкзаголовок запроса,включаютgeneral-header,request-headerилиentity-header, каждая строка заканчивается CRLF
Между заголовком запроса и сущностью сообщения естьCRLF с разделителями
В зависимости от фактического запроса, он может содержатьсущность сообщенияПример сообщения запроса выглядит следующим образом:

GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT

name=qiu&age=25
скопировать код

Какова структура ответного сообщения HTTP?

rfc2616определяется в:

Первая строка — это строка состояния, включающая:Версия HTTP, код состояния, описание состояния, за которым следует CRLF
После первой строкиНесколько строк заголовков ответа,включают:Общие заголовки, заголовки ответов, заголовки сущностей
между заголовком ответа и сущностью ответаПустая строка CRLFотдельный
Наконец возможныйсущность сообщенияПример ответного сообщения выглядит следующим образом:

HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1

{"name": "qiu", "age": 25}
скопировать код

Как оптимизировать работу сайта

содержание
1. Сокращение HTTP-запросов: файлы слияния, спрайты CSS, встроенные изображения
2. Сокращение запросов DNS: браузер не может загружать какие-либо файлы с этого хоста, пока поиск DNS не будет завершен. Подходы: кеширование DNS, распределение ресурсов на нужное количество имен хостов, балансировка параллельных загрузок и DNS-запросов
3. Избегайте перенаправлений: избыточные промежуточные посещения
4. Сделать Ajax кэшируемым
5. Ленивая загрузка дополнительных компонентов
6. Предварительная загрузка будущих необходимых компонентов
7. Уменьшите количество элементов DOM
8. Размещайте ресурсы в разных доменах: количество ресурсов, которые браузеры могут загружать из домена одновременно, ограничено, и увеличение числа доменов может увеличить количество параллельных загрузок.
9. Уменьшите количество фреймов
10. не надо 404
Сторона сервера
1. Используйте CDN
2. Добавьте заголовки ответа Expires или Cache-Control
3. Используйте сжатие Gzip для компонентов
4. Настроить ETag
5. Flush Buffer Early
6. Ajax-запросы с использованием GET
7. Избегайте тегов img с пустым src
Печенье
1. Уменьшить размер файла cookie
2. Доменное имя импортируемого ресурса не должно содержать куки
css-аспект
1. Поместите таблицу стилей вверху страницы
2. Не используйте выражения CSS
3. Использовать без @import
4. Не используйте фильтр IE
Сторона Javascript
1. Поместите скрипт внизу страницы
2. Импорт javascript и css извне
3. Сжать javascript и css
4. удалить ненужные скрипты
5. Уменьшить доступ к DOM
6. Разумный дизайн прослушивателей событий
Фотографий
1. Оптимизируйте изображения: выбирайте глубину цвета и сжатие в соответствии с реальными потребностями в цвете.
2. Оптимизировать css спрайты
3. Не растягивайте изображения в HTML
4. Держите favicon.ico небольшим и кешируемым
мобильный
1. Гарантированные компоненты менее 25 тыс.
2. Pack Components into a Multipart Document

Что такое прогрессивное улучшение

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

Все браузеры должны иметь доступ к базовому контенту
Все браузеры должны иметь возможность использовать базовые функции
Все содержится в смысловых тегах
Обеспечьте расширенный макет с помощью внешнего CSS
Обеспечьте улучшения с помощью ненавязчивого внешнего javascript
end-user web browser preferences are respected

Коды состояния HTTP и их значения

Ссылаться наRFC 2616

1XX: Код статуса информации
- 100 Continue: клиент должен продолжать отправлять запросы. Этот временный ответ используется для информирования клиента о том, что часть его запроса была получена сервером и не была отклонена. Клиент ДОЛЖЕН продолжать отправку оставшейся части запроса или игнорировать этот ответ, если запрос уже завершен. Сервер ДОЛЖЕН отправить окончательный ответ клиенту по запросу.
- 101 Switching Protocols: сервер понял запрос клиента и уведомит клиента через заголовок Upgrade, чтобы использовать другой протокол для выполнения запроса. После отправки пустой строки в конце этого ответа сервер переключится на те протоколы, которые указаны в заголовке Upgrade.
2XX: код состояния успеха
- 200 OK: запрос выполнен успешно, и вместе с этим ответом будет возвращен желаемый заголовок ответа или тело данных.
- 201 Created:
- 202 Accepted:
- 203 Non-Authoritative Information:
- 204 No Content:
- 205 Reset Content:
- 206 Partial Content:
3XX: перенаправление
- 300 Multiple Choices:
- 301 Moved Permanently:
- 302 Found:
- 303 See Other:
- 304 Not Modified:
- 305 Use Proxy:
- 306 (не используется):
- 307 Temporary Redirect:
4XX: ошибка клиента
- 400 Bad Request:
- 401 Unauthorized:
- 402 Payment Required:
- 403 Forbidden:
- 404 Not Found:
- 405 Method Not Allowed:
- 406 Not Acceptable:
- 407 Proxy Authentication Required:
- 408 Request Timeout:
- 409 Conflict:
- 410 Gone:
- 411 Length Required:
- 412 Precondition Failed:
- 413 Request Entity Too Large:
- 414 Request-URI Too Long:
- 415 Unsupported Media Type:
- 416 Requested Range Not Satisfiable:
- 417 Expectation Failed:
5ХХ: ошибка сервера
- 500 Internal Server Error:
- 501 Not Implemented:
- 502 Bad Gateway:
- 503 Service Unavailable:
- 504 Gateway Timeout:
- 505 HTTP Version Not Supported:

Раздел $CSS

Что такое селекторы CSS

*Универсальный селектор: выделить все элементы,Не участвует в расчете приоритета, Совместимость IE6+
#X селектор идентификатора: выберите элемент со значением идентификатора X, совместимость: IE6+
Селектор класса .X: Выберите элементы, класс которых содержит X, совместимость: IE6+
Селектор потомков X Y: Выберите элементы, удовлетворяющие селектору Y, в узлах-потомках, удовлетворяющих селектору X, совместимость: IE6+.
Селектор элемента X: выбирает все элементы, отмеченные X, совместимость: IE6+
:link, :visited, :focus, :hover, :активное состояние ссылки: Выберите элемент ссылки в определенном состоянии, закажите LoVe HAte, совместимость: IE4+.
Прямой селектор X+Y:существуетПервый родственный узел после XВыберите элементы, соответствующие селектору Y, совместимость: IE7+
Подселектор X > Y: выберите элемент, который удовлетворяет селектору Y в дочерних элементах X, совместимость: IE7+
Брат X~Y: выберитевсе родственные узлы после XЭлементы, соответствующие селектору Y, совместимость: IE7+
[attr]: выбрать все элементы с установленным атрибутом attr, совместимость с IE7+
[attr=value]: выбирает элемент, значение атрибута которого точно равно значению
[attr~=value]: Значение атрибута выбора отделено пробелом, и одно из значений как раз и является элементом значения
[attr|=value]: выбирает элементы, значение атрибута которых только начинается со значения или значения-
[attr^=value]: выберите элементы, значение атрибута которых начинается со значения
[attr$=value]: выберите элементы, значение атрибута которых заканчивается значением
[attr=value]*: выберите элемент, значение атрибута которого содержит значение
[:checked]: Выберите переключатель, флажок, элемент в выбранном состоянии раскрывающегося списка, совместимость: IE9+
X:after, X::after: после псевдоэлемента выбирает виртуальный дочерний элемент элемента (последний дочерний элемент элемента), в CSS3 :: означает псевдоэлемент. Совместимость :after для IE8+, ::after для IE9+
:hover: элемент, который мышь перемещает в состояние, совместимость тег IE4+, все элементы IE7+
:not(selector): выбирает элементы, которые не соответствуют селектору.Не участвует в расчете приоритета, Совместимость: IE9+
::first-letter: Псевдоэлемент, выбирает первую букву первой строки блочного элемента, совместимость с IE5.5+
::first-line: Псевдоэлемент, выбирает первую строку блочного элемента, совместимость с IE5.5+
:nth-child(an + b): Псевдокласс, выбирает элементы, которым предшествует + b - 1 родственных элементов, где n >= 0, совместимость IE9+
:nth-last-child(an + b): Псевдокласс, выбирает элементы, за которыми следуют + b - 1 одноуровневые узлы, где n >= 0, совместимость IE9+
X:nth-of-type(an+b): псевдокласс, X — селектор,Разобрать тег элемента,выберитеФронтЕсть + b - 1тот же ярлыкЭлементы одноуровневых узлов. Совместимость IE9+
X:nth-last-of-type(an+b): Псевдокласс, X — селектор, проанализированный для получения метки элемента, выберитепозжеЕсть an+b-1 идентичныхЭтикеткаЭлементы одноуровневых узлов. Совместимость IE9+
X:first-child: Псевдокласс, который выбирает элемент, удовлетворяющий селектору X, и является первым дочерним элементом своего родительского узла. Совместимость IE7+
X:last-child: Псевдокласс, который выбирает элемент, удовлетворяющий селектору X, и является последним дочерним элементом своего родительского узла. Совместимость IE9+
X:only-child: Псевдокласс, который выбирает элемент, который удовлетворяет селектору X и является единственным дочерним элементом своего родителя. Совместимость IE9+
X:only-of-type: Псевдокласс, выбирает элемент, выбранный X,Разобрать тег элемента, который выбирается, если элемент не имеет братьев и сестер того же типа. Совместимость IE9+
X:first-of-type: Псевдокласс, выбирает элемент, выбранный X,Разобрать тег элемента, если элемент является первым родственным элементом этого элемента этого типа. Проверь это. Совместимость IE9+

Что такое css спрайт и каковы его плюсы и минусы

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

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

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

недостаток:

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

`display: none;`и`visibility: hidden;`разница

Контакт: они оба делают элемент невидимым

разница:

display:none; элемент полностью исчезнет из дерева рендеринга и не будет занимать место при рендеринге; visibility: hidden; элемент не исчезнет из дерева рендеринга, элемент рендерера продолжит занимать место, но содержимое не будет видно
отображение: нет; ненаследуемый атрибут, узел-потомок исчезает, поскольку элемент исчезает из дерева рендеринга и не может быть отображен путем изменения атрибута узла-потомка; видимость: скрыта; является унаследованным атрибутом, узел-потомок исчезает потому что он наследует скрытый, установив видимость: видимый; сделать узлы-потомки явными
Изменение отображения элементов в обычном потоке обычно приводит к перекомпоновке документа. Изменение свойства видимости вызовет только перерисовку этого элемента.
Программа чтения с экрана не будет читать дисплей: нет; содержимое элемента; будет читать видимость: скрыто; содержимое элемента

Принцип взлома CSS и распространенный хак

Принцип: использоватьРазные браузеры по-разному поддерживают и анализируют CSS.Написано для определенного стиля браузера. Общие хаки имеют 1) хаки свойств. 2) Взлом селектора. 3) условные комментарии IE

Условные комментарии IE: применимо к [IE5, IE9]. Общие форматы следующие:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
скопировать код

Взлом селектора: разные браузеры поддерживают разные селекторы

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
скопировать код

Взлом атрибутов: различные ошибки или методы синтаксического анализа браузера

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
скопировать код

заданное значение, вычисленное значение, метод расчета используемого значения

заданное значение: Рассчитывается следующим образом:
1. Если таблица стилей устанавливает значение, используйте это значение
2. Если значение не установлено, это свойство является унаследованным свойством, унаследованным от родительского элемента.
3. Если не задано и не является унаследованным свойством, используйте начальное значение, указанное в спецификации CSS.
вычисленное значение: вычисляется в соответствии с поведением, определенным спецификацией с указанным значением, обычно относительное значение вычисляется как абсолютное значение, например, em вычисляется в соответствии с размером шрифта. Некоторые свойства, использующие проценты и требующие разметки для определения конечного значения, такие как ширина, поля. Процент непосредственно используется в качестве вычисляемого значения. Безразмерное значение высоты строки также напрямую используется в качестве вычисляемого значения. Эти значения получат абсолютные значения при расчете используемого значения.Основная функция вычисляемого значения для наследования
используемое значение: Окончательное значение свойства после вычисления. Для большинства свойств его можно получить с помощью window.getComputedStyle. Единицей измерения значения размера являются пиксели. Следующие свойства зависят от макета,
- background-position
- bottom, left, right, top
- height, width
- margin-bottom, margin-left, margin-right, margin-top
- min-height, min-width
- padding-bottom, padding-left, padding-right, padding-top
- text-indent

`link`и`@import`разница

linkэто метод HTML,@importэто способ CSS
linkМаксимальная поддержка параллельных загрузок,@importСлишком большая вложенность приводит к последовательной загрузке, появляющейсяFOUC
linkв состоянии пройтиrel="alternate stylesheet"Укажите стили-кандидаты
пара браузераlinkподдержку раньше, чем@import,можно использовать@importСкрыть стили для старых браузеров
@importДолжны быть перед правилами стиля, на другие файлы можно ссылаться в файле css.
В целом:ссылка лучше, чем @import

`display: block;`и`display: inline;`разница

blockХарактеристики элемента:

1. В обычном потоке, еслиwidthНет настроек, он автоматически заполнит родительский контейнер 2. Можно применитьmargin/padding3. Если высота не задана, высота будет увеличена, чтобы включить подэлементы в обычном потоке 4. В обычном потоке макет будет находиться между положением предыдущего и следующего элементов (исключительно горизонтальное пространство). 5. Игнорируетсяvertical-align

inlineОсобенности элемента

1. По горизонтальному направлениюdirectionМакет в последовательности 2. Без переноса строк до и после элементов 3. С учетомwhite-spaceКонтроль 4.margin/paddingНедействителен в вертикальном направлении, действителен в горизонтальном направлении 5.width/heightАтрибут недействителен для незаменяемых встроенных элементов, а ширина определяется содержимым элемента 6. Высота строки строки незаменяемых встроенных элементов определяетсяline-heightОК, замените высоту строки встроенных элементов наheight,margin,padding,borderПринять решение 6. При плавающем или абсолютном позиционировании оно будет преобразовано вblock 7.vertical-alignатрибут вступает в силу

Разница между PNG, GIF, JPG и как выбрать

Использованная литература:Выберите правильный формат изображения GIF:

8-битные пиксели, 256 цветов
сжатие без потерь
Поддержка простой анимации
поддержка логической прозрачности
Подходит для простых анимаций.

JPEG:

Цвета ограничены 256
сжатие с потерями
Контролируемое качество сжатия
Прозрачность не поддерживается
подходит для фотографий

PNG:

Имеет PNG8 и полноцветный PNG
Аналогичный PNG8 предел цвета GIF составляет 256, файл небольшой, поддерживает альфа-прозрачность, без анимации
Подходит для иконок, фонов, кнопок

Каковы унаследованные свойства CSS

Атрибуты набора текста, такие как:
line-height
color
visibility
cursor

Каковы распространенные ошибки, дефекты или несоответствия стандарту в браузере IE6 и как их решить

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

.target {
    min-height: 100px;
    height: auto !important;
    height: 100px;   // IE6下内容高度超过会自动扩展高度
}
скопировать код

olВнутриliВсе порядковые номера равны 1 и не увеличиваются. Обходной путь: стиль lidisplay: list-item;
родительский элемент не позиционированoverflow: auto;,Включаютposition: relative;Дочерний элемент переполняется, когда дочерний элемент выше родительского. Решение: 1) Удалить дочерний элементposition: relative;; 2) Когда позиционирование не может быть удалено для дочернего элемента, родительский элементposition: relative;

<style type="text/css">
.outer {
    width: 215px;
    height: 100px;
    border: 1px solid red;
    overflow: auto;
    position: relative;  /* 修复bug */
}
.inner {
    width: 100px;
    height: 200px;
    background-color: purple;
    position: relative;
}
</style>

<div class="outer">
    <div class="inner"></div>
</div>
скопировать код

IE6 поддерживает толькоaпомечен:hoverПсевдокласс, решение: используйте js для мониторинга событий mouseenter и mouseleave для элементов и добавьте классы для достижения эффекта:

<style type="text/css">
.p:hover,
.hover {
    background: purple;
}
</style>

<p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>

<script type="text/javascript">
function addClass(elem, cls) {
    if (elem.className) {
        elem.className += ' ' + cls;
    } else {
        elem.className = cls;
    }
}
function removeClass(elem, cls) {
    var className = ' ' + elem.className + ' ';
    var reg = new RegExp(' +' + cls + ' +', 'g');
    elem.className = className.replace(reg, ' ').replace(/^ +| +$/, '');
}

var target = document.getElementById('target');
if (target.attachEvent) {
    target.attachEvent('onmouseenter', function () {
        addClass(target, 'hover');
    });
    target.attachEvent('onmouseleave', function () {
        removeClass(target, 'hover');
    })
}
</script>
скопировать код

IE5-8 не поддерживаетopacity,Решение:

.opacity {
    opacity: 0.4
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
скопировать код

IE6 устанавливаетheightменьше, чемfont-sizeкогда высотаfont-size,Решение:font-size: 0;
IE6 не поддерживает прозрачный фон PNG, решение:Используйте изображение gif в IE6
IE6-7 не поддерживаетdisplay: inline-blockРешение: установить встроенный и запустить hasLayout

    display: inline-block;
    *display: inline;
    *zoom: 1;
скопировать код

В IE6 поле плавающего элемента в плавающем направлении, которое касается границы родительского элемента, удваивается. Решение: 1) Используйте отступы для управления интервалом. 2) Плавающие элементыdisplay: inline;Это решает проблему без каких-либо побочных эффектов: стандарт CSS предусматривает, что плавающие элементы display:inline автоматически настраиваются на блочные.
Установив ширину блочного элемента и левое и правое поля на auto, IE6 не сможет добиться горизонтального центрирования Решение: установите его для родительского элементаtext-align: center;

Как очищать (содержать) плавающие элементы, когда контейнер содержит несколько плавающих элементов

Добавьте дополнительный элемент перед закрывающим тегом элемента-контейнера и установите егоclear: both
Родительский элемент запускает контекст форматирования на уровне блока (см. раздел контекста визуализации на уровне блока).
Установите псевдоэлемент элемента контейнера для очисткиРекомендуемый метод очистки поплавков

/**
* 在标准浏览器下使用
* 1 content内容为空格用于修复opera下文档中出现
*   contenteditable属性时在清理浮动元素上下的空白
* 2 使用display使用table而不是block：可以防止容器和
*   子元素top-margin折叠,这样能使清理效果与BFC，IE6/7
*   zoom: 1;一致
**/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
* IE 6/7下使用
* 通过触发hasLayout实现包含浮动
**/
.clearfix {
    *zoom: 1;
}
скопировать код

Что такое FOUC и как этого избежать

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

Как создать контекст форматирования блока (контекст форматирования блока), какая польза от BFC

Создайте правило:

корневой элемент
плавающий элемент (floatнетnone)
Абсолютно позиционированные элементы (positionценностьabsoluteилиfixed)
displayценностьinline-block,table-cell, table-caption,flex, inline-flexодин из элементов
overflowнетvisibleЭлементы

эффект:

Может содержать плавающие элементы
не покрыт плавающими элементами
Предотвращение схлопывания полей родительских и дочерних элементов

Связь между отображением, плавающей запятой, позицией

еслиdisplayЕсли его нет, то ни position, ни float не будут работать, в этом случае элемент не генерирует бокс.
В противном случае, если значение позиции является абсолютным или фиксированным, блок позиционируется абсолютно, вычисленное значение float равно нулю, а отображение регулируется в соответствии с таблицей ниже.
В противном случае, если float не равно none, поле будет плавающим, а отображение будет настроено в соответствии с приведенной ниже таблицей.
В противном случае, если элемент является корневым, отображение настраивается в соответствии с таблицей ниже.
В других случаях значением display является указанное значение.Абсолютное позиционирование, плавающие, корневые элементы — все это необходимо настроить.display

Сворачивающиеся поля

два и более смежныхmarginБудут объединены в маржу, что называется сворачиванием маржи. Правила следующие:

Вертикальные поля двух или более смежных блочных элементов в обычном потоке свернуты.
Поля плавающих элементов/элементов встроенного блока/абсолютно позиционированных элементов не будут схлопываться с полями других элементов в вертикальном направлении.
Элемент, создающий контекст форматирования на уровне блока, не будет иметь схлопывающихся полей со своими дочерними элементами.
Собственные поля margin-bottom и margin-top элемента также сворачиваются, если они находятся рядом.

Как определить содержащий блок элемента

Содержащий блок корневого элемента, называемый начальным содержащим блоком, имеет тот же размер, что и область просмотра в непрерывном медиа, и привязан к исходной точке холста; для постраничного медиа его размер равен области страницы. Атрибут направления начального содержащего блока такой же, как у корневого элемента.
positionзаrelativeилиstaticэлемент, содержащий блок которого определяется ближайшим уровнем блока (displayзаblock,list-item, table) элементов-предковПоле содержимогосочинение
если элементpositionзаfixed. Для непрерывных медиа содержащим его блоком является область просмотра; для постраничных медиа содержащим блоком является область страницы.
если элементpositionзаabsolute, его содержащий блок состоит из ближайшего предка элементовpositionзаrelative,absoluteилиfixedЭлементы генерируются, правила следующие:
- Если элемент-предок является встроенным элементом, содержащий его блок представляет собой ограничивающую рамку вокруг элемента.padding boxes of the first and the last inline boxes generated for that element.
- В других случаях содержащий блок состоит из узла предка.padding edgeсочинение
Если позиционированный элемент-предок не может быть найден, содержащий блокначальный содержащий блок

контекст укладки, правила компоновки

Порядок укладки по умолчанию по оси Z следующий (снизу вверх):

Граница и фон корневого элемента
Элементы в обычном потоке идут в порядке html
ползунок
позиционированные элементы в том порядке, в котором они появляются в html

Как создать контекст стека:

корневой элемент
Позиционированные элементы с z-индексом, отличным от auto
a flex item with a z-index value other than 'auto'
элементы с непрозрачностью менее 1
В мобильном webkit и chrome22+ z-index является автоматическим, position: fixed также создаст новый контекст стека.

Как центрировать элемент по горизонтали

Если центрируемый элементВстроенные элементы в обычном потоке, установить для родительского элементаtext-align: center;может быть достигнут
Если центрируемый элементблочный элемент в обычном потоке, 1) установить ширину элемента, 2) установить левое и правое поля на авто. 3) В IE6 его необходимо установить на родительский элементtext-align: center;, а затем восстановить требуемое значение дочернему элементу

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        text-align: center; /* 3 */
    }
    .content {
        width: 500px;      /* 1 */
        text-align: left;  /* 3 */
        margin: 0 auto;    /* 2 */

        background: purple;
    }
</style>
скопировать код

Если центрируемый элементплавающий элемент, 1) задать ширину элемента, 2)position: relative;, 3) Смещение плавающего направления (влево или вправо) устанавливается на 50%, 4) Поле в плавающем направлении устанавливается равным половине ширины элемента, умноженной на -1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: left;

        position: relative;   /* 2 */
        left: 50%;            /* 3 */
        margin-left: -250px;  /* 4 */

        background-color: purple;
    }
</style>
скопировать код

Если центрируемый элементАбсолютно позиционированные элементы, 1) установите ширину элемента, 2) установите смещение на 50%, 3) установите поле смещения в половину ширины элемента, умноженной на -1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        left: 50%;
        margin-left: -400px;

        background-color: purple;
    }
</style>
скопировать код

Если центрируемый элементАбсолютно позиционированные элементы, 1) установить ширину элемента, 2) установить левое и правое смещения на 0, 3) установить левое и правое поля на автоматический

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;

        background-color: purple;
    }
</style>
скопировать код

Как вертикально центрировать элемент

Использованная литература:6 Methods For Vertical Centering With CSS.Инвентаризация 8 видов CSS для достижения вертикального центрирования

Элемент, который необходимо центрировать,однострочный текст, установите больше, чемfont-sizeизline-height:

<p class="text">center text</p>

<style>
.text {
    line-height: 200px;
}
</style>
скопировать код

Раздел концепции $javascript

В чем разница и связь между e.getAttribute(propName) и e.propName элемента DOM e

e.getAttribute() — это стандартный метод DOM для управления атрибутами элементов документа. Он универсален и может использоваться в любом документе. Возвращаемый элемент находится в исходном файле.установить свойства
e.propName обычно используется для доступа к определенному элементу в HTML-документе.характеристика, браузер генерирует соответствующие объекты после разбора элемента (например, тег генерирует HTMLAnchorElement), характеристики этих объектов будут получены по определенным правилам и настройкам атрибутов, для атрибутов без соответствующих характеристик можно использовать только getAttribute для доступа
Возвращаемое значение e.getAttribute() — это значение, установленное в исходном файле, а тип — строка или нуль (некоторые реализации возвращают «»)
Возвращаемое значение e.propName может быть строковым, логическим, объектным, неопределенным и т. д.
Большинство атрибутов и свойств имеют прямое соответствие, и изменение одного повлияет на другое, например, на идентификатор, заголовок и другие атрибуты.
некоторые логические свойства<input hidden/>Параметры обнаружения должны иметь hasAttribute и removeAttribute для завершения или установить соответствующее свойство
рисунок<a href="../index.html">link</a>В атрибуте href при преобразовании в свойство необходимо получить полный URL-адрес посредством преобразования
Некоторые атрибуты и свойства не находятся во взаимно однозначном соответствии, например: в элементе управления формы<input value="hello"/>В соответствии со значением по умолчанию, изменение или установка свойства значения изменяет текущее значение элемента управления, а setAttribute изменяет свойство значения, не изменит свойство значения.

Разница между offsetWidth/offsetHeight, clientWidth/clientHeight и scrollWidth/scrollHeight

Возвращаемое значение offsetWidth/offsetHeight содержитcontent + padding + border, эффект такой же, как у e.getBoundingClientRect()
Возвращаемое значение clientWidth/clientHeight содержит толькоcontent + padding, если есть полосы прокрутки, такжеНе включает полосы прокрутки
Возвращаемое значение scrollWidth/scrollHeight содержитсодержимое + заполнение + размер переполняющего содержимого

Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9

Общие свойства и методы XMLHttpRequest

readyState: Целое число, представляющее статус запроса, значение:

UNSENT(0): объект создан
OPENED(1): вызов open() успешно В этом состоянии вы можете установить заголовок запроса для xhr или использовать send() для отправки запроса
HEADERS_RECEIVED(2): автоматический доступ ко всем перенаправлениям и получение HTTP-заголовков окончательного ответа.
LOADING(3): Получено тело ответа
DONE(4): Передача данных завершена или при передаче возникает ошибка

onreadystatechange: функция вызывается при изменении readyState
status: код состояния HTTP, возвращаемый сервером (например, 200, 404).
statusText: информация о статусе HTTP, возвращаемая сервером (например, OK, No Content).
responseText: полный ответ сервера в виде строки
responseXML: объект документа, представляющий XML-документ, преобразованный в ответ сервера.
abort(): отменить асинхронный HTTP-запрос
getAllResponseHeaders(): возвращает строку, содержащую все заголовки HTTP, отправленные сервером в ответе. Каждый заголовок представляет собой пару имя/значение, разделенную двоеточием, а возврат каретки/перевод строки используется для разделения строк заголовка.
getResponseHeader(headerName): возвращает значение заголовка, соответствующее headName
open(method, url, asynchronous [, user, password]): Инициализировать запрос для отправки на сервер. method — метод HTTP без учета регистра; url — относительный или абсолютный URL-адрес, отправленный запросом; asynchronous указывает, является ли запрос асинхронным; пользователь и пароль обеспечивают аутентификацию
setRequestHeader(name, value): установить заголовки HTTP
send(body): Инициализировать запрос сервера. Тело параметра содержит часть тела запроса, которая представляет собой строку пары ключ-значение для запросов POST; null для запросов GET.

Разница и связь между фокусом/размытием и фокусом/фокусом

фокус/размытие не пузырится, пузырится фокус/фокус
focus/blur имеет хорошую совместимость, а focusin/focusout поддерживает хорошую совместимость с браузерами, отличными от FireFox. Если вам нужно использовать хостинг событий, вы можете рассмотреть возможность использования захвата событий в FireFox. elem.addEventListener('focus', handler, true)
Фокусируемые элементы:
1. window
2. Ссылка была нажата или нажата с клавиатуры
3. Пространство формы было нажато или использовалась клавиатура
4. настраиватьtabindexЭлемент атрибута был нажат или нажат с клавиатуры

Разница и связь между mouseover/mouseout и mouseenter/mouseleave

mouseover/mouseout — стандартные события,Все браузеры поддерживают;mouseenter/mouseleave — это уникальные события, появившиеся в IE5.5 и позже принятые стандартом DOM3, а также поддерживаемые современными стандартными браузерами.
наведение/отключение мыши дапузырьСобытия; mouseenter/mouseleaveне пузырится. должно бытьКогда несколько элементов отслеживают события входа/выхода мыши, для повышения производительности рекомендуется использовать хостинг mouseover/mouseout.
В стандартной модели событий event.target представляет элемент, который перемещается вперед/назад.vent.relatedTargetСоответствует перемещению/например, элементам; в старом IE event.srcElement представляет элемент, который перемещается/удаляется,event.toElementпредставляет удаленный целевой элемент,event.fromElementПредставляет исходный элемент при перемещении

Пример: когда мышь перемещается за пределы элемента div#target, выполняется обработка, и логика оценки выглядит следующим образом:

<div id="target"><span>test</span></div>

<script type="text/javascript">
var target = document.getElementById('target');
if (target.addEventListener) {
  target.addEventListener('mouseout', mouseoutHandler, false);
} else if (target.attachEvent) {
  target.attachEvent('onmouseout', mouseoutHandler);
}

function mouseoutHandler(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;

  // 判断移出鼠标的元素是否为目标元素
  if (target.id !== 'target') {
    return;
  }

  // 判断鼠标是移出元素还是移到子元素
  var relatedTarget = event.relatedTarget || e.toElement;
  while (relatedTarget !== target
    && relatedTarget.nodeName.toUpperCase() !== 'BODY') {
    relatedTarget = relatedTarget.parentNode;
  }

  // 如果相等，说明鼠标在元素内部移动
  if (relatedTarget === target) {
    return;
  }

  // 执行需要操作
  //alert('鼠标移出');

}
</script>
скопировать код

Разница между sessionStorage, localStorage и куки

Будет сохранено на стороне браузера, есть ограничения по размеру, ограничения по происхождению
Файл cookie будет отправлен на сервер при выполнении запроса. В качестве идентификатора сеанса сервер может изменить файл cookie, веб-хранилище не будет отправлено на сервер.
Файл cookie имеет концепцию пути, дочерний путь может получить доступ к файлу cookie родительского пути, родительский путь не может получить доступ к файлу cookie дочернего пути.
Срок действия: куки действителен в течение установленного срока действия, а браузер по умолчанию закрыт, sessionStorage действителен до закрытия окна, а localStorage действителен длительное время, пока пользователь не удалит его.
Общий: sessionStorage не может использоваться совместно, localStorage используется совместно документами одного происхождения, файлы cookie используются совместно документами одного происхождения и соответствуют правилам пути.
Модификация localStorage вызовет событие обновления других окон документов.
Файл cookie имеет безопасный атрибут, требующий передачи HTTPS.
Браузеры не могут хранить более 300 файлов cookie, один сервер не может превышать 20, а размер каждого файла cookie не может превышать 4 КБ. Поддержка размера веб-хранилища может достигать 5 МБ

Междоменная связь JavaScript

Одно и то же происхождение: два документа должны иметь одно и то же происхождение.

тот же протокол
такое же доменное имя
тот же порт

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

Если это просто, как журналодиночное сообщение, новый<img>,<script>,<link>,<iframe>элемент, через атрибуты src, href, установленные для целевого URL. Реализовать междоменные запросы
если требуетсяJSON-данные,использовать<script>сделать jsonp-запрос
в современных браузерахмногооконная связьИспользуйте targetWindow.postMessage(data, origin) спецификации HTML5, где data — это отправляемый объект, а origin — источник целевого окна. window.addEventListener('message', handler, false); event.data обработчика — это данные, отправленные postMessage, event.origin — источник отправляющего окна, а event.source — ссылка на окно для отправки сообщения
Внутренний сервер прокси-сервер запроса Cross URL домена, затем возвращает данные
Данные междоменного запроса, современные браузеры могут использовать функцию CORS спецификации HTML5, если целевой сервер возвращает HTTP-заголовок**Access-Control-Allow-Origin: *** Вы можете получить доступ к междоменным ресурсам, таким как обычный ajax

Какие типы данных есть в javascript

Шесть основных типов данных

undefined
null
string
boolean
number
symbol(ES6)

ссылочный тип

Object

Какое закрытие, какая польза от закрытия

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

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

Распространенное использование замыканий:

Создание привилегированных методов для управления доступом
Обработчики событий и обратные вызовы

Сколько способов определить функции в javascript

выражение объявления функции
оператор функции
Конструктор функций
ES6:arrow function

Важные ссылки:MDN:Functions_and_function_scope

Хранилище приложений и автономные веб-приложения

HTML5 добавляет кеширование приложений, позволяя веб-приложениям сохранять само приложение в браузере пользователя, и пользователь может получить к нему доступ в автономном режиме. 1. Установите атрибут manifest для элемента html:<html manifest="myapp.appcache">, имя суффикса - это просто соглашение, реальный метод идентификации - черезtext/cache-manifestкак тип MIME. Поэтому вам нужно настроить сервер, чтобы убедиться, что настройки правильные 2. Первая строка файла манифеста:CACHE MANIFEST, остальное — это список URL-адресов для кэширования, каждая строка, относительный путь относительно URL-адреса файла манифеста. Комментарии начинаются с # 3. Существует три типа URL-адресов:CACHE: тип по умолчанию.NETWORK: указывает, что ресурс никогда не кэшируется.FALLBACK: Каждая строка содержит два URL-адреса, второй URL-адрес относится к ресурсу, который необходимо загрузить и сохранить в кеше, первый URL-адрес является префиксом. Любой URL-адрес, соответствующий этому префиксу, не будет кэшироваться, и если загрузка такого URL-адреса из сети не удалась, вместо него будет использоваться кэшированный ресурс, указанный вторым URL-адресом. Ниже приведен пример файла:

CACHE MANIFEST

CACHE:
myapp.html
myapp.css
myapp.js

FALLBACK:
videos/ offline_help.html

NETWORK:
cgi/
скопировать код

Клиентское хранилище localStorage и sessionStorage

localStorage действителен навсегда, sessionStorage действителен до закрытия окна верхнего уровня
Документы того же происхождения могут читать и изменять данные localStorage, sessionStorage разрешает доступ только к документам в том же окне, например к документам того же происхождения, импортированным через iframe.
Объекты хранилища часто используются как обычные объекты JavaScript:Доступ к строковым значениям путем установки свойств, также черезsetItem(ключ, значение) набор,getItem (ключ) читать,removeItem (ключ) удалить,clear() удаляет все данные,длина указывает количество сохраненных элементов данных,key(index) возвращает ключ соответствующего индекса

localStorage.setItem('x', 1); // storge x->1
localStorage.getItem('x); // return value of x

// 枚举所有存储的键值对
for (var i = 0, len = localStorage.length; i < len; ++i ) {
    var name = localStorage.key(i);
    var value = localStorage.getItem(name);
}

localStorage.removeItem('x'); // remove x
localStorage.clear();  // remove all data
скопировать код

куки и их операции

Файл cookie — это небольшой объем данных, сохраняемых веб-браузером, который изначально был разработан для использования на стороне сервера в качестве расширения протокола HTTP. Данные cookie автоматически передаются между браузером и сервером.
Обнаружение поддержки путем чтения и записи файлов cookie
Атрибут cookie имеетназвание,ценность,max-age,path, domain,secure;
Файл cookie действителен по умолчанию для сеанса браузера, как только пользователь закрывает браузер, данные теряются, установивmax-age=secondsатрибут сообщает браузеру дату истечения срока действия файла cookie
область действия cookie черезИсточник документацииипуть к документуопределить поpathиdomainКонфигурация, веб-страницы могут быть доступны в том же каталоге или подкаталоге документов
Метод сохранения данных с помощью файлов cookie: установите строку, соответствующую цели для document.cookie, следующим образом.
Прочитайте document.cookie, чтобы получить строку, разделенную символом ';', key=value, проанализируйте, чтобы получить результат

document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';

document.cookie = 'name=aaa; path=/; domain=domain; secure';
// 要改变cookie的值，需要使用相同的名字、路径和域，新的值
// 来设置cookie，同样的方法可以用来改变有效期

// 设置max-age为0可以删除指定cookie

//读取cookie，访问document.cookie返回键值对组成的字符串，
//不同键值对之间用'; '分隔。通过解析获得需要的值
скопировать код

cookieUtil.js: Самописный инструмент для работы с файлами cookie.

Какие есть методы определения объектов в javascript

Литералы объекта:var obj = {};
Конструктор:var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);

Каков процесс оператора === для оценки равенства?

Если два значения не одного типа, они не равны
Если оба значения равны нулю или оба не определены, они равны
Если оба значения логические true или оба ложные, они равны
если один из нихNaN, они не равны
Если оба являются числовыми и числа равны, они равны, -0 равно 0
Если они обе являются строками и содержат одно и то же 16-битное значение в одной и той же позиции, они равны; если они не равны по длине или содержанию, они не равны; две строки показывают один и тот же результат, но разные кодировки == и = == думаю, что они не равны
Если они указывают на один и тот же объект, массив, функцию, они равны, если они указывают на разные объекты, они не равны.

Как оператор == оценивает равенство?

Если два типа значений совпадают, сравните их по методу сравнения ===.
Если типы разные, используйте следующие правила для сравнения
Если одно из значений равно null, а другое не определено, они равны
если значениеномердругойнить,будетпреобразовать строку в числоСравнивать
Если есть логический тип, он будетtrue преобразуется в 1, false преобразуется в 0, а затем используйте правило ==, чтобы продолжить сравнение
Если одно значение является объектом, а другое числом или строкой, преобразуйте объект в примитивное значение и продолжите сравнение с правилом ==
Все остальные случаи считаются неравными

Шаги преобразования объекта в строку

Если у объекта есть метод toString(), JavaScript вызывает его. Если возвращается примитивное значение (примитивное значение, такое как логический номер строки), преобразуйте это значение в строку в качестве результата.
Если у объекта нет метода toString() или возвращаемое значение не является примитивным значением, javascript ищет метод valueOf() объекта, вызывает его, если он существует, и преобразует возвращенный результат в строку как результат если он существует.
В противном случае javascript не может получить примитивное значение из toString() или valueOf() и выдает ошибку TypeError.

Шаги преобразования объекта в число

1. 如果对象有valueOf()方法并且返回元素值，javascript将返回值转换为数字作为结果
2. 否则，如果对象有toString()并且返回原始值，javascript将返回结果转换为数字作为结果
3. 否则，throws a TypeError
скопировать код

Правила сравнения для ,=

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

Если операнд является объектом, преобразовать в исходное значение: если метод valueOf возвращает исходное значение, используйте это значение, в противном случае используйте результат метода toString и сообщите об ошибке, если преобразование не удалось
После необходимых преобразований объекта в примитив, если оба операнда являются строками, они сравниваются в алфавитном порядке (размер их 16-битных значений Unicode).
В противном случае, если один из операндов не является строкой,Преобразование двух операндов в числаСравнивать

+ рабочий процесс оператора

Если какой-либо операнд является объектом, преобразовать в примитивное значение
В это время, если естьОдин операнд - это строка, остальные операнды преобразуются в строки и выполняется конкатенация
в противном случае:Все операнды преобразуются в числа и выполняется сложение

Каковы характеристики и свойства переменной arguments внутри функции и как преобразовать ее в массив

arguments Локальная переменная, содержащаяся во всех функциях, представляет собой массивоподобный объект, соответствующий фактическим параметрам при вызове функции. Если функция определяет параметр с таким же именем, он перезапишет объект по умолчанию при вызове.
arguments[index] соответствует фактическим параметрам при вызове функции, и когда фактические параметры изменяются с помощью аргументов, фактические параметры будут изменены одновременно
arguments.length — количество фактических параметров (Function.length указывает длину формальных параметров)
arguments.callee — это сама выполняющаяся в данный момент функция.При использовании этого свойства для выполнения рекурсивных вызовов обратите внимание на изменение этого
arguments.caller — это функция, которая вызывает текущую функцию (устарело)
Преобразовать в массив:var args = Array.prototype.slice.call(arguments, 0);

Как модель событий DOM, напишите класс инструмента EventUtil для обеспечения совместимости управления событиями

События DOM включают два этапа: захват и всплывающее окно: событие этапа захвата инициирует событие из окна, а затем проходит через узел-предок один раз к элементу DOM, вызвавшему событие; событие этапа пузырька последовательно от начального элемента к узлу-предку пройти до окна
Стандартный прослушиватель событий elem.addEventListener(тип, обработчик, захват)/elem.removeEventListener(тип, обработчик, захват): обработчик получает объект события, который сохраняет информацию о событии в качестве параметра, event.target — это объект, который запускает событие , а контекст вызова обработчика это Объект, к которому привязан прослушиватель, event.preventDefault() отменяет поведение события по умолчанию, а event.stopPropagation()/event.stopImmediatePropagation() отменяет доставку события.
Старая версия прослушивателя событий IE elem.attachEvent('on'+type, handler)/elem.detachEvent('on'+type, handler): обработчик не получает событие в качестве параметра, информация о событии хранится в окне. событие, триггерное событие Объект — event.srcElement, контекст выполнения обработчика — это окно, и вызов handler.call(elem, event) в замыкании может имитировать стандартную модель, а затем возвращать замыкание, чтобы гарантировать удаление слушатель. Когда event.returnValue имеет значение false, отменяет поведение события по умолчанию, когда event.cancleBubble имеет значение true, отменяет распространение времени
Управляемые обработчики событий обычно используют всплывающие сообщения для повышения производительности программы.

/**
 * 跨浏览器事件处理工具。只支持冒泡。不支持捕获
 * @author  (qiu_deqing@126.com)
 */

var EventUtil = {
    getEvent: function (event) {
        return event || window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    },
    // 返回注册成功的监听器，IE中需要使用返回值来移除监听器
    on: function (elem, type, handler) {
        if (elem.addEventListener) {
            elem.addEventListener(type, handler, false);
            return handler;
        } else if (elem.attachEvent) {
            var wrapper = function () {
              var event = window.event;
              event.target = event.srcElement;
              handler.call(elem, event);
            };
            elem.attachEvent('on' + type, wrapper);
            return wrapper;
        }
    },
    off: function (elem, type, handler) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, handler, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, handler);
        }
    },
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else if ('returnValue' in event) {
            event.returnValue = false;
        }
    },
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else if ('cancelBubble' in event) {
            event.cancelBubble = true;
        }
    },
    /**
     * keypress事件跨浏览器获取输入字符
     * 某些浏览器在一些特殊键上也触发keypress，此时返回null
     **/
     getChar: function (event) {
        if (event.which == null) {
            return String.fromCharCode(event.keyCode);  // IE
        }
        else if (event.which != 0 && event.charCode != 0) {
            return String.fromCharCode(event.which);    // the rest
        }
        else {
            return null;    // special key
        }
     }
};
скопировать код

Оцените преимущества и недостатки трех методов достижения наследования и улучшите

function Shape() {}

function Rect() {}

// 方法1
Rect.prototype = new Shape();

// 方法2
Rect.prototype = Shape.prototype;

// 方法3
Rect.prototype = Object.create(Shape.prototype);

Rect.prototype.area = function () {
  // do something
};
скопировать код

метод 1:

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

Способ 2:

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

Способ 3:

Плюсы: правильная настройка цепи прототипа и отсутствие недостатков метода 1.2.
Минусы: подход ES5 требует внимания к совместимости

Улучшать:

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

function Rect() {
    Shape.call(this);
}
скопировать код

Чтобы заменить прототип подкласса по умолчанию вновь созданным объектом, установитеRect.prototype.constructor = Rect;Гарантированная согласованность
Полифилл для третьего метода:

function create(obj) {
    if (Object.create) {
        return Object.create(obj);
    }

    function f() {};
    f.prototype = obj;
    return new f();
}
скопировать код

Раздел программирования $javascript

Используйте нативный js для реализации функции добавления прозрачной маски (переменная прозрачности, по умолчанию 0,2) к любому элементу, указанному на странице, чтобы сделать щелчок в этой области недействительным. Требуется совместимость с IE8+ и другими основными браузерами. Эффект Слой маски выглядит следующим образом:

<style>
#target {
    width: 200px;
    height: 300px;
    margin: 40px;
    background-color: tomato;
}
</style>

<div id="target"></div>

<script>
function addMask(elem, opacity) {
    opacity = opacity || 0.2;

    var rect = elem.getBoundingClientRect();
    var style = getComputedStyle(elem, null);

    var mask = document.createElement('div');
    mask.style.position = 'absolute';
    var marginLeft = parseFloat(style.marginLeft);
    mask.style.left = (elem.offsetLeft - marginLeft) + 'px';
    var marginTop = parseFloat(style.marginTop);
    mask.style.top = (elem.offsetTop - marginTop) + 'px';
    mask.style.zIndex = 9999;
    mask.style.opacity = '' + opacity;
    mask.style.backgroundColor = '#000';

    mask.style.width = (parseFloat(style.marginLeft) +
        parseFloat(style.marginRight) + rect.width) + 'px';
    mask.style.height = (parseFloat(style.marginTop) +
        parseFloat(style.marginBottom) + rect.height) + 'px';

    elem.parentNode.appendChild(mask);
}

var target = document.getElementById('target');
addMask(target);

target.addEventListener('click', function () {
    console.log('click');
}, false);
</script>
скопировать код

Пожалуйста, запишите это в коде (сегодня неделя x), где x представляет день недели, если день понедельник, вывод должен быть "сегодня понедельник"

var days = ['日','一','二','三','四','五','六'];
var date = new Date();

console.log('今天是星期' + days[date.getDay()]);
скопировать код

Следующий код хочет вывести результат 0 1 2 3 4 в течение времени задержки цикла. Верен ли результат вывода? Если нет, объясните, почему, и измените код в цикле, чтобы вывести правильный результат.

for (var i = 0; i < 5; ++i) {
  setTimeout(function () {
    console.log(i + ' ');
  }, 100);
}
скопировать код

Правильный результат не может быть выведен, потому что функция параметра, принятая setTimeout в цикле, обращается к переменной i через замыкание. Среда выполнения JavaScript является однопоточной, и функция, зарегистрированная с помощью setTimeout, должна дождаться бездействия потока, прежде чем ее можно будет выполнить.В это время цикл for завершился, а значение i равно 5. Пять временных интервалов выходы все 5. Метод модификации: поместите setTimeout в выражение немедленного вызова функции, передав значение i в качестве параметра функции-оболочке, создав новое закрытие

for (var i = 0; i < 5; ++i) {
  (function (i) {
    setTimeout(function () {
      console.log(i + ' ');
    }, 100);
  }(i));
}
скопировать код

Существует класс Page, и его объект-прототип имеет множество методов, начинающихся с post (например, postMsg); есть еще одна функция перехвата chekc, которая возвращает только true или false. Пожалуйста, создайте функцию, которая должна преобразовывать методы postXXX исходного Страница в пакетах, сохраняя свою исходную функцию, добавьте функцию проверки перехвата в каждый метод postXXX. Когда chekc возвращает true, исходный метод postXXX будет продолжать выполняться, а исходный метод postXXX не будет выполняться, когда он возвращает false.

function Page() {}

Page.prototype = {
  constructor: Page,

  postA: function (a) {
    console.log('a:' + a);
  },
  postB: function (b) {
    console.log('b:' + b);
  },
  postC: function (c) {
    console.log('c:' + c);
  },
  check: function () {
    return Math.random() > 0.5;
  }
}

function checkfy(obj) {
  for (var key in obj) {
    if (key.indexOf('post') === 0 && typeof obj[key] === 'function') {
      (function (key) {
        var fn = obj[key];
        obj[key] = function () {
          if (obj.check()) {
            fn.apply(obj, arguments);
          }
        };
      }(key));
    }
  }
} // end checkfy()

checkfy(Page.prototype);

var obj = new Page();

obj.postA('checkfy');
obj.postB('checkfy');
obj.postC('checkfy');
скопировать код

Заполните подсказку ниже

Напишите функцию глубокого клонирования javascript deepClone

function deepClone(obj) {
    var _toString = Object.prototype.toString;

    // null, undefined, non-object, function
    if (!obj || typeof obj !== 'object') {
        return obj;
    }

    // DOM Node
    if (obj.nodeType && 'cloneNode' in obj) {
        return obj.cloneNode(true);
    }

    // Date
    if (_toString.call(obj) === '[object Date]') {
        return new Date(obj.getTime());
    }

    // RegExp
    if (_toString.call(obj) === '[object RegExp]') {
        var flags = [];
        if (obj.global) { flags.push('g'); }
        if (obj.multiline) { flags.push('m'); }
        if (obj.ignoreCase) { flags.push('i'); }

        return new RegExp(obj.source, flags.join(''));
    }

    var result = Array.isArray(obj) ? [] :
        obj.constructor ? new obj.constructor() : {};

    for (var key in obj ) {
        result[key] = deepClone(obj[key]);
    }

    return result;
}

function A() {
    this.a = a;
}

var a = {
    name: 'qiu',
    birth: new Date(),
    pattern: /qiu/gim,
    container: document.body,
    hobbys: ['book', new Date(), /aaa/gim, 111]
};

var c = new A();
var b = deepClone(c);
console.log(c.a === b.a);
console.log(c, b);
скопировать код

Дополнительный код: после того, как мышь щелкнет Button1, переместите Button1 на заднюю часть Button2.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>TEst</title>
</head>
<body>

<div>
   <input type="button" id ="button1" value="1" />
   <input type="button" id ="button2" value="2" />
</div>

<script type="text/javascript">
    var btn1 = document.getElementById('button1');
    var btn2 = document.getElementById('button2');

    addListener(btn1, 'click', function (event) {
        btn1.parentNode.insertBefore(btn2, btn1);
    });

    function addListener(elem, type, handler) {
        if (elem.addEventListener) {
            elem.addEventListener(type, handler, false);
            return handler;
        } else if (elem.attachEvent) {
            function wrapper() {
                var event = window.event;
                event.target = event.srcElement;
                handler.call(elem, event);
            }
            elem.attachEvent('on' + type, wrapper);
            return wrapper;
        }
    }

</script>
</body>
</html>
скопировать код

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>TEst</title>
</head>
<body>

    <span id="target"></span>


<script type="text/javascript">
    // 为了简化。每月默认30天
    function getTimeString() {
        var start = new Date();
        var end = new Date(start.getFullYear() + 1, 0, 1);
        var elapse = Math.floor((end - start) / 1000);

        var seconds = elapse % 60 ;
        var minutes = Math.floor(elapse / 60) % 60;
        var hours = Math.floor(elapse / (60 * 60)) % 24;
        var days = Math.floor(elapse / (60 * 60 * 24)) % 30;
        var months = Math.floor(elapse / (60 * 60 * 24 * 30)) % 12;
        var years = Math.floor(elapse / (60 * 60 * 24 * 30 * 12));

        return start.getFullYear() + '年还剩' + years + '年' + months + '月' + days + '日'
            + hours + '小时' + minutes + '分' + seconds + '秒';
    }

    function domText(elem, text) {
        if (text == undefined) {

            if (elem.textContent) {
                return elem.textContent;
            } else if (elem.innerText) {
                return elem.innerText;
            }
        } else {
            if (elem.textContent) {
                elem.textContent = text;
            } else if (elem.innerText) {
                elem.innerText = text;
            } else {
                elem.innerHTML = text;
            }
        }
    }

    var target = document.getElementById('target');

    setInterval(function () {
        domText(target, getTimeString());
    }, 1000)
</script>

</body>
</html>
скопировать код

Завершите функцию, примите массив в качестве параметра, элементы массива являются целыми числами или массивами, элементы массива содержат целые числа или массивы, и функция возвращает плоский массив

Например: [1, [2, [[3, 4], 5], 6]] => [1, 2, 3, 4, 5, 6]

    var data =  [1, [2, [ [3, 4], 5], 6]];

    function flat(data, result) {
        var i, d, len;
        for (i = 0, len = data.length; i < len; ++i) {
            d = data[i];
            if (typeof d === 'number') {
                result.push(d);
            } else {
                flat(d, result);
            }
        }
    }

    var result = [];
    flat(data, result);

    console.log(result);
скопировать код

Как узнать, является ли объект массивом

Если браузер поддерживает Array.isArray(), это можно судить напрямую, в противном случае необходимо сделать необходимое суждение

/**
 * 判断一个对象是否是数组，参数不是对象或者不是数组，返回false
 *
 * @param {Object} arg 需要测试是否为数组的对象
 * @return {Boolean} 传入参数是数组返回true，否则返回false
 */
function isArray(arg) {
    if (typeof arg === 'object') {
        return Object.prototype.toString.call(arg) === '[object Array]';
    }
    return false;
}
скопировать код

Пожалуйста, оцените следующий код прослушивателя событий и дайте предложения по улучшению

if (window.addEventListener) {
  var addListener = function (el, type, listener, useCapture) {
    el.addEventListener(type, listener, useCapture);
  };
}
else if (document.all) {
  addListener = function (el, type, listener) {
    el.attachEvent('on' + type, function () {
      listener.apply(el);
    });
  };
}
скопировать код

Функция: Обнаружение функции браузера реализует привязку событий DOM между браузерами.