2020 основные вопросы для фронтенд-интервью — высокочастотные тестовые сайты

интервью

HTML

1. Расскажите, как вы понимаете семантику HTML? (курсив)

Семантика заключается в выборе тегов, которые соответствуют семантике, чтобы сделать код семантическим, который не только легко читается разработчиками, но также поддерживает и пишет более элегантный код и позволяет таким инструментам, как поисковые системы и браузеры, лучше анализировать.
С точки зрения непрофессионала, семантика заключается в том, чтобы заставить правильные теги выполнять правильные действия, например, теги p для абзацев, теги header для заголовков, теги main для основного контента, теги side для боковых панелей и так далее.

2. Для чего нужен мета-вьюпорт?

Установите размер окна просмотра равным размеру видимой области.

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

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

Проблема, вызванная тем, что мобильный терминал автоматически устанавливает ширину окна просмотра на 980.
Хотя мобильный терминал автоматически устанавливает ширину области просмотра на 980, чтобы мы могли идеально видеть всю веб-страницу, поскольку физический размер (ширина устройства) мобильного терминала намного меньше ширины области просмотра, чтобы иметь возможность использовать его. в меньшем диапазоне, чтобы увидеть весь контент в области просмотра, тогда контент должен быть уменьшен.
Однако после уменьшения масштаба пользователь видит уменьшенную версию всей страницы. Шрифты, значки и содержимое очень мелкие. Если вы хотите щелкнуть или просмотреть, вам нужно увеличить масштаб страницы. После увеличения страницы , появится горизонтальная полоса прокрутки. Очень плохо для пользователя.

Как сделать так, чтобы размер веб-страницы не масштабировался автоматически на мобильном терминале
Установить размер области просмотра через мета
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Область просмотра относится к области просмотра пользователем на веб-странице.
Атрибуты метатегов:

width=device-width 设置视口宽度等于设备的宽度
initial-scale=1.0 初始缩放比例, 1不缩放
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放

CSS

1. Очистить поплавок (акцент)

.clearfix:after { 
    /*生成内容作为最后一个元素*/ 
    content: ""; 
    /*使生成的元素以块级元素显示,占满剩余空间*/ 
    display: block; 
    /*避免生成内容破坏原有布局的高度*/ 
    height: 0; 
    /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/ 
    visibility: hidden; 
    /*清除浮动元素对当前元素的影响*/ 
    clear: both; 
} 
.clearfix { 
    /*用于兼容IE, 触发IE hasLayout*/ 
    *zoom:1; 
}

2. Разница между Less/Sass/Scss

  • Scss на самом деле является улучшенной версией Sass.
    Scss — это синтаксис отступов Sass. Он не интуитивно понятен для веб-разработчиков, которые привыкли писать CSS-интерфейс, и они не могут добавлять CSS-код в Sass. Поэтому синтаксис Sass был улучшен, и Sass 3 стал Scss ( нахальный css) ). Совместим с исходным синтаксисом, просто заменив исходный отступ на {}.

  • Меньше среды проще, чем Sass
    Для установки Sass требуется установка среды Ruby, Less основан на JavaScript, и необходимо ввести Less.js для обработки вывода кода css.

  • Символ переменной другой, Less — это @, Sass — это $, и область видимости переменных тоже разная.
    Sass не имеет локальных переменных и удовлетворяет принципу близости. Переменные, определенные в {} в Less, являются локальными переменными.

  • У Less нет настроек вывода, Sass предоставляет 4 варианта вывода
    Есть четыре варианта стиля выходного стиля, по умолчанию вложенный
    вложенный: вложенный код css с отступом
    расширенный: расширенный многострочный код css
    компактный: css-код в сжатом формате
    сжатый: сжатый код css

  • Sass поддерживает условные операторы, вы можете использовать циклы if{}else{}, for{} и т. д. А Лесс его не поддерживает.

  • Механизм обработки Less и Sass отличается
    Less обрабатывается клиентом, а Sass обрабатывается сервером.Для сравнения, синтаксический анализ Less выполняется медленнее, чем Sass.

  • Sass и Less имеют разные библиотеки инструментов.
    У Sass есть библиотека инструментов Compass. Короче говоря, отношения между Sass и Compass немного похожи на отношения между Javascript и jQuery. Compass — это библиотека инструментов для Sass. На его основе собран ряд полезных модулей и шаблонов, дополняющих и усиливающих функции Sass.

    У Less есть библиотека компонентов пользовательского интерфейса Bootstrap. Bootstrap — это хорошо известная библиотека компонентов пользовательского интерфейса в веб-разработке. Часть исходного кода файлов стилей Bootstrap написана на синтаксисе Less, но Bootstrap4 также написан на Sass. .

3. BFC и его приложения (курсив)

BFC (контекст форматирования на уровне блоков) — это отдельная область рендеринга, которая позволяетBFCВнутренние элементы изолированы от внешних элементов, так что позиционирование внутренних и внешних элементов не будет влиять друг на друга, что относится к обычному потоку схемы позиционирования.

Условия срабатывания:

  • корневой элемент
  • Элемент float: значение float, отличное от none (left,right)
  • Абсолютно позиционированные элементы: позиция (абсолютная, фиксированная)
  • отображение inline-block, table-cells, flex
  • значение переполнения, отличное от видимого (скрытое, автоматическое, прокрутка)

Правила ограничений:

  • принадлежат к одному и тому жеBFCдва соседнихBoxвертикальное расположение
  • принадлежат к одному и тому жеBFCдва соседнихBoxизmarginбудет перекрываться
  • BFCплощади не будетfloatЭлемент области перекрытия
  • рассчитатьBFCКогда в расчете также участвует высота плавающего дочернего элемента
  • Текстовый слой не будет закрыт плавающим слоем, он будет обтекать его.

