Заметки к чтению "Предварительное интервью Цзянху"

внешний интерфейс

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

Я давно должен был закончить обновление статей в серии фронтенд-интервью, но мне было лень, и я обнаружил, что некоторые статьи в Интернете действительно хорошо написаны, поэтому я продолжал откладывать это. Но как только я пошел в библиотеку и увидел книгу под названием «Интервью с Цзянху на переднем крае», я просто нашел время, чтобы объединить все содержимое воедино. Здесь должно быть что-то, чего вы не понимаете, и эти вещи могут значительно повысить эффективность вашей разработки. Эта книга была опубликована в мае 2016 года, но в ней все еще рассказывается о JQuery. Так что некоторые места я дополнил

Как обращаться с IE и Firefox при обработке совместимости событий

Получить события:

function et(e) {
    let event = window.event || e
}

Получите значение клавиатуры: event.that эквивалентен event.keyCode IE в Firefox

let key = event.keyCode || event.which

Получить источник события:

let target = event.srcElement || event.target

Прослушиватель событий:

IE: element.attacthEvent('on' + eventName, function(){})
Firfox: element.addEventListener(eventName, handler, false)

положение мыши: В IE объект события имеет свойства x, y, в Firefox событие имеет свойства PageX, PageY Все при получении положения мыши:

x = event.x || event.pageX

Заблокировать поведение браузера по умолчанию:

e.preventDefault() || event.returnValue = false

Прекратить всплывать события:

e.stopPropagation() || event.cancelBubble = true

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

<select id="test" name="">
    <option value="1">text 1</option>
    <option value="2">text 2</option>
</select>

Получить индекс выбранного элемента:

let index = document.getElementById('test').selectedIndex.

selectIndex указывает индекс выбранного элемента

Разница между получением и отправкой отправки в форме формы

Этот вопрос обсуждался давно, и я чувствую, что проблему, четко решенную в одном предложении, надо так усложнять. Вот ответ из книги:
1. get — получить данные с сервера, а post — отправить данные на сервер
2. Получить — отправить данные параметра на URL-адрес, на который указывает атрибут действия формы, а значение соответствует каждому полю формы по одному. Сообщение осуществляется через механизм HTTP-сообщения, каждое поле в форме и его содержимое помещаются в ЗАГОЛОВОК HTML и передаются по URL-адресу, на который указывает атрибут действия.
3. Данные, передаваемые get, не могут быть больше 2кб, а данные, передаваемые по почте, больше, но есть ограничения.
4. Показатели безопасности get очень низкие, а безопасность post относительно высока.
5. Get ограничивает значение набора данных формы формы символами ASCII, в то время как post поддерживает весь набор символов ISO10646.

Простая реализация AJAX

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
	if (xhr.readyState == 4) {
		if ((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)) {
			alert(xhr.responseText)
		} else {
			alert('unsuccessful:' + xhr.status)
		}
	}
}
xhr.open('get', 'example.txt', true)
xhr.send(null)

Код состояния протокола HTTP

Конкретный контент смотрите на MDN, а я лениво напишу сюда. 1хх: Информация 2xx: успех 3xx: перенаправление 4xx: ошибка клиента 5xx: ошибка сервера

Как JavaScript получает информацию заголовка HTTP-запроса и возвращаемую информацию

getResponseHeader возвращает указанную информацию http из информации ответа getAllResonponseHeaders Получить всю информацию HTTP-заголовка ответа

Простая реализация JSONP

var Jsonp = document.createElement('script')
// Firfox: onload, IE: onreadyStatechange
Jsonp.onload = Jsonp.onreadyStatechange = function () {
    if (!this.readyState || this.readyState === 'loaded'
        || this.readyState === 'complete') {
        alert($('#demo').html())
        // 清理防止IE内存泄露
        Jsonp.onload = Jsonp.onreadyStatechange = null
    }
}
Jsonp.type = 'text/javascript'
Jsonp.src = 'http://www.xxx.com/JS/JQuery.js'
// 往header里边添加
document.getElementByTagName('head')[0].appendChild(Jsonp)

Знание HTML5 и CSS3

1. Более описательные ярлыки
2. Хорошая медийная поддержка
3. Более мощные веб-приложения
4. Обмен информацией между документами
5. Веб-сокеты
6, Клиентское хранилище
7. Больше красивых страниц
8. Более мощные формы
9. Улучшите доступность
10. Расширенные селекторы
11. Визуальные эффекты

Как вызвать переформатирование страницы, перерисовку

В дополнение к тому, что страница при первой загрузке должна пройти этот процесс, а также следующее поведение вызовет это поведение: 1, добавить элемент dom, изменить, удалить. (Вот почему следует избегать изменения элемента dom, потому что большая часть производительности потребления перерисовывается и перерисовывается)
2. Измените только цвет шрифта элемента DOM (только перерисуйте, потому что нет необходимости настраивать макет)
3. Примените новые стили или измените любые свойства, влияющие на внешний вид элемента.
4. Измените размер окна браузера и прокрутите страницу
5. Прочитайте некоторые атрибуты элемента

Общие методы объектов localStorage

Хранилище: localStorage.setItem(ключ, значение) Получить: localStorage.getItem(ключ) Удалить: localStorage.removeItem(ключ) Удалить все: localStorage.clear()

Разница между файлами cookie, sessionStorage и localStorage

