Резюме из 79 пунктов знаний, которые нельзя игнорировать во фронтенд-разработке

Некоторые недостатки в прошлом, через блог, хорошее резюме.

1.css отключить события мыши

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

2. Понимание get/post и разницы между ними

http

Протокол передачи гипертекста (HTTP) был разработан для обеспечения связи между клиентами и серверами. HTTP работает по протоколу «запрос-ответ» между клиентом и сервером. Веб-браузер может быть клиентом, а веб-приложение на вашем компьютере может быть сервером.

HTTP-метод:

HEAD: то же, что и GET, но возвращает только заголовки HTTP, а не тело документа. PUT: загрузить указанное представление URI УДАЛИТЬ: удалить указанный ресурс ПАРАМЕТРЫ: возвращает методы HTTP, поддерживаемые сервером. CONNECT: преобразование соединения запроса в прозрачный канал TCP/IP. POST: отправьте данные для обработки на указанный ресурс.

// 查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

GET: запросить данные из указанного ресурса

Разница между GET и POST

GET-запросы могут кэшироваться GET-запросы остаются в истории браузера Запросы GET можно добавить в закладки Запросы GET не следует использовать при работе с конфиденциальными данными. GET-запрос имеет ограничение по длине (2048 символов), IE и Safari — 2k, Opera — 4k, Firefox, Chrome — 8k Запросы GET следует использовать только для получения данных

POST-запросы не кэшируются POST-запросы не сохраняются в истории браузера POST не может быть добавлен в закладки Запросы POST не требуют длины данных

3. Способы реализации полосатой сетки

1. nth-child(even/odd)

// odd表示基数，此时选中基数行的样式，even表示偶数行
.row:nth-child(odd){
    background: #eee;
}

2. nth-of-type(odd)

.row:nth-of-type(odd){
    background: #eee;
}

3. Реализация градиента linear-gradient

.stripe-bg{
  padding: .5em;
  line-height: 1.5em;
  background: beige;
  background-size: auto 3em;
  background-origin: content-box;
  background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}

4.js найти расстояние между двумя точками на плоскости

// 数据可以以数组方式存储，也可以是对象方式
let a = {x:'6', y:10},
        b = {x: 8, y: 20};
    function distant(a,b){
        let dx = Number(a.x) - Number(b.x)
        let dy = Number(a.y) - Number(b.y)
        return Math.pow(dx*dx + dy*dy, .5)
    }

5.css запрещает выбор пользователя

body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

6. Дедупликация массива

// indexOf实现
var array = [1, 1, '1'];

function unique(array) {
    var res = [];
    for (var i = 0, len = array.length; i < len; i++) {
        var current = array[i];
        if (res.indexOf(current) === -1) {
            res.push(current)
        }
    }
    return res;
}

console.log(unique(array));

// 排序后去重
var array = [1, 1, '1'];

function unique(array) {
    var res = [];
    var sortedArray = array.concat().sort();
    var seen;
    for (var i = 0, len = sortedArray.length; i < len; i++) {
        // 如果是第一个元素或者相邻的元素不相同
        if (!i || seen !== sortedArray[i]) {
            res.push(sortedArray[i])
        }
        seen = sortedArray[i];
    }
    return res;
}

console.log(unique(array));

// filter实现
var array = [1, 2, 1, 1, '1'];
function unique(array) {
    var res = array.filter(function(item, index, array){
        return array.indexOf(item) === index;
    })
    return res;
}
console.log(unique(array));

// 排序去重
var array = [1, 2, 1, 1, '1'];
function unique(array) {
    return array.concat().sort().filter(function(item, index, array){
        return !index || item !== array[index - 1]
    })
}
console.log(unique(array));

// Object键值对
var array = [{value: 1}, {value: 1}, {value: 2}];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        console.log(typeof item + JSON.stringify(item))
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
    })
}

console.log(unique(array)); // [{value: 1}, {value: 2}]

// ES6 Set实现
var unique = (a) => [...new Set(a)]

7. Что такое CDN и преимущества CDN

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