эффект:

  • Предотвратить закрытие элементов плавающими элементами
    Блочный элемент обычного потока документов может быть покрыт плавающим элементом, вытесняя обычный поток документов, поэтому вы можете установить плавающее, отображаемое, положение или значение переполнения элемента, чтобы активировать BFC, чтобы предотвратить его закрыты плавающей коробкой.
  • Может содержать плавающие элементы (очистить плавающие элементы)
    Изменяя значение свойства родительского блока, содержащего плавающий дочерний элемент, BFC инициируется, чтобы содержать плавающий блок дочернего элемента.
  • Предотвратить слияние полей соседних элементов
    Верхние и нижние поля двух соседних подэлементов блочного уровня, принадлежащих одному и тому же BFC, будут перекрываться, поэтому, когда два соседних подэлемента блочного уровня принадлежат разным BFC, можно предотвратить перекрытие полей.

4. Горизонтальное и вертикальное центрирование (выделение)

  • Сын Отца + трансформация
.parent {
    position: relative;
}

.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
  • гибкий макет
.parent {
    display:flex;
    justify-content:center;
    align-items: center;
}

JavaScript

1. Что такое замыкание? (обязательно)

Суть замыкания в том, что цепочка доменов функций, образованная функцией, вложенной
Например: есть функция B внутри функции A, и функция B может получить доступ к переменным в функции A, тогда функция B является замыканием

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

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

2. Сортировка рукописным выбором и пузырьковая сортировка

  • сортировка выбором
let arr = [3, 4, 1, 2];
let len = arr.length;
//  这里之所以是len-1，是因为到最后两个元素，交换位置，整个数组就已经排好序了。
for(let i = 0; i < len - 1; i++){
    let min = arr[i];
    // j = i+1是把与自己比较的情况给省略掉
    for(let j = i+1; j < len; j++){
        if(arr[j] < min){
            // 利用ES6数组的解构赋值交换数据
            [arr[j], min] = [min, arr[j]];
        }
    }
    arr[i] = min;
}
console.log(arr);
  • Пузырьковая сортировка
let arr = [3, 4, 1, 2];
let max = arr.length - 1;
for(let i = 0; i < max; i++){
    // 声明一个变量，作为标志位
    // 如果某次循环完后，没有任何两数进行交换，就将标志位设置为 true，表示排序完成
    let flag = true;
    for(let j = 0; j < max - i; j++){
        if(arr[j] > arr[j + 1]){
            // 利用ES6数组的解构赋值交换数据
            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
            flag = false;
        }
    }
    if(flag){
        break;
    }
}
console.log(arr);

3. Дедупликация массивов и инверсия массивов (выделено)

Дедупликация массива
метод 1
Оператор распространения в сочетании со структурой Set может удалить повторяющиеся элементы массива.

// 去除数组的重复成员
[...new Set([1, 2, 2, 3, 4, 5, 5])];
// [1, 2, 3, 4, 5]

Способ 2
Array.from() может преобразовывать заданную структуру в массив

Array.from(new Set([1, 2, 2, 3, 4, 5, 5]));
// [1, 2, 3, 4, 5]

Метод 3 (ES5)

function unique(arr) {
  let temp = [];
  arr.forEach(e => {
    if (temp.indexOf(e) == -1) {
      temp.push(e);
    }
  });

  return temp;
}

перевернуть массив
Требовать
Ввод: я студент Вывод: студент a я
вход - это массив, выход - это также массив, разделенный, обратное сращивание не допускается.

Решение первое

function reverseArray(arr) {
    let str = arr.join(' ')
    let result = []
    let word = ''
    for (let i = 0; i < str.length; i++) {
        if (str[i] != ' ') {
            word += str[i]
        } else {
            result.unshift(word)
            word = ''
        }
    }
    
    result.unshift(word)
    return result
}

console.log(reverseArray(['I', 'am', 'a', 'student']))
// ["student", "a", "am", "I"]

Решение второе

function reverseArray(arr) {
    let result = []
    let distance = arr.length - 1
    for (let i = 0; i <= distance; i++) {
        result[i] = arr[distance - i]
    }

    return result
}

4. Функция троттлинга и функция антитряски (акцент)

регулирование функции
Дросселирование функций — это оптимизациявысокая частотаСредство выполнения js-кода
МожетуменьшатьКоличество выполнений часто вызываемых функций

Функция: уменьшить количество выполнений кода и повысить производительность веб-страницы.
Сценарии применения: такие события, как oninput/onmousemove/onscroll/onresize

let timerId = null;
let flag = true;
window.onresize = function () {
    if (!flag)  return;
    flag = false;
    timerId && clearInterval(timerId);
    timerId = setTimeout(function () {
        flag = true;
        console.log("尺寸变化");
    }, 500);
}

Инкапсулировать функцию дросселя

function throttle(fn, delay){
    let timer = null
    return function (){
        // 如果已经有定时器了，那么就退出
        if(timer) return
        // 获取debounce执行作用域的this
        let _this = this
        // 获取参数
        let args = arguments
        
        timer = setTimeout(function(){
            // 改变执行函数内部的this指向debounce执行作用域的this，并把参数传给执行函数
            fn.apply(_this, args)
            // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
            timer = null
        }, delay)
    }
}

Функция защиты от тряски
Функция защиты от сотрясений также оптимизирована.высокая частотаСредство выполнения js-кода
Можно сделать так, чтобы вызываемая функция вызывалась только в непрерывном высокочастотном режиме.однажды

Функция: уменьшить количество выполнений кода и повысить производительность веб-страницы.
Сценарии применения: такие события, как oninput/onmousemove/onscroll/onresize

let timerId = null;
window.onresize = function () {
    timerId && clearInterval(timerId);
    timerId = setTimeout(function () {
        console.log("尺寸变化");
    }, 500);
}