Данные cookie всегда передаются в HTTP-запросах одного и того же источника. Однако sessionStorage и localStorage автоматически не отправляют данные на сервер, а только сохраняют их локально. Данные cookie также имеют концепцию пути, которая может ограничить принадлежность cookie определенному пути.

Ограничение размера хранилища отличается.Данные cookie не могут превышать 4 КБ.В то же время, поскольку каждый HTTP-запрос будет содержать cookie, cookie подходит только для хранения небольших данных. sessionStorage и localStorage также имеют лимиты хранения, но они намного больше

Срок действия данных отличается: sessionStorage: действует только до закрытия текущего окна браузера. localStorage: Всегда доступен, даже когда окно или браузер закрыты. cookie: до тех пор, пока он действителен до установленного времени истечения срока действия файла cookie. Разные области действия: sessionStorage не распределяется между разными окнами браузера (можно ли добиться междоменного доступа с помощью sessionStorage).localStorage совместно используется всеми последовательными портами одного и того же источника. Файлы cookie используются во всех окнах одного и того же происхождения.

SEO с точки зрения внешнего интерфейса

1. CSS-спрайты: вообще говоря, это слияние изображений, которое может объединить некоторые из наиболее распространенных маленьких изображений на веб-сайте в большое изображение.
2. Включите атрибут keep-alive: Keep-Alive можно понимать как длинное соединение. В дополнение к включению свойства Keep-Alive соединения, соединение может сохраняться в течение определенного периода времени, тем самым повышая скорость загрузки страницы.
3. Включите кэширование браузера, вы можете использовать технологию кэширования для повышения скорости загрузки страниц.
4. Включите сжатие GZIP

Улучшить производительность интерфейса

1. Замените куки на веб-хранилище
2. Используйте анимацию CSS вместо анимации JavaScript
3. Используйте клиентскую базу данных
4. Новые функции с использованием JavaScript
5. Используйте аппаратное ускорение

Что делать, если ваш браузер не устанавливает текст, установленный на веб-странице

@font-face {font-family: name; src: url(url); sRules}

Определение таблицы стилей sRules

Расскажите о своем понимании фронтенд-безопасности, о том, что там есть и как это предотвратить.

Проблемы внешней безопасности в основном включают атаки XSS и CSRF.
XSS: атака с использованием межсайтовых сценариев
Он позволяет пользователям внедрять вредоносный код на страницы, предоставляемые другим пользователям, что можно просто понимать как своего рода внедрение кода javascript.
Меры защиты от XSS: Фильтр ввода и вывода побега
Избегайте использования eval, new Function и т. д. для выполнения строк, если только вы не уверены, что строка не имеет ничего общего с пользовательским вводом.
Используя атрибут httpOnly файла cookie, а также поле cookie этого атрибута, js не может читать и писать
При использовании innerHTML и document.write, если данные вводятся пользователем, ключевые символы объекта необходимо фильтровать и экранировать.
CSRF: подделка межсайтовых запросов
На самом деле, это некоторое поведение на веб-сайте, которое используется хакерами.Когда вы посещаете веб-сайт хакера, вы будете работать на других веб-сайтах.
Меры защиты от CSRF:
Проверьте, является ли реферер http тем же доменным именем
Избегайте длительного хранения зарегистрированных сеансов в клиенте.
Запросы ключей используют код подтверждения или механизм токена. Некоторые другие методы атаки включают перехват HTTP, перехват операции интерфейса

Методы реализации наследования

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

function Parent1(){
    this.name = "parent1"
}
function Child1(){
    Parent1.call(this);
    this.type = "child1";
}

Реализуйте наследование, позаимствовав цепочку прототипов:

function Parent2(){
    this.name = "parent2";
    this.play = [1,2,3];
}
function Child2(){
    this.type = "child2";
}
Child2.prototype = new Parent2();

Композиционное наследование:

function Parent3(){
    this.name = "parent3";
    this.play = [1,2,3];
}
function Child3(){
    Parent3.call(this);
    this.type = "child3";
}
Child3.prototype = Object.create(Parent3.prototype);
Child3.prototype.constructor = Child3;

Способ создания объекта (из "Продвинутого программирования"):

Заводской узор:

function cratePerson (name, age, job) {
    var o = new Object(
    o.name = name 
    o.age = age 
    o.job = job 
    o.sayName = function () {
        alert(this.name)
    }
    return o 
}

var person1 = cratePerson('Greg', 27, 'Doctor')

Конструктор:

function Person (name, age, job) {
    this.name = name 
    this.age = age 
    this.job = job 
    this.sayName = function () {
        alert(this.name )
    }
}

var person1 = cratePerson('Greg', 27, 'Doctor')

Режим прототипа:

function Person () {
}

Person.prototype.name = 'Greg'
Person.prototype.age = 18
Person.prototype.job = 'Doctor'
Person.prototype.sayName = function () {
    alert(this.name)
}
var person1 = new Person()
person1.sayName()   // Greg

В этой статье рассказывается только о некоторых теоретических знаниях и редко затрагивается программирование. Что касается программирования, я решил использовать упражнения с литкодом, чтобы объяснить o) Потому что это непросто написать в отдельный блог, чтобы объяснить. пожалуйста следуйте за мнойgithubСледите за прогрессом в реальном времени

Категории