2. Возможно, файл уже был загружен и сохранен в кеше Некоторые распространенные библиотеки js или библиотеки стилей css, такие как jQuery, очень распространены в сети. Когда пользователь просматривает одну из ваших веб-страниц, очень вероятно, что он посетил другой веб-сайт через CDN, используемый вашим веб-сайтом, и бывает, что этот веб-сайт также использует jQuery, тогда браузер пользователя уже кэшировал файл jQuery ( если файл с таким же именем и тем же IP-адресом кэшируется, браузер будет напрямую использовать кэшированный файл и не будет загружать его снова), поэтому он не будет загружаться снова, что косвенно повышает скорость доступа к веб-сайту.

3. Высокая эффективность Каким бы хорошим ни был ваш сайт, он не пройдет Baidu NB и Google, верно? Хороший CDN обеспечит более высокую эффективность, более низкую задержку в сети и более низкий уровень потери пакетов.

4. Распределенный ЦОД Если ваш сайт находится в Пекине, когда пользователь из Гонконга или дальше посещает ваш сайт, его запрос данных неизбежно будет очень медленным. А CDN позволят пользователю загружать нужные файлы с ближайшего к нему узла, поэтому улучшение скорости загрузки — само собой разумеющееся.

5. Анализ использования В обычных условиях поставщики CDN (такие как Baidu Cloud Accelerator) будут предоставлять функции статистики данных, вы сможете узнать больше о доступе пользователей к вашему собственному веб-сайту, а также сможете своевременно внести соответствующие коррективы на свой веб-сайт в соответствии со статистическими данными.

6. Эффективно предотвратите атаки на сайт При нормальных обстоятельствах провайдеры CDN также будут предоставлять услуги по обеспечению безопасности веб-сайтов.

8. Схема «Святой Грааль» и схема «Двойное крыло»

Ссылка на ссылку

9. Регулярное выражение, соответствующее номеру мобильного телефона

function checkPhone(){
    if(!(/^1[345678]\d{9}$/.test(phone))){
        alert("手机号码有误，请重填");
        return false;
    }
}

10. Как улучшить скорость загрузки первой частоты

1. Внешний файл js размещается внизу тела, а внешний файл css размещается в голове 2. Используйте как можно больше поддоменов для статических http-ресурсов 3. Лучше всего включать gzip, когда сервер предоставляет статические ресурсы html и http. 4. Установите expires, last-modified в заголовках http ответов js, css, img и других ресурсов. 5. Минимизируйте количество http-запросов 6. сжатие ресурсов js/css/html/img 7. Используйте css spirtes, чтобы уменьшить количество запросов img 8. Ленивая загрузка больших изображений с помощью lazyload 9. Избегайте 404 и уменьшите охват js 10. Уменьшение размера файла cookie может ускорить получение ответа 11. Уменьшите количество элементов dom 12. Используйте асинхронные скрипты для динамического создания скриптов

11. Ядро браузера (движок рендеринга)

Браузер IE/360/Sogou: Trident Chrome/Safari/Opera: WebKit (форк KHTML с открытым исходным кодом) (Хотя мы называем WebKit ядром браузера, не следует напрямую вызывать механизм рендеринга, поскольку сам WebKit в основном состоит из двух движков, один из которых — движок рендеринга «WebCore», а другой — механизм интерпретации javascript «JSCore». , все они получены из механизма рендеринга KDE KHTML и механизма интерпретации javascript KJS.) (Начиная с версии Chrome 28.0.1469.0, выпущенной в 2013 г., Chrome отказался от движка Chromium и перешел на новейший движок Blink (основанный на WebKit2 — новый движок WebKit, запущенный Apple в 2010 г.), сравнение Blink с предыдущим поколением. это оптимизированный код, улучшенная структура DOM и повышенная безопасность.) (Чтобы сократить расходы на исследования и разработки, Opera объявила в феврале 2013 года, что откажется от Presto и вместо этого последует за Chrome, чтобы использовать движок Chromium ветки WebKit в качестве собственного основного движка браузера) Firefox/SeaMonkey: геккон

12. Процесс рендеринга в браузере и предложения по оптимизации

1）解析： 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 CSS，解析CSS会产生CSS规则树。 Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 2）渲染：浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。 Уведомление: Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。 CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。 然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。 3）绘制：最后通过调用操作系统Native GUI的API绘制。

Уменьшить оплавление и перерисовку 1) Не изменяйте стили DOM один за другим. Лучше заранее определить класс CSS, а затем изменить className DOM.