Инкапсулируйте функцию защиты от сотрясений

Удобно вызывать функцию защиты от сотрясений и передавать параметры функции обратного вызова fn.Здесь замыкание используется для разработки функции защиты от сотрясений.

function debounce(fn, delay){
    let timer = null
    return function(){
        // 设置了定时器就清空这个定时器，没有就去设置定时器
        timer && clearTimeout(timer)
        // 获取debounce执行作用域的this
        let _this = this
        // 获取参数
        let args = arguments
            
        timer = setTimeout(function(){
            fn.apply(_this, args)
        }, delay)
    }
}

Отличие функции троттлинг от функции антивстряски
Функция дросселирования естьуменьшатьКоличество последовательных вызовов высокочастотных операций (например, 10 последовательных вызовов, может быть только 3-4 раза)
Функция защиты от сотрясения позволяет функции выполняться только во время непрерывной высокочастотной работы.однажды(например, 10 последовательных вызовов, но только 1 выполнение)

5. Прототип и цепочка прототипов (обязательно)

Каждый "конструктор" имеет свойство по умолчанию, называемое прототипом. Свойство прототипа содержит объект, который мы называем "объект-прототип", а прототип указывает на его объект-прототип.

Каждый «объект-прототип» имеет свойство по умолчанию, называемое конструктором, и конструктор указывает на «конструктор», соответствующий текущему объекту-прототипу.

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

основные отношения

  1. 所有函数都是Function构造函数的实例对象
  2. 所有函数都是对象, 包括Function构造函数
  3. 所有对象都有__proto__属性
  4. 普通对象的__proto__属性指向创建它的那个构造函数对应的"原型对象"

особые отношения

   5. 所有对象的__proto__属性最终都会指向"Object原型对象"
   6. "Object原型对象"的__proto__属性指向NULL

Цепочка, состоящая из __proto__ в объекте, называется цепочкой прототипов.

Когда объект ищет свойства и методы, он сначала ищетТекущийПоиск объекта, используйте свой собственный, если он у вас есть
Если нужный объект не найден в текущем объекте, он перейдет кВерхний уровеньНайти в объекте-прототипе
если найденоObjectОбъекты-прототипы не найдены, он будетсообщить об ошибке

6. Что происходит, когда объект новый?

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let p = new Person("Alice", 23);

Четыре процесса создания нового объекта:

1. Создайте пустой объект

let obj = {};

2. Пусть это в конструкторе указывает на новый объект и выполняет тело функции конструктора

let result = Person.call(obj);

3. Установите свойство __proto__ нового объекта так, чтобы оно указывало на объект-прототип конструктора.

obj.__proto__ = Person.prototype;

4. Определите тип возвращаемого значения конструктора.Если это тип значения, верните новый объект. Если это ссылочный тип, возвращается объект этого ссылочного типа.

if (typeof(result) == "object") 
    p = result;
else 
    p = obj;

7. Наследование ES5 и наследование ES6

наследование ES5

  1. В подклассе с помощью конструктора родительского класса через метод call/apply
  2. Установите функцию-прототип подкласса в экземпляр объекта суперкласса.
function Person(myName, myAge) {
    this.name = myName;
    this.age = myAge;
}
Person.prototype.say = function () {
    console.log(this.name, this.age);
}
function Student(myName, myAge, myScore) {
    // 1.在子类中通过call/apply方法借助父类的构造函数
    Person.call(this, myName, myAge);
    this.score = myScore;
    this.study = function () {
        console.log("day day up");
    }
}
// 2.将子类的原型对象设置为父类的实例对象
Student.prototype = new Person();
Student.prototype.constructor = Student;

let stu = new Student("zs", 18, 98);
stu.say();  // zs 18

Наследование ES6

  1. По подклассу расширяет родительский класс, чтобы сообщить браузеру, что подкласс должен наследовать родительский класс.
  2. Измените это с помощью метода super()
class Person{
    constructor(myName, myAge){
        // this = stu;
        this.name = myName; // stu.name = myName;
        this.age = myAge;   // stu.age = myAge;
    }
    say(){
        console.log(this.name, this.age);
    }
}
// 以下代码的含义: 告诉浏览器将来Student这个类需要继承Person这个类
class Student extends Person{
    constructor(myName, myAge, myScore){
        super(myName, myAge);   // 这一行代码相当于在子类中通过call/apply方法借助父类的构造函数
        this.score = myScore;
    }
    study(){
        console.log("day day up");
    }
}

let stu = new Student("zs", 18, 98);
stu.say();  // zs 18

8. Глубокое копирование и мелкое копирование, и как реализовать глубокое копирование объектов? (акцент)

глубокая копия
Изменение значения новой переменной не повлияет на значение исходной переменной.
Базовые типы данных по умолчанию являются глубокими копиями.

мелкая копия
Изменение значения новой переменной повлияет на значение исходной переменной.
По умолчанию ссылочные типы являются мелкими копиями.

Глубокое копирование через пользовательскую функцию

class Person{
  name = "zs";
  cat = {
      age : 3
  };
  score = [1, 3, 5];
}
let p1 = new Person();
let p2 = new Object();

// 通过自定义函数实现深拷贝
function deCopy(target, source) {
  // 1.通过遍历拿到source中所有的属性
  for (let key in source){
      // 2.取出当前遍历到的属性对应的取值
      let sourceValue = source[key];
      // 3.判断当前的取值是否是引用数据类型
      if (sourceValue instanceof Object){ // 如果是引用数据类型, 那么要新建一个存储空间保存
          // 4.通过sourceValue.constructor拿到这个对象的构造函数的类型, 然后新建这个对象或数组
          let subTarget = new sourceValue.constructor;
          target[key] = subTarget;
          // 5.再次调用拷贝, 将遍历到的属性的取值拷贝给新建的对象或者数组
          deCopy(subTarget, sourceValue);
      }else { // 如果不是引用数据类型, 之间将属性拷贝即可
          target[key] = sourceValue;
      }
  }
}