2. Переведите DOM в автономный режим и измените его. Такие как: Используйте объект documentFragment для управления DOM в памяти. Сначала задайте DOM display:none (с перекомпоновкой), а затем измените его по своему усмотрению. Например, измените его 100 раз, а затем снова отобразите. Клонируйте ноду DOM в память, а потом меняйте как хотите, после изменения меняйте на онлайн. 3) Не помещайте значение атрибута узла DOM в цикл как переменную в цикле. В противном случае это приведет к большому количеству чтения и записи свойств этого узла. 4) Используйте фиксированные или абсолютные позиции для анимированных HTML-элементов, попробуйте использовать transfoem, тогда изменение их CSS не приведет к перекомпоновке. 5) Минимизируйте использование макетов таблиц. Потому что небольшое изменение может привести к перестановке всей таблицы.

13. В чем разница между использованием link и @import, когда страница импортирует стили?

(1) ссылка — это тег XHTML. Помимо загрузки CSS, его также можно использовать для определения RSS, определения атрибутов соединения rel и т. д., тогда как @import предоставляется CSS и может использоваться только для загрузки CSS; (2) Когда страница загружена, ссылка будет загружена одновременно, и CSS, на который ссылается @import, будет ждать загрузки страницы перед загрузкой; (3) импорт предлагается CSS2.1, который может быть распознан только в IE5 или более поздних версиях, а ссылка является тегом XHTML, и нет проблем с совместимостью; (4) link поддерживает использование js для управления DOM для изменения стиля, а @import — нет;

14. Кратко опишите свое понимание семантики HTML?

Делайте правильные вещи с правильным ярлыком. Семантика HTML делает содержимое страницы структурированным, что удобно для парсинга браузерами и поисковыми системами; Отображается в одном формате документа, даже без стилей CSS, и легко читается; Сканеры поисковых систем также полагаются на теги HTML для определения контекста и веса каждого ключевого слова, что хорошо для SEO; Сделайте так, чтобы людям, читающим исходный код, было проще разделить сайт на блоки, чтобы их было легко читать, поддерживать и понимать.

15. Пожалуйста, опишите разницу между файлами cookie, sessionStorage и localStorage?

Файл cookie — это данные (обычно зашифрованные), которые хранятся на локальном терминале пользователя (на стороне клиента) веб-сайтом для идентификации пользователя. Данные cookie всегда передаются в HTTP-запросах одного и того же источника (даже если они не нужны) и передаются между браузером и сервером. sessionStorage и localStorage не отправляют данные на сервер автоматически, а только сохраняют их локально.

Размер хранилища: Размер данных cookie не может превышать 4 КБ. Хотя sessionStorage и localStorage также имеют ограничения на размер хранилища, они намного больше, чем файлы cookie, и могут достигать 5 МБ и более.

Период: localStorage хранит постоянные данные, данные не будут потеряны после закрытия браузера, если данные не будут активно удалены; Данные sessionStorage автоматически удаляются после закрытия текущего окна браузера. Файл cookie остается в силе до истечения срока действия файла cookie, даже если окно или браузер закрыты.

16. Каковы недостатки iframe?

*iframe будет блокировать событие Onload главной страницы; * Поисковая программа поисковой системы не может интерпретировать такие страницы, что не способствует поисковой оптимизации; * iframe и главная страница делят пул соединений, а в браузере есть ограничения на подключение одного и того же домена, поэтому это повлияет на параллельную загрузку страницы. Эти два недостатка необходимо учитывать перед использованием iframe. Если вам нужно использовать iframe, желательно через javascript Динамически добавляйте значение атрибута src в iframe, что позволяет обойти две вышеупомянутые проблемы.

17. Порядок и функции жизненного цикла родительско-дочерних компонентов Vue?

(Изображение взято с официального сайта vue. Дополнительные рекомендации по обучению vue см. на официальном сайте для просмотра подробных документов)

18. Для чего нужен код веб-проверки и какую проблему безопасности он решает?

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

19. Представляете стандартную блочную модель CSS? Чем отличается блочная модель младших версий IE?

(1) Существует два типа: блочная модель IE и блочная модель W3C; (2) Блочная модель: содержимое, отступы, поля, границы; (3) Отличие: содержательная часть IE учитывает границы и отступы;

20. Позиционное значение относительного и абсолютного позиционирования?

абсолютный Создает абсолютно позиционированный элемент, позиционированный относительно первого родительского элемента, значение которого не является статическим. исправлено (не поддерживается старым IE) Генерирует абсолютно позиционированные элементы, расположенные относительно окна браузера. родственник Создает относительно позиционированный элемент, расположенный относительно его нормального положения. статический По умолчанию. Без позиционирования элемент отображается в обычном потоке (игнорируя объявления верхнего, нижнего, левого и правого z-index). наследовать Указывает на наследование значения свойства position от родительского элемента.

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

• 24-битные изображения PNG имеют фон в браузерах iE6, решение состоит в том, чтобы сделать их PNG8.

• Поля и отступы по умолчанию в браузере отличаются. Решение состоит в том, чтобы добавить глобальное *{margin:0;padding:0;} для унификации.

• Ошибка двойного поля IE6: после того, как метка атрибута блока является плавающей и есть горизонтальное поле, поле, отображаемое в IE6, больше, чем настройка.

  Двойное расстояние от плавающего, т.е. #box{ float:left; width:10px; margin:0 0 0 100px;}

  В этом случае IE создаст расстояние 20px.Решение состоит в том, чтобы добавить --_display:inline; к элементу управления стилем метки float, чтобы преобразовать его во встроенный атрибут. (_ Этот символ распознается только ie6)

  Метод прогрессивной идентификации постепенно исключает части из целого.

  Во-первых, разумное использование тега "\9" отделяет браузер IE от всех ситуаций. Затем снова используйте «+», чтобы отделить IE8 от IE7 и IE6, чтобы IE8 распознавался независимо.

  css .bb{ background-color:red;/Все идентификации/ background-color:#00deff\9; /IE6, 7, 8 распознавание/ +background-color:#a200ff;/IE6, 7 распознавание/ _background-color:#1e0bd1;/IE6-распознавание/ }

• В IE вы можете использовать метод получения обычных свойств для получения пользовательских свойств, Вы также можете использовать getAttribute() для получения пользовательских атрибутов; В Firefox вы можете использовать getAttribute() только для получения пользовательских атрибутов. Решение. Получите единые настраиваемые атрибуты с помощью getAttribute().

• В IE четный объект имеет атрибуты x, y, но не имеет атрибутов pageX, pageY; В Firefox объект события имеет свойства pageX, pageY, но не имеет свойств x, y.

• Решение: (Условный комментарий) Недостатком является то, что это может увеличить количество дополнительных HTTP-запросов под браузером IE.

• В китайском интерфейсе Chrome текст размером менее 12 пикселей по умолчанию будет принудительно отображаться с размером 12 пикселей. Это можно решить, добавив в CSS свойство -webkit-text-size-adjust: none;.

Стиль наведения не отображается после доступа к гиперссылке. Стиль гиперссылки, который был нажат и посещен, больше не имеет наведения и активности. Решение состоит в том, чтобы изменить порядок свойств CSS: L-V-H-A : a: ссылка {} a: посещение {} a: наведение {} a: активно {}

22. Как можно оптимизировать CSS и повысить производительность?

ключевой селектор. Последняя часть селектора — это ключевой селектор (то есть часть, используемая для сопоставления с целевым элементом); Если правило имеет селектор ID в качестве ключевого селектора, не добавляйте метку к правилу. отфильтровать лишние правила (чтобы система стилей не тратила время на их сопоставление); Извлеките общий общедоступный стиль проекта, улучшите возможность повторного использования и напишите компоненты в соответствии с модулями, улучшите совместную разработку, ремонтопригодность и расширяемость проекта; Используйте инструменты предварительной обработки или инструменты сборки (gulp выполняет проверку синтаксиса в CSS, автоматическое заполнение префиксов, упаковку и сжатие, а также автоматическую плавную деградацию);

23. Как изменить желтый фон формы автозаполнения после того, как хром запомнит пароль?

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
  }

24. Как с помощью CSS сделать шрифты на странице четче и тоньше?

-webkit-font-smoothing: antialiased;

25. Сделать overflow:scroll плавно?

-webkit-overflow-scrolling: touch;

26. Как добавить запятую через каждые три цифры слева от числа с плавающей запятой, например 12000000,11, в «12 000 000,11»?

function commafy(num){
  	return num && num
  		.toString()
  		.replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
  			return $2 + ',';
  		});
  }

27. Области действия Javascript?

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

28. Расскажите о понимании этого объекта.