// 简化版本
function deCopy(obj){
	// 如果不是引用数据类型, 直接将属性拷贝即可
	if(typeof obj != 'object')	return obj
	// 如果是引用数据类型, 那么要新建一个存储空间保存
	let newObj = new obj.constructor
	for(let key in obj){
		// 递归调用拷贝, 将遍历到的属性的取值拷贝给新建的对象或者数组
		newObj[key] = deCopy(obj[key])
	}
	return newObj
}

deCopy(p2, p1);
p2.cat.age = 666;   // 修改新变量的值不会影响到原有变量, 这里是深拷贝
console.log(p1.cat.age);    // 3
console.log(p2.cat.age);    // 666

9. Разница между процессом и потоком

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

  1. В программе есть хотя бы один процесс, а в процессе есть хотя бы один поток
  2. Масштаб деления потоков меньше, чем у процессов, что делает многопоточные программы высокопараллельными.
  3. Кроме того, процесс имеет независимую единицу памяти во время выполнения, и несколько потоков совместно используют память, что значительно повышает эффективность работы программы.
  4. Потоки по-прежнему отличаются от процессов во время выполнения. Каждый независимый поток имеет вход для выполнения программы, последовательность последовательного выполнения и выход для программы. Однако потоки не могут выполняться независимо и должны зависеть от приложения, а приложение обеспечивает управление выполнением нескольких потоков.
  5. С логической точки зрения значение многопоточности заключается в том, что в приложении есть несколько частей выполнения, которые могут выполняться одновременно. Однако операционная система не рассматривает несколько потоков как несколько независимых приложений для планирования процессов, управления ими и распределения ресурсов. Это важное различие между процессом и потоком

10. Расскажите об асинхронном программировании JS

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

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

Например: если JS многопоточный
Теперь есть один поток для изменения содержимого элемента и один поток для удаления элемента.В настоящее время браузер не знает, какой поток использовать.

Все, кроме «функций, связанных с событиями» и «функций обратного вызова», являются синхронным кодом.

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

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

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

11. Что такое обетование (курсив)

Promise — это новое решение для асинхронного программирования в ES6, а производительность в коде — объект.

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

мы можем пройтиnew Promise(function(resolve, reject){});Чтобы создать объект обещания, но созданный объект обещания не является асинхронным, пока объект обещания создан, сохраненный код будет выполнен немедленно

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

Объект Promise имеет три состояния:

pending:   默认状态，只要没有告诉promise任务是成功还是失败就是pending状态  
fulfilled(resolved): 只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功  
rejected:  只要调用rejected函数, 状态就会变为rejected, 表示操作失败

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

Вы можете использовать функции для отслеживания изменений в состоянии Promise.
Обратный вызов для успешного выполнения функции then()
Не удалось выполнить обратный вызов функции catch()

Обещание тогда метод
Метод then принимает два параметра:
Первый параметр — это обратный вызов, когда состояние переключается на успех,
Второй параметр — обратный вызов при переходе состояния в failed

Метод отлова промиса
catch на самом деле является синтаксическим сахаром для then(undefined, () => {})

Весь статический метод Promise:
1. Метод all получает массив,
2. Если в массиве есть несколько объектов Promise, то метод then будет выполнен только в том случае, если все они успешны, а все успешные результаты будут переупакованы в массив и возвращены нам в порядке добавления.
3. Если массив не является объектом Promise, то метод then будет выполнен напрямую

Сценарий приложения: пакетная загрузка, либо вместе успешно, либо вместе неудачно

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

Сценарий приложения: отладка интерфейса, обработка тайм-аута

HTTP

1. Что такое перекрестный домен и как решить проблему перекрестного домена?

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

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

междоменное решение
jsonp можно использовать JSONP позволяет веб-страницам получать данные с междоменных адресов, то есть данные для междоменного чтения.

Как JSONP реализует междоменный доступ

  1. Несколько тегов скрипта могут быть определены в одном и том же интерфейсе.
  2. Данные в нескольких тегах script в одном и том же интерфейсе могут обращаться друг к другу.
  3. Вы можете импортировать другие ресурсы через атрибут src скрипта Суть импорта других ресурсов через атрибут src заключается в копировании ресурса в тег скрипта.
  4. Атрибут src скрипта может не только импортировать локальные ресурсы, но и импортировать удаленные ресурсы
  5. Поскольку атрибут src скрипта не имеет ограничений по происхождению, междоменные данные могут быть запрошены через атрибут src скрипта.

JSONP-оптимизация

  1. В процессе разработки JSONP используется для получения междоменных данных.Как правило, сервер возвращает не переменную, а вызов функции. Итак, первая оптимизация JSONP — разрешить серверу возвращать вызовы функций.
但是这样会导致当前服务器返回的函数调用名称写死了,服务器返回函数叫什么名称, 我们本地就必须定义一个什么名称的函数
  1. Решение: динамически укажите имя функции с помощью параметров URL.
如：script标签的URL为https://www.jd.com?name=test，（假设服务端语言是php）服务端可以通过`$name = $_GET['name']`获取到客户端传递过来的参数，然后通过echo $name."(666);";返回字符串的拼接后的数据。
  1. Поскольку тег скрипта по умолчанию синхронизирован, предыдущий тег скрипта не загружает данные, а последующий тег скрипта выполняться не будет.
所以请求数据的script标签必须放到后面  
解决方案:  
通过JS动态创建script标签, 因为JS动态创建的script标签默认就是异步的,
不用等到前面的标签加载完就可以执行后面的script标签

Использование JSONP в jQuery
jQuery также считает, что нам может понадобиться получить междоменные данные, поэтому междоменные данные также можно получить в jQuery.

  1. Использование инкапсулированного jQuery метода ajax
  2. Добавьте пару ключ-значение dataType: "jsonp" в метод ajax, который сообщает jQuery запрашивать междоменные данные.
  3. При запросе файла сервера jQuery автоматически добавит ?callback=имя функции обратного вызова после ссылки, и сервер может получить имя функции обратного вызова через обратный вызов.$name = $_GET["callback"], а потом еще можно вернуть данные через функцию обратного вызова сращивания строкecho $name.("666");
  4. Нет необходимости определять функцию с соответствующим именем в jQuery, jQuery автоматически возьмет данные в callback-функции и передаст их в метод успеха
  5. Вы также можете установить jsonp: «имя функции обратного вызова», чтобы сообщить серверу jQuery, какой ключ использовать для получения имени функции обратного вызова.
  6. Имя callback-функции также можно указать самостоятельно, нужно только установитьjsonpCallback：回调函数的名称Просто

Пакет JSONP (см. jQuery)
myJaonp.js

function obj2str(obj){
    // 生成随机因子
    obj.t = (Math.random()).replace(".", "");
    let arr = [];
    for(let key in obj){
        arr.push(key + "=" + encodeURI(obj[key]));
    }
    let str = arr.join("&");
    return str;
}

function myJsonp(options){
    options = optionns || {};
    // 1. 生成url地址
    let url = options.url;
    // 判断是否指定回调函数名称的key
    if(options.jsonp){
        url += "?" + options.jsonp + "=";
    }else{
        url += "?callback=";
    }
    // 判断是否指定回调函数名称
    let callbackName = ("jQuery" + Math.random()).replace(".", "");
    if(options.jsonpCallback){
        callbackName = options.jsonpCallback;       
        url += options.jsonpCallback;
    }else{
        url += callbackName;
    }
    // 判断是否传递数据
    if(options.data){
        let str = obj2str(options.data);
        url += "&" + str;
    }
    
    // 2. 获取跨域的回调函数
    let oScript = document.createElement("script");;
    oScript.src = url;
    document.body.appentChild(oScript);
    
    // 3.定义回调函数
    window[callbackName] = function(data){
        // 删除已经获取了数据的script标签
        document.body.removeChild(oScript);
        // 将获取到的数据返回给外界
        options.success(data);
    }
}

Пакет JSONP.html

...
<script src="myJsonp.js"></script>
<script>
    myJSONP({
            url: "http://127.0.0.1:80/jQuery/Ajax/jsonp.php",
            data:{
                "name": "zs",
                "age": 22
            },
            jsonp: "cb",  // 告诉jQuery服务器在获取回调函数名称的时候需要用什么key来获取
            jsonpCallback: "zs", // 告诉jQuery服务器在获取回调函数名称的时候回调函数的名称是什么
            success: function (msg) {
                console.log(msg);
            }
        });
</script>
...

jsonp.php

<?php
// 1.拿到传递过来的数据
$name = $_GET["name"];
$age = $_GET["age"];
$arr = array("name"=>$name, "age"=>$age);
$data = json_encode($arr);  // 将数组转换为json

// 2.拿到回调函数的名称
$cb = $_GET["cb"];   
// 3.返回数据
echo $cb."(".$data.");";  
?>

2. Разница между HTTP и HTTPS (обязательно)

URL-адреса HTTP начинаются с http://, а URL-адреса HTTPS начинаются с https://
HTTP — это передача открытого текста, HTTPS шифруется через SSL\TLS
Номер порта 80 для HTTP и 443 для HTTPS.
HTTPS требует сертификата от ЦС. Как правило, бесплатных сертификатов очень мало, и вам нужно платить комиссию.
HTTP-соединения просты и не имеют состояния;
Протокол HTTPS — это сетевой протокол, созданный на основе протокола SSL+HTTP, который может выполнять зашифрованную передачу и аутентификацию личности и является более безопасным, чем протокол HTTP.

3. Давайте поговорим о кодах состояния HTTP

100-199 Используется для указания определенных действий, на которые должен реагировать клиент.
200-299 используется, чтобы указать, что запрос был успешным
300-399 для перенаправленных файлов
400-499 используются для обозначения ошибок клиента
400: Неверная семантика, текущий запрос не может быть понят сервером
401: Текущий запрос требует аутентификации пользователя.
403: Сервер понял запрос, но отказался его выполнять
404: запрошенный контент не существует.
500-599 используется для обозначения ошибок сервера
503 Сервис недоступен

4. Разница между get и post (обязательно)

  • Место хранения данных фиксации отличается

Запросы GET будут помещать данные за URL
Запросы POST помещают данные в тело запроса.

  • Различные ограничения размера для отправляемых данных

Запросы GET имеют ограничение в 2000 символов.
POST-запросы не имеют ограничений на количество информации

  • Кодирование отправленных данных по-разному

Параметры запроса GET могут быть только в коде ASCII, поэтому для китайского языка требуется кодировка URL.
Параметры POST-запроса не имеют этого ограничения.

  • Различные сценарии применения

Запросы GET используются для отправки неконфиденциальных данных и небольших данных.
Запросы POST используются для отправки конфиденциальных и больших данных.

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

5. Разница между Cookie, SessionStronge и LocalStronge (выделено)

  • Разные жизненные циклы в одном браузере

Жизненный цикл файлов cookie: по умолчанию срок действия истекает после закрытия браузера, но также можно установить время истечения срока действия.
Жизненный цикл SessionStorage: действителен только в текущем сеансе (окне), он будет очищен после закрытия окна или браузера, и время истечения срока действия не может быть установлено
Жизненный цикл LocalStorage: сохраняется, если не очищено

  • разная емкость