this всегда относится к прямому вызывающему объекту функции (а не к косвенному вызывающему); Если есть новое ключевое слово, оно указывает на объект из нового; В событии this указывает на объект, вызвавший событие.В частности, this в attachEvent в IE всегда указывает на глобальный объект Window;

29. Что делает eval?

Его функция состоит в том, чтобы преобразовать соответствующую строку в код JS и запустить ее; Следует избегать использования eval, что является небезопасным и очень требовательным к производительности (2 раза, один раз анализируется в оператор js и один раз выполняется). При преобразовании из строки JSON в объект JSON вы можете использовать eval, var obj =eval('('+ str +')');

30. Что такое объект окна, что такое объект документа?

Объект окна относится к окну, открытому браузером. Объект документа является доступной только для чтения ссылкой на объект Documentd (объект документа HTML), свойство объекта окна.

31. ["1", "2", "3"].map(parseInt) Какой ответ?

["1", "2", "3"].map(parseInt) Ответ: [1, NaN, NaN]

32. Что такое замыкание и зачем его использовать?

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

33. Что означает "использовать строго" в коде javascript? В чем разница между его использованием?

Режим, который делает кодирование JS более стандартизированным, устраняет некоторые необоснованные и неточные аспекты синтаксиса Javascript и снижает некоторые странности поведения. Плохие функции, поддерживаемые по умолчанию, отключены, например, не использовать with и не присваивать значения глобальным переменным в непредвиденных ситуациях; Показать объявление глобальных переменных, функции должны быть объявлены на верхнем уровне, функции не могут быть объявлены в нефункциональных блоках кода, arguments.callee также не разрешено; Обеспечить безопасность работы кода и ограничить модификацию аргументов в функциях; Улучшить эффективность компилятора и увеличить скорость работы;

34. Как узнать, принадлежит ли объект определенному классу?

if(a instanceof Person){
   alert('yes');
}
// 判断对象类型最好的方式
// 对于 Object 对象，直接调用 toString()  就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。
Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局对象 global 的引用

35. Процесс создания нового объекта

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

36. Ajax решает проблемы с кешем браузера

1. Плюс Anyajaxobj.SetRequestHeajaxobj.SetRequestHeajaxobj.SetRequestHeajaxobj.SetRequestHeajaxobj.SetRequestHeajaxobj.SetRequestHeajaxobj.SetRequestHeader ("IF-Modified-Since").

2. Добавьте anyAjaxObj.setRequestHeader("Cache-Control", "no-cache") перед отправкой запроса ajax. 3. Добавьте случайное число после URL: "fresh=" + Math.random();. 4. Добавьте метку времени после URL-адреса: "nowtime=" + new Date().getTime();. 5. Если вы используете jQuery, просто выполните $.ajaxSetup({cache:false}). Таким образом, все ajax страницы будут выполнять этот оператор, поэтому нет необходимости сохранять запись в кеше.

37. Как решить междоменные проблемы?

jsonp, iframe, window.name, window.postMessage, установить прокси-страницу на сервере

38. Как делать модульную разработку

Выполнение функции немедленно, без раскрытия закрытых членов

var module1 = (function(){
         var _count = 0;
         var m1 = function(){
           //...
         };
         var m2 = function(){
           //...
         };
         return {
           m1 : m1,
           m2 : m2
         };
       })();

39. В чем разница между спецификациями AMD (Modules/Asynchronous-Definition) и CMD (Common Module Definition)?

1. Для зависимых модулей AMD — раннее выполнение, CMD — отложенное выполнение. Однако, начиная с RequireJS 2.0, он также был изменен для задержки выполнения (в зависимости от метода написания метод обработки отличается). 2. CMD выступает за то, чтобы полагаться на ближнее, а AMD за то, чтобы полагаться на переднее.

// CMD
 define(function(require, exports, module) {
     var a = require('./a')
     a.doSomething()
     // 此处略去 100 行
     var b = require('./b') // 依赖可以就近书写
     b.doSomething()
     // ...
 })

 // AMD 默认推荐
 define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
     a.doSomething()
     // 此处略去 100 行
     b.doSomething()
     // ...
 })

40. Каков основной принцип requireJS? (Как загружать динамически? Как избежать многократной загрузки? Как кешировать?)

Ссылка на ссылку

41. Как реализовать загрузчик модулей

Ссылка на ссылку

42. Перечислите несколько основных спецификаций кода JavaScript.