Ограничение емкости файла cookie: размер (около 4 КБ) и количество (20–50)
Ограничение емкости SessionStorage и LocalStorage: размер (около 5M)

  • различные сетевые запросы

Сетевой запрос cookie: он будет каждый раз передаваться в заголовке HTTP-запроса.Если вы используете файлы cookie для сохранения слишком большого объема данных, это вызовет проблемы с производительностью.
Сетевые запросы SessionStorage и LocalStorage: хранятся только в браузере, не участвуют в общении с сервером

  • Различные сценарии применения

Cookie: определить, вошел ли пользователь в систему
sessionStorage: данные формы
LocalStorage: Корзина

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

6. Преимущества и недостатки Ajax и четырех шагов

Проще говоря, ajax отправляет асинхронные запросы на сервер через объект XmlHttpRequest, получает данные с сервера, а затем использует javascript для управления DOM для обновления страницы.

Преимущества аякса

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

Недостатки аякса

  • Ajax повреждает механизм возврата браузера, что означает, что пользователь не может вернуться на предыдущую страницу с помощью кнопки возврата браузера. Хотя некоторые браузеры решают эту проблему, это не меняет механизма ajax, а затраты на разработку очень высоки, что противоречит быстрой разработке, требуемой фреймворком ajax. Это очень серьезная проблема с ajax.
  • Контрольный вопрос. Технологии также приносят новые угрозы безопасности для ИТ-предприятий.Технология Ajax подобна установлению прямого канала для корпоративных данных. Это позволяет разработчикам непреднамеренно раскрывать больше данных и логики сервера, чем раньше.
  • Поддержка поисковых систем относительно слабая.
  • Механизм исключений программы уничтожен. По крайней мере, с текущей точки зрения, фреймворки ajax, такие как ajax.dll и ajaxpro.dll, разрушат механизм исключений программы.
  • Кроме того, как и некоторые другие проблемы, например, это нарушает первоначальный замысел URL-адреса и позиционирования ресурса. Например, если я даю вам URL-адрес, если используется технология ajax, возможно, то, что вы видите под URL-адресом, и то, что я вижу под этим URL-адресом, отличается. Это противоречит первоначальному замыслу позиционирования ресурсов.
  • Некоторые портативные устройства (например, мобильные телефоны, КПК и т. д.) не очень хорошо поддерживают ajax.Например, когда мы открываем веб-сайт с использованием технологии ajax в браузере мобильного телефона, в настоящее время она не поддерживается.

Четыре шага ajax

  • Создайте асинхронный объект
let xmlhttp = new XMLHttpRequest();
  • Установите метод запроса и адрес запроса

open(method,url,async) указывает тип запроса, URL-адрес и необходимость асинхронной обработки запроса.
метод: тип запроса; GET или POST
url: расположение файла на сервере
async: true (асинхронный) или false (синхронный)

xmlhttp.open("GET","04-ajax-get.php",true);
  • послать запрос
xmlhttp.send();
  • Отслеживание изменений состояния
xmlhttp.onreadystatechange = function(ev2){
    /*
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪
    */
    if (xmlhttp.readyState === 4){
        // 判断是否请求成功
        if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){
            // 5.处理返回的结果
            console.log("接收到服务器返回的数据");
        }else {
            console.log("没有接收到服务器返回的数据");
        }
    }
}

7. Как внешний интерфейс обрабатывает данные, возвращаемые серверной частью

前端通过javascript对后端返回的json或者xml进行格式化处理
JSON:
var jsonObj = JSON.parse(后端返回的json字符串);
var result = JSON.stringify(jsonObj, null, 2);//格式化

XML：
先使用 xml2json转化为JSON格式，然后再JSON.parse再JSON.stringfy进行格式化

8. Что происходит с момента ввода URL до загрузки страницы (выделение)

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

1. 浏览器会进行DNS域名解析，拿到域名对应的服务器ip地址，再用该ip去访问web服务器
2. 然后会和web服务器进行tcp的三次握手建立tcp连接
3. 连接建立成功后，浏览器会发送http的get请求
4. 服务器收到请求并给予响应，返回请求的数据
5. 浏览器拿到数据并进行解析、渲染
6. 浏览器和服务器进行tcp的四次挥手，断开连接

9. Подробно опишите трехстороннее рукопожатие и четырехстороннюю волну TCP (курсив)

трехстороннее рукопожатие

  1. Первое рукопожатие (SYN=1, seq=x):

    1. Клиент отправляет пакет с установленным в 1 флагом TCP SYN, указывающим порт сервера, к которому клиент намеревается подключиться (запросить синхронизацию), и выбирает порядковый номер seq=x, указывающий, что порядковый номер первых данных байт при передаче данных равен x. (seq — случайное значение)
    2. После отправки клиент переходит в состояние SYN_SEND.

  2. Второе рукопожатие (SYN=1, ACK=1, seq=y, ack=x+1):

    1. После того, как TCP сервера получит сегмент запроса на соединение, если он согласен, он отправит ответный пакет подтверждения (ACK). То есть флаг SYN и флаг ACK равны 1. Сервер выбирает свой собственный порядковый номер ISN (случайное значение y), помещает его в поле seq и устанавливает порядковый номер подтверждения ack равным ISN клиента плюс 1, то есть x+1 (то есть он отвечает на другой сторона, чтобы подтвердить, что она получила пакет, начинающийся с порядкового номера x), и надеяться, что следующие данные начинаются с позиции x+1).
    2. После отправки сервер переходит в состояние SYN_RCVD.

  3. Третье рукопожатие (ACK=1, ack=y+1, seq=x+1)

    1. После получения этого сегмента клиент снова отправляет пакет подтверждения (ACK), флаг SYN равен 0, флаг ACK равен 1, а поле порядкового номера ACK, отправленного сервером +1, помещается в поле подтверждения ack и отправлено другой стороне и сообщить серверу свой seq=x+1
    2. После отправки клиент переходит в состояние ESTABLISHED, а когда сервер получает пакет, он также переходит в состояние ESTABLISHED, и рукопожатие TCP завершается.

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

2. Вторая волна: после того, как сервер получает FIN, он отправляет клиенту ACK, подтверждая, что серийный номер равен полученному серийному номеру + 1 (аналогично SYN, один FIN занимает один серийный номер), и сервер вводит состояние CLOSE_WAIT.

3. Третья волна: сервер отправляет FIN, чтобы закрыть передачу данных от сервера к клиенту, и сервер переходит в состояние LAST_ACK.

4. Четвертая волна: после того, как клиент получает FIN, клиент переходит в состояние TIME_WAIT, а затем отправляет ACK на сервер, подтверждая, что серийный номер равен полученному серийному номеру + 1, и сервер переходит в состояние CLOSED, завершение четырех волн.

браузер

1. Расскажите о механизме рендеринга в браузере

1.解析HTML生成DOM树  
2.解析CSS生成CSSOM规则树  
3.将DOM树和CSSOM规则树合并在一起生成渲染树  
4.遍历渲染树开始布局，计算每个节点的位置大小信息  
5.将渲染树的每个节点绘制到屏幕

2. Расскажите о цикле событий браузера (курсив)

1.JS是单线程的
  JS中的代码都是串行的, 前面没有执行完毕后面不能执行

2.执行顺序
2.1程序运行会从上至下依次执行所有的同步代码
2.2在执行的过程中如果遇到异步代码会将异步代码放到事件循环中
2.3当所有同步代码都执行完毕后, JS会不断检测 事件循环中的异步代码是否满足条件
2.4一旦满足条件就执行满足条件的异步代码

3.宏任务和微任务
在JS的异步代码中又区分"宏任务(MacroTask)"和"微任务(MicroTask)"
宏任务: 宏/大的意思, 可以理解为比较费时比较慢的任务
微任务: 微/小的意思, 可以理解为相对没那么费时没那么慢的任务

4.常见的宏任务和微任务
MacroTask: setTimeout, setInterval, setImmediate（IE独有）...
MicroTask: Promise, MutationObserver ,process.nextTick（node独有) ...
注意点: 所有的宏任务和微任务都会放到自己的执行队列中, 也就是有一个宏任务队列和一个微任务队列
        所有放到队列中的任务都采用"先进先出原则", 也就是多个任务同时满足条件, 那么会先执行先放进去的

5.完整执行顺序
1.从上至下执行所有同步代码
2.在执行过程中遇到宏任务就放到宏任务队列中,遇到微任务就放到微任务队列中
3.当所有同步代码执行完毕之后, 就执行微任务队列中满足需求所有回调
4.当微任务队列所有满足需求回调执行完毕之后, 就执行宏任务队列中满足需求所有回调
... ...
注意点:
每执行完一个宏任务都会立刻检查微任务队列有没有被清空, 如果没有就立刻清空

Vue

1. Что такое MVVM, в чем разница между MVVM и MVC и MVP?

MVVM был впервые предложен Microsoft.Он основан на идее MVC для настольных приложений.На странице интерфейса модель представлена ​​чистым объектом JavaScript, а представление отвечает за отображение.Они были разделены в максимальной степени, а Model и View связаны с ViewModel.
ViewModel отвечает за синхронизацию данных модели с представлением для отображения, а также за синхронизацию изменений представления с моделью.
Синхронизация между View и Model полностью автоматическая без вмешательства человека (завершается viewModel, который здесь относится к VUE)
Поэтому разработчикам нужно обращать внимание только на бизнес-логику, не нужно вручную управлять DOM и не нужно обращать внимание на синхронизацию состояния данных.Сложное обслуживание состояния данных полностью управляется MVVM.

Идея дизайна MVVM: обращайте внимание на изменения Модели, пусть инфраструктура MVVM автоматически обновляет состояние DOM, чтобы освободить разработчика от утомительных шагов по работе с DOM!

Связь между MVC и MVP
MVP является развитием классической модели MVC, и их основные идеи схожи: контроллер/презентатор отвечает за логическую обработку, модель предоставляет данные, а представление отвечает за отображение. В качестве нового паттерна MVP и MVC имеют существенное отличие: в MVP View напрямую не использует Модель, связь между ними осуществляется через Presenter (Контроллер в MVC), и все взаимодействия происходят внутри Presenter, а в MVC View будет считывать данные непосредственно из модели, а не через контроллер.

Связь между MVVM и MVP
Шаблон MVVM переименовывает Presenter в ViewModel, что в основном совпадает с шаблоном MVP. Единственное отличие состоит в том, что он использует двустороннюю привязку (привязку данных): изменения во View автоматически отражаются в ViewModel, и наоборот. Таким образом, разработчику не нужно заниматься получением событий и обновлением представления, фреймворк уже делает это за вас.

2. Расскажите о преимуществах Vue

1. Маленький размер

Только 33К после сжатия;

2. Более высокая эффективность работы

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

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

Позвольте разработчикам больше не манипулировать объектами DOM и уделять больше внимания бизнес-логике.

4. Богатая экология и низкая стоимость обучения

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

3. Расскажите о жизненном цикле Vue (обязательно)

Экземпляр Vue имеет полный жизненный цикл, то есть серию процессов от запуска до создания, инициализации данных, компиляции шаблонов, монтирования Dom → рендеринга, обновления → рендеринга, выгрузки и т. д. Мы называем это жизненным циклом Vue. С точки зрения непрофессионала, это процесс экземпляра Vue от создания до уничтожения, который является жизненным циклом.