(1) Не объявляйте несколько переменных в одной строке (2) Если вы не знаете длину массива, используйте push (3) Пожалуйста, используйте ===/!== для сравнения true/false или значений (4) Используйте одинарные кавычки '' для строк (поскольку в большинстве случаев наши строки. Особенно html будут отображаться ") (5) Используйте литералы объектов вместо нового массива (6) Никогда не объявляйте функцию в нефункциональном блоке и не назначайте эту функцию переменной. Браузеры позволяют это сделать, но парсят они по-разному. (7) Не используйте глобальные функции (8) Всегда используйте var для объявления переменных. В противном случае это приведет к глобальным переменным. Нам нужно избегать загрязнения глобального пространства имен. (9) Оператор Switch должен иметь ветку по умолчанию. (10) Используйте /**...*/ для многострочных комментариев, включая описания, указанные типы, значения параметров и возвращаемые значения. (11) Функция не должна иногда возвращать значение, а иногда вообще не возвращать значение (12) В конце оператора должна быть добавлена ​​точка с запятой. (13) Для циклов необходимо использовать фигурные скобки (14) Оператор If должен использовать фигурные скобки (15) Переменные в циклах for-in должны быть четко определены с помощью ключевого слова var, чтобы избежать загрязнения области видимости. (16) Избегайте односимвольных имен и делайте имена переменных описательными. (17) При именовании объектов, функций и экземпляров используйте соглашения об именах с верблюжьим регистром. (18) Назначать методы прототипу объекта вместо переопределения прототипа новым объектом, что может затруднить наследование.

43. Работа с DOM — как добавлять, удалять, перемещать, копировать, создавать и находить узлы?

1) Создайте новый узел СозданиеCumentFragment () // Создать фрагмент DOM CreateeEdement () // Создать определенный элемент CreateTextnode () // Создать текстовый узел (2) Добавить, удалить, заменить, вставить AppendChild () Removechild () reflacechild () insertforefore () // Вставьте новый узел дочернего ребенка до существующего ребенка (3) найти getelementsbytagname () // по имени метки GetElementsByName () // Передайте значение атрибута имени элемента (т.е. имеет сильную толерантность неисправностей и получит массив, включая идентификатор, равный значению имени) GetElementbyID () // по идентификатору элемента, уникальный

44. Принцип реализации jQuery

Ссылка на ссылку

45. Как преобразовать массив в строку json в jquery, а затем преобразовать обратно?

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展： 
 $.fn.stringifyArray = function(array) {
        return JSON.stringify(array)
    }

    $.fn.parseArray = function(array) {
        return JSON.parse(array)
    }

    然后调用：
    $.fn.stringifyArray(array)

46. ​​Принцип глубокого и поверхностного копирования $.extend в jQuery

// 浅复制
$ = { 

     extend : function(target, options) { 

        for (name in options) { 

            target[name] = options[name]; 

        } 

        return target; 

    } 

}; 
// 深复制
$ = { 
   extend : function(deep, target, options) { 
       for (name in options) { 
           copy = options[name]; 
           if (deep && copy instanceof Array) { 
               target[name] = $.extend(deep, [], copy); 
           } else if (deep && copy instanceof Object) { 

              target[name] = $.extend(deep, {}, copy); 
           } else { 
              target[name] = options[name]; 
          } 
      } 

     return target; 
  }
};

47. В чем разница между jquery.extend и jquery.fn.extend?

• jquery.extend добавляет метод класса в класс jquery, что можно понимать как добавление статического метода

• jquery.fn.extend: В исходном коде jquery.fn = jquery.prototype, поэтому расширение jquery.fn заключается в добавлении функций-членов в класс jquery. использовать: Расширение jquery.extend нужно вызывать через класс jquery, а расширение jquery.fn.extend, все экземпляры jquery можно вызывать напрямую.

48. Как определить, запущен ли текущий скрипт в среде браузера или узла? (Али)

this === window ? 'browser' : 'node';

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

Ссылка на ссылку

50. В чем разница между размещением тега Script внизу страницы до закрытия тела и после его закрытия? Как браузеры будут их анализировать?

Ранее рекомендуемый метод (устарел): Предыдущее решение этой проблемы состояло в том, чтобы поместить тег script после тега body, что гарантировало, что он не будет завершен сценарием до тех пор, пока