Жизненный цикл Vue можно разделить на три фазы: фаза создания, фаза выполнения и фаза уничтожения.

Создание методов этапа жизненного цикла

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

2. created
вызовcreatedкогда это были мысамый раннийМесто, где можно получить доступ к данным и методам, хранящимся в экземпляре Vue.

3. beforeMount
вызовbeforeMount, это означает, что Vue скомпилировал окончательный шаблон, но не отобразил окончательный шаблон в интерфейсе.

4. mounted
вызовmounted, это означает, что Vue завершил отрисовку шаблона, и мы уже можем получить отрендеренный контент на интерфейсе.

Методы жизненного цикла на этапе выполнения

1. beforeUpdate
Когда вызывается beforeUpdate, это означает, что данные, сохраненные в экземпляре Vue, были изменены.

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

2. updated
При вызове update это означает, что данные, сохраненные в экземпляре Vue, были изменены, и интерфейс также синхронизировал измененные данные.
То есть: update будет вызываться после синхронного обновления данных и интерфейса.

Методы жизненного цикла этапа уничтожения

1. beforeDestroy
вызовbeforeDestroy, указывая на то, что текущий компонент вот-вот будет уничтожен
Пока компонент не уничтожен, метод beforeDestroy вызываться не будет. Функция beforeDestroy — это нашаНаконецФункции, которые могут обращаться к данным и методам компонента

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

4. Что такое компоненты и как их использовать

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

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

Регистрация компонента Vue делится наГлобальная регистрацияиЧастичная регистрация
Глобальная регистрация предназначена для привязки определенного шаблона в свойстве компонента глобального объекта Vue.
Локальная регистрация предназначена для привязки определенного шаблона в свойстве компонентов экземпляра Vue.

Если это компонент файла .vue, его необходимо импортировать в нужный компонент через импорт.

5. Как взаимодействовать между компонентами Vue (необходимо проверить)

метод первый,props/$emit
Передача данных через v-bind в родительском компоненте и получение данных через реквизиты в дочернем компоненте
Передайте метод через v-on в родительском компоненте и передайте его в пользовательском методе дочернего компонентаthis.$emit('自定义接收名称');Запустить переданный метод

Способ второй,$emit/$on
Этот метод использует пустой экземпляр Vue в качестве центральной шины событий (центра событий), которая используется для запуска событий и отслеживания событий, разумно и легко реализуя связь между любыми компонентами, включая родительский-дочерний, одноуровневый и межуровневый.

  1. Определите пустой экземпляр Vue
var Event = new Vue();
  1. передавать данные
Event.$emit(事件名,数据);
  1. получить данные
Event.$on(事件名,data => {});

Способ третий, vuex
vuex — общедоступный инструмент управления данными для Vue.Мы можем сохранять общие данные в vuex, Любому компоненту всей программы удобно получать и изменять общедоступные данные, сохраненные в vuex.

  • Объекты, созданные Vuex
const store = new Vuex.Store({
    // 这里的state就相当于组件中的data, 就是专门用于保存共享数据的
    state: {
        msg: "共享数据"
    }
});
  • Добавьте ключ хранилища в компонент-предок, чтобы сохранить объект Vuex.

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

store: store,
  • При использовании общих данных, сохраненных в Vuex, они должны использоваться в следующем формате.
<p>{{this.$store.state.msg}}</p>

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

  • существуетslotпрошедшийv-bind:数据名称="数据名称"способ предоставления данных
  • передать родительский компонент<template slot-scope="作用域名称">Получить данные
  • в родительском компоненте<template></template>Использовать данные в области имя.имя данных

В Vue 2.6. был введен новый унифицированный синтаксис для слотов с ограниченной областью действия (например, директива v-slot).
он заменяет слот-прицел

То есть мы можем пройтиv-slotДирективы сообщают Vue, как получать данные, предоставляемые слотами с заданной областью действия.

Формат:v-slot:插槽名称="作用域名称"
Сокращение:#插槽名称="作用域名称"

6. Как Vue реализует двустороннюю привязку данных (принцип двусторонней привязки данных Vue) (выделено)

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

Vue в основном реализует двустороннюю привязку данных с помощью следующих 4 шагов:
1. Реализовать прослушиватель данных Observer, который может отслеживать все свойства объекта данных, получать последние значения и уведомлять подписчиков в случае каких-либо изменений.
2. Реализовать синтаксический анализатор инструкций. Компилировать, сканировать и анализировать инструкции каждого узла элемента, заменять данные в соответствии с шаблоном инструкции и привязывать соответствующую функцию обновления.
3. Реализовать подписчик Watcher в качестве моста, соединяющего Observer и Compile, который может подписаться и получать уведомления о каждом изменении свойства, выполнять соответствующую функцию обратного вызова, связанную с инструкцией, и обновлять представление.
4. Наконец, внедрите MVVM в качестве записи для привязки данных, интегрируя прослушиватели, преобразователи и подписчики.

7. Зачем вам нужно использовать ключ (что делает значение ключа в Vue?) (курсив)

需要使用 key 来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点，找到正确的位置区插入新的节点
所以简单的说，key 的作用主要是为了高效的更新虚拟 DOM

比如渲染一堆input框，中间删除一个就会产生问题，下面的input会被顶上来，
vue会选择复用节点(Vue的就地更新策略)，导致之前节点的状态被保留，从而产生一系列的bug

8. Какие оптимизации вы внесли в свой проект Vue?

  1. Не пишите слишком много выражений в шаблоне
  2. Добавить ключ при вызове подкомпонентов в цикле
  3. Используйте v-show для частого переключения, v-if для нечастого переключения
  4. Используйте float как можно меньше, вы можете использовать flex
  5. Загрузка по требованию, вы можете использовать require или import() для загрузки необходимых компонентов по требованию.
  6. Отложенная загрузка маршрута
Категории