Пять лет интервью, три года моделирования

css часть

принцип рем

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

Изменяя размер шрифта элемента html, вы можете установить фактический размер дочерних элементов.

Проблема мерцания загрузки rem layout
- Решение состоит в том, чтобы установить размер шрифта корневого элемента в медиа-запросе.Например, проект дизайна составляет 750 пикселей, соответствующий метод разработки — 1rem = 100 пикселей, а размер шрифта 375 пикселей — 50 пикселей (конкретный метод может можно найти на Baidu)
Лучшее решение, чем rem (недостаток не совместим)
- vw (1vw — 1% ширины области просмотра, 100vw — ширина области просмотра), vh (100vh — высота области просмотра)

Реализовать трехколоночный макет (фиксированная ширина с обеих сторон, адаптивная посередине)

Когда используется absolute, родительский элемент находится вне потока документов, и все дочерние элементы также должны быть вне потока документов. Если страница сложная, сложность разработки можно представить
Использование float Когда средний контент выше, чем стороны, высота сторон не будет увеличиваться, так как средний контент становится выше
Макет флексбокса (flex)
Использование отрицательных полей и чисел с плавающей запятой сложнее реализовать.
Используйте сетку

.container {
    display: grid;
    grid-template-columns: 100px auto 200px;
}

BFC (контекст форматирования на уровне блоков)

Принципы БФК

По сути, это правило рендеринга BFC (достаточно сказать следующие четыре пункта). включают: 1. Для дочерних элементов внутри BFC поля будут перекрываться в вертикальном направлении. 2. BFC — это независимый контейнер на странице, внешние элементы не будут влиять на внутренние элементы, и наоборот. 3. Область BFC не перекрывается с соседней областью флота. (Можно использовать для очистки эффектов поплавков). 4. При расчете высоты БФК плавающие дочерние элементы также участвуют в расчете.

Как сгенерировать BFC
- Способ 1: переполнение: не видно, атрибут можно скрыть, авто. 【Наиболее используемый】
- Метод 2: плавающий: значение атрибута float не равно none. Это означает, что пока установлено значение float, текущий элемент создает BFC.
- Метод 3: Позиционирование: Пока значение posiiton не является статическим или относительным, оно может быть абсолютным или фиксированным, и генерируется BFC.
- Метод 4: отображение встроенного блока, ячейки таблицы, заголовка таблицы, гибкого, встроенного гибкого
Приложение BFC
- Предотвращение перекрытия полей
- Может включать плавающие элементы - очищать внутреннее плавание (принцип очистки плавания заключается в том, что оба div находятся в одной и той же области BFC)
- Адаптивный двухколоночный макет
- Может предотвратить закрытие элементов плавающими элементами

flex (интервью, часто задаваемые, опущенные)

коробочная модель

Блочная модель CSS состоит из содержимого (контента), заполнения (внутреннего поля), границы (границы) и поля (внешнего поля).
В блочной модели w3c установленная ширина/высота является шириной/высотой содержимого, а в странном режиме ширина/высота устанавливается равной ширине/высоте содержимого+отступа+границы.
В модели коробки w3c размер коробки определяется содержимым, отступом, границей, в режиме причуд размер коробки определяется шириной и высотой.

js-часть

Разница между вызовом, применением и привязкой: как реализовать методы вызова и применения

Function.prototype.myBind = function(content) {
    if(typeof this !='function'){
        throw Error('not a function')
    }
    let _this = this;
    let args = [...arguments].slice(1) 
    let resFn=function(){
        return _this.apply(this instanceof resFn?this:content,args.concat(...arguments))
    }
    return resFn
};
 
 /**
 * 每个函数都可以调用call方法，来改变当前这个函数执行的this关键字，并且支持传入参数
 */
Function.prototype.myCall=function(context=window){
      context.fn = this;//此处this是指调用myCall的function
      let args=[...arguments].slice(1);
      let result=content.fn(...args)
      //将this指向销毁
      delete context.fn;
      return result;
}
/**
 * apply函数传入的是this指向和参数数组
 */
Function.prototype.myApply = function(context=window) {
    context.fn = this;
    let result;
    if(arguments[1]){
        result=context.fn(...arguments[1])
    }else{
        result=context.fn()
    }
    //将this指向销毁
    delete context.fn;
    return result;
}

каррирование функций

js наследование, конструктор, цепочка прототипов, конструктор, комбинированное наследование цепочки прототипов, паразитное комбинированное наследование, полифилл Object.create;

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

[...new Set(arr)]

var arr = [1,2,1,2,3,5,4,5,3,4,4,4,4],
    init=[]
var result = arr.sort().reduce((init, current)=>{
    console.log(init,current)
    if(init.length===0 || init[init.length-1]!==current){
        init.push(current);
    }
    return init;
}, []);
console.log(result);//1,2,3,4,5

Дроссельная защита от сотрясений

var deBounce=function(fn,wait=300){
    let timer
    return function(){
      if(timer){
          clearTimeOut(timer)
      }
      timer=setTimeOut(()=>{
          fn.apply(this,arguments)
      },wait)
    } 
}
 var throttle = function (fn, wait = 300) {
        let prev = +new Date();
        return function () {
          const args = argument,
          now = +new Date();
          if (now > prev + wait) {
            prev = now;
            fn.apply(this, args)
          }
        }
     }

Реализация обещаний идей

//0 pending,1 resolve,2 reject 

function Promise(fn) {...
	this._state = 0 // 状态标记
	doResolve(fn, this)
}

function doResolve(fn, self) {
	var done = false // 保证只执行一个监听
	try {
		fn(function(value) {
			if (done) return
			done = true
			resolve(self, value)
		}, function(reason) {
			if (done) return;
			done = true
			reject(self, value)
		})
	} catch (err) {
		if (done) return
		done = true
		reject(self, err)
	}
}

function resolve(self, newValue) {
	try {
		self._state = 1;
		...
	} catch (err) {
		reject(self, err)
	}
}

function reject(self, newValue) {
	self._state = 2;
	...
	if (!self._handled) {
		Promise._unhandledRejectionFn(self._value);
	}
}

Реализовать глубокое копирование

funtion deepCopy(obj){
    let result;
   if(typeofObj=='object'){
       //复杂数据类型
       result=obj.constructor==Array?[]:{}
       for (let i in obj){
           result[i]=typeof obj[i]=='object'?deepCopy(obj[i]):obj[i]
       }
   }else{
       //简单数据类型
       result=obj
   }
   return result
}

Регулярная реализация разделителя тысяч

function commafy(num) {
        return num && num
            .toString()
            .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
                return $1 + ",";
            });
    }
 console.log(commafy(1312567.903000))

цикл событий js

JavaScript — это однопоточный язык, и задачи делятся на две категории: синхронные задачи и асинхронные задачи. Синхронные и асинхронные задачи входят в разные «места» выполнения соответственно, синхронно входят в основной поток, асинхронно входят в таблицу событий и регистрируют функции. Когда указанное действие будет выполнено, таблица событий переместит эту функцию в очередь событий. Задачи в основном потоке пусты после выполнения задач и возвращаются в очередь событий, чтобы прочитать соответствующие функции и войти в основной поток. Вышеупомянутый процесс будет продолжать повторяться, что часто называют циклом событий. Однако в JS также есть механизм для асинхронности, то есть при встрече с макрозадачей сначала выполнить макрозадачу, поместить макрозадачу в очередь событий, а затем выполнить микрозадачу и поместить микрозадачу в очередь событий. но эти две очереди не очередь. Когда вы его достанете, сначала возьмите функцию обратного вызова из микрозадачи, а затем возьмите функцию обратного вызова макрозадачи из очереди макрозадачи. Макрозадачи обычно включают в себя: общий сценарий кода, setTimeout, setInterval. Микрозадачи: Обещание, процесс.nextTick

Механизм потока событий, разница между делегированием событий event.target и event.currentTarget

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

addEventListener предоставляет третий параметр для поддержки всплытия и захвата: значение по умолчанию — false, всплывающее представление событий; если установлено значение true, захват событий.

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

Процесс нового и реализация нового

//方法1
function create(){
   //1.创建一个空对象
   let obj={}
   //2.获取构造函数
   let Con=[].shift.call(arguments)
   //3.设置空对象的原型
   obj._proto_=Con.prototype
   //4.绑定this并执行构造函数，给新对象添加属性和方法
   let result=Con.apply(obj,arguments)
   //5.确保返回值为对象
   return result instanceof Object?result:obj
}
//方法2
//通过分析原生的new方法可以看出，在new一个函数的时候，
// 会返回一个func同时在这个func里面会返回一个对象Object，
// 这个对象包含父类func的属性以及隐藏的__proto__
function New(f) {
    //返回一个func
    return function () {
        var o = {"__proto__": f.prototype};
        f.apply(o, arguments);//继承父类的属性

        return o; //返回一个Object
    }
}

инкапсулировать ajax

/* 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
function myAjax(opt){
     opt = opt || {};
     opt.method = opt.method.toUpperCase() || 'POST';
     opt.url = opt.url || '';
     opt.async = opt.async || true;
     opt.data = opt.data || null;
     opt.success = opt.success || function () {}
     let xmlHttp = null;
     if (XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
     }else{
         xmlHttp =new ActiveXObject('Microsoft.XMLHTTP')
     }
     let params;
    for (var key in opt.data){
        params.push(key + '=' + opt.data[key]);
    }
    let postData = params.join('&');
    if (opt.method.toUpperCase() === 'POST') {
        xmlHttp.open(opt.method, opt.url, opt.async);
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
        xmlHttp.send(postData);
    }else if (opt.method.toUpperCase() === 'GET') {
        xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
        xmlHttp.send(null);
    } 
     xmlHttp.onreadystatechange= function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                opt.success(xmlHttp.responseText);//如果是json数据可以在这使用opt.success(JSON.parse( xmlHttp.responseText))
            }
     };
}

URL принимает параметры

var url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2";
function parseQueryString(url){
    var str = url.split("?")[1],    //通过?得到一个数组,取?后面的参数
        items = str.split("&");    //分割成数组
    var arr,name,value;

    for(var i=0; i<items.length; i++){
        arr = items[i].split("=");    //["key0", "0"]
        name = arr[0];
        value = arr[1];
        this[name] = value;
    }
}

var obj = new parseQueryString(url);
alert(obj.key2)

HTTP-раздел

http-протокол

Протокол HTTP (протокол передачи гипертекста)

1.0 Недостатки протокола:
Невозможно повторно использовать ссылку, отключиться после завершения, перезапустить медленный старт и трехстороннее рукопожатие TCP
Блокировка заголовка строки: блокируется заголовок строки, в результате чего запросы влияют друг на друга.

1.1 Улучшения:

Длинное соединение (поддержание активности по умолчанию), повторное использование
Поле host указывает соответствующий виртуальный сайт
новые возможности:
- http
- Аутентификация
- государственное управление
- кеш-кэш
  - Cache-Control
  - Expires
  - Last-Modified
  - Etag
2.0:
мультиплексирование
Двоичный уровень кадрирования: между прикладным уровнем и транспортным уровнем
сжатие заголовка
Пуш сервера

Сообщение HTTP-запроса Запрос

Он состоит из четырех частей: строки запроса, заголовка запроса, пустой строки и данных запроса.
Строка запроса, в которой указывается тип запроса, ресурс, к которому необходимо получить доступ, и используемая версия HTTP.
Заголовок запроса, часть сразу после строки запроса (т. е. первая строка), используется для описания дополнительной информации, которая будет использоваться сервером.
Пустая строка, обязательна пустая строка после заголовка запроса
Данные запроса также называются телом, и могут быть добавлены любые другие данные.

Ответное сообщение HTTP Ответ

Ответ HTTP также состоит из четырех частей, а именно: строки состояния, заголовка сообщения, пустой строки и тела ответа.

Строка состояния состоит из трех частей: номера версии протокола HTTP, кода состояния и сообщения о состоянии.
Заголовок сообщения для описания некоторой дополнительной информации, которая будет использоваться клиентом.
Третья часть: пустая строка, пустая строка после заголовка сообщения обязательна
Четвертая часть: тело ответа, текстовая информация, возвращаемая сервером клиенту.

Введите URL-адрес в адресную строку браузера и нажмите Enter, чтобы выполнить следующий процесс:

Браузер запрашивает у DNS-сервера разрешение IP-адреса, соответствующего доменному имени в URL-адресе;
Установить TCP-соединение (трехстороннее рукопожатие);
Браузер отправляет HTTP-запрос на чтение файла (файла, соответствующего части URL-адреса, расположенной за доменным именем), и сообщение запроса отправляется на сервер в виде данных третьего сообщения трехэтапного рукопожатия TCP;
Сервер отвечает на запрос браузера и отправляет браузеру соответствующий html-текст;
освободить TCP-соединение (четыре волны);
Браузер берет html-текст и отображает содержимое;

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

SYN (порядковый номер синхронизации) ACK (символ подтверждения)

Первое рукопожатие: Клиент устанавливает флаг SYN в 1, случайным образом генерирует значение seq=J и отправляет пакет данных на Сервер.Клиент входит в состояние SYN_SENT и ждет подтверждения от Сервера.
Второе рукопожатие: после того, как сервер получает пакет данных, бит флага SYN=1 знает, что клиент запрашивает установление соединения, и сервер устанавливает биты флага SYN и ACK в 1, ack=J+1 и случайным образом генерирует значение seq=K и отправить пакет Клиенту для подтверждения запроса на соединение, а Сервер переходит в состояние SYN_RCVD.
Третье рукопожатие: после того, как клиент получил подтверждение, он проверяет, соответствует ли подтверждение J+1 и равно ли ACK 1. Если все верно, бит флага ACK устанавливается в 1, подтверждение=K+1 и отправляется на сервер.Сервер проверяет, соответствует ли ACK K+1 и является ли ACK 1. Если он правильный, соединение устанавливается успешно.Клиент и сервер переходят в состояние ESTABLISHED, завершают трехэтапное рукопожатие , после чего клиент и сервер могут начать передачу данных.

помахал четыре раза

Первая волна: клиент отправляет FIN, чтобы закрыть передачу данных от клиента к серверу, и клиент переходит в состояние FIN_WAIT_1.
Вторая волна: после того, как сервер получает FIN, он отправляет клиенту ACK, подтверждая, что серийный номер равен полученному серийному номеру + 1 (то же самое, что и SYN, один FIN занимает один серийный номер), и сервер переходит в состояние CLOSE_WAIT. государство.
Третья волна: сервер отправляет FIN, чтобы закрыть передачу данных от сервера к клиенту, и сервер переходит в состояние LAST_ACK.
Четвертая волна: после того, как клиент получает FIN, клиент переходит в состояние TIME_WAIT, а затем отправляет ACK на сервер, подтверждая, что серийный номер равен полученному серийному номеру + 1, сервер переходит в состояние CLOSED и завершает четыре махал.

Почему для установления соединения требуется трехстороннее рукопожатие, а для закрытия — четырехстороннее?

Это связано с тем, что сервер в состоянии LISTEN после получения сообщения SYN для запроса на установление соединения отправляет ACK и SYN в одном сообщении клиенту. Когда соединение закрыто, когда получено сообщение FIN от другой стороны, это означает только то, что другая сторона больше не отправляет данные, но все еще может получать данные, и не все данные отправляются другой стороне, поэтому сторона может немедленно закрыть или отправить некоторые данные.После того, как данные отправлены другой стороне, сообщение FIN отправляется другой стороне, чтобы выразить согласие закрыть соединение сейчас.Поэтому собственные ACK и FIN обычно отправляются отдельно.

Процесс создания веб-страницы можно условно разделить на пять этапов:

Преобразование html-кода в dom
Преобразование кода css в cssom
Объедините dom и cssom для создания дерева рендеринга
Сгенерировать компоновку компоновки, то есть выполнить плоскостной синтез всех узлов дерева рендеринга
Нарисуйте краску макета на экране (можно расширить, чтобы уменьшить перекомпоновку и перерисовку рендеринга браузера)

Как работает HTTPS

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

кеш браузера

Когда браузер снова посещает уже посещенный ресурс, он делает это:

Посмотрите, не попал ли в сильный кеш, и если да, используйте кеш напрямую.
Если сильный кеш не срабатывает, на сервер отправляется запрос, чтобы проверить, сработал ли согласованный кеш.
При попадании в согласованный кеш сервер вернет 304, сообщая браузеру, что нужно использовать локальный кеш.
В противном случае верните последний ресурс.
Сильный кеш
- Expires
- Cache-control
Согласовать кеш
- Last-Modified/If-Modified-Since
- Etag/If-None-Match

vue&react

Virtual DOM

По сути, VNode — это абстрактное описание реального DOM, его основное определение — не что иное, как несколько ключевых атрибутов, таких как имя тега, данные, дочерние узлы, ключевые значения и т. д. Другие атрибуты используются для расширения гибкости и реализации. VNode Некоторые особенности. Поскольку VNode используется только для рендеринга для сопоставления с реальным DOM и не должен содержать методы для управления DOM, он очень легкий и простой. Виртуальный DOM Помимо определения структуры данных, сопоставление с реальным DOM на самом деле происходит через VNode create (с использованием объектов JS для имитации дерева DOM), diff (сравните различия между двумя виртуальными деревьями DOM), patch (примените разницу к реальному DOM) DOM-дереву) и так далее.

алгоритм сравнения

Когда алгоритм сравнения сравнивает старые и новые узлы, сравнение будет выполняться только на одном уровне, а не между уровнями.
Когда данные изменяются, будет сгенерирован новый VNode, а затем новый VNode будет сравниваться со старым Node.Обнаружено, что разница напрямую изменяется в реальном DOM, сравниваются новые и старые узлы, а реальный DOM патчится при сравнении.
Ключ настройки узла может эффективно использовать dom (ключ не должен быть установлен на индексный индекс)
Алгоритм сравнения виртуальных DOM в основном оптимизирован для следующих трех сценариев:

tree diff

При иерархическом сравнении деревьев два дерева будут сравнивать только узлы одного уровня. (поскольку перемещение узлов DOM по уровням незначительно) Если родительский узел больше не существует, узел и его дочерние узлы полностью удаляются и не будут использоваться для дальнейших сравнений. Уведомление: React официально рекомендует не выполнять межуровневые операции над узлами DOM, что сильно влияет на производительность React. При разработке компонентов поддержание стабильной структуры DOM поможет повысить производительность. Например, узлы можно скрыть или показать с помощью CSS без фактического удаления или добавления узлов DOM.

component diff

Если это компонент того же типа, продолжайте сравнивать виртуальное DOM-дерево (diff-дерево) в соответствии с исходной стратегией. Для одного и того же типа компонента возможно, что в его виртуальном DOM нет изменений.Если вы можете точно знать это, это может сэкономить много времени на вычисление различий, поэтому React позволяет пользователям использовать shouldComponentUpdate(), чтобы определить, является ли компонент должен быть diff. Если нет, замените непосредственно все дочерние узлы под всем компонентом.

element diff

Сравните узлы на одном уровне. На этот раз React предлагает: добавьте уникальный ключ для различения. Хотя это всего лишь небольшое изменение, производительность претерпела потрясающие изменения! Например: A B C D --> B A D C Перед добавлением ключа: если найдено B != A, создайте и вставьте B в новый набор, удалите старый набор A и т. д., создайте и вставьте A, D и C и удалите B, C и D. . После добавления ключа: B, D не выполняют никаких действий, A и C перемещаются. Предложение: в процессе разработки постарайтесь сократить такие операции, как перемещение последнего узла в начало списка.Когда число узлов слишком велико или операция обновления выполняется слишком часто, это повлияет на производительность рендеринга React в определенной степени.

Суммировать

React преобразует проблемы сложности O (n3) в проблемы сложности O (n), формулируя смелую стратегию сравнения;
React оптимизирует алгоритм дифференциации деревьев с помощью стратегии иерархической дифференциации;
React генерирует похожие древовидные структуры через один и тот же класс, а разные классы генерируют разные древовидные структуры и оптимизируют алгоритм сравнения компонентов;
React оптимизирует алгоритм сравнения элементов, устанавливая уникальную ключевую стратегию;
Предполагается, что поддержание стабильной структуры DOM поможет повысить производительность при разработке компонентов;
В процессе разработки рекомендуется свести к минимуму такие операции, как перемещение последнего узла в начало списка.Когда количество узлов слишком велико или операции обновления выполняются слишком часто, это повлияет на производительность рендеринга React. в некоторой степени.

Отзывчивый принцип vue

Object.defineProperty(obj, prop, descriptor)
obj — объект, для которого должно быть определено свойство; prop — имя определяемого или изменяемого свойства; descriptor — дескриптор свойства, которое необходимо определить или изменить.

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

observe
Функция метода наблюдения заключается в добавлении наблюдателя к данным типа объекта, отличного от VNode. Если он был добавлен, он вернется напрямую. В противном случае экземпляр объекта наблюдателя будет создан при выполнении определенных условий.
Функция наблюдения заключается в отслеживании изменений данных.
Observer — это класс, роль которого заключается в добавлении геттеров и сеттеров к свойствам объекта для зависимостей для сбора и отправки обновлений:
Зависит от сбора и распространения обновлений
Цель сбора зависимостей - узнать, какие подписчики должны быть уведомлены для выполнения соответствующей логической обработки при изменении ответных данных и срабатывании их сеттеров. Мы называем этот процесс диспетчерским обновлением. Фактически, Watcher и Dep являются очень реализацией Классический шаблон проектирования Observer
Распространение обновления — это когда данные изменяются, инициируется логика установки и инициируется процесс обновления всех наблюдателей, подписанных во время процесса зависимости, то есть наблюдателей.Этот процесс дополнительно оптимизируется с использованием очереди. , и, наконец, выполнить свои функции обратного вызова
Процесс компиляции с помощью Vue в основном делится на следующие этапы.

parse (сгенерировать AST) => оптимизировать (оптимизировать статические узлы) => сгенерировать (сгенерировать функцию рендеринга)

// 解析模板字符串生成 AST
const ast = parse(template.trim(), options)
//优化语法树
optimize(ast, options)
//生成代码
const code = generate(ast, options)

Разница между вычисляемым vue и просмотром

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

Понимание vuex, односторонний поток данных

vuex

штат: государственный центр
мутации: изменение состояния
действия: асинхронное изменение состояния
геттеры: получить статус
модули: разделите состояние на несколько модулей для удобства управления
- Разница между мутациями и действиями

Два принципа реализации интерфейсной маршрутизации

Хэш-режим

Объект окна предоставляет событие onhashchange для отслеживания изменения хеш-значения.Как только хеш-значение в URL-адресе изменится, событие будет запущено.

Режим истории

popstate прослушивает изменения в информации стека истории и повторно отображает, когда она изменяется
Используйте метод pushState для добавления функциональности
Используйте replaceState для реализации функции замены

Фронтальная безопасность

XSS и CSRF

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

профилактика:

Использовать XSS-фильтр
1. Фильтрация ввода, проверка достоверности данных, отправленных пользователем, прием только материалов, отправленных в пределах указанного диапазона длины и соответствующих нашему ожидаемому формату, блокирование или игнорирование любых других данных.
2. Экранирование вывода, когда строку необходимо вывести на веб-страницу, и неизвестно, содержит ли строка специальные символы XSS, чтобы обеспечить целостность и правильность выходного содержимого, экранирование HTML можно использовать при выводе атрибутов HTML. Кодировать (HTMLEncode) для обработки и вывода в<script>, возможна кодировка JS.
Использование только HTTP-куки

Отметьте важные файлы cookie как httponly, чтобы, когда браузер инициирует запрос к веб-серверу, он отображал поле cookie, но к этому файлу cookie нельзя было получить доступ в сценарии js, что позволяет избежать XSS-атак с использованием JavaScript document.cookie Получить файлы cookie.

CSRF: подделка межсайтовых запросов, также известная как XSRF, представляет собой метод атаки, который перехватывает пользователя для выполнения непреднамеренных действий в веб-приложении, вошедшем в систему в данный момент. По сравнению с XSS, XSS использует доверие пользователя к указанному веб-сайту, а CSRF использует доверие веб-сайта к веб-браузеру пользователя.

Предотвращение: Ограничение операций пользователя — механизм проверки кода

Метод: добавьте проверочный код, чтобы определить, активно ли пользователь инициировал запрос. Поскольку машина проверочного кода с определенной силой не может быть распознана, опасный веб-сайт не может подделать полный запрос.
Достоинства: Простой и грубый, недорогой, надежный, может предотвратить 99,99% злоумышленников.
Минусы: Неудобный для пользователя.

Ограничение источника запроса — проверьте поле реферера HTTP

Метод: в заголовке HTTP-запроса есть поле Referer, в котором записан исходный адрес запроса. Что нужно сделать серверу, так это проверить, является ли исходный адрес законным, и отказаться отвечать, если он с какого-то ненадежного веб-сайта.
Преимущества: нулевая стоимость, простота и удобство реализации.
Недостатки: поскольку этот метод в значительной степени зависит от самого браузера, безопасность зависит от браузера.
Дополнительные механизмы аутентификации — использование токенов

Метод: используйте токен вместо кода подтверждения. Поскольку хакер не может получить и увидеть содержимое файла cookie, подделать полный запрос невозможно. Основная идея заключается в следующем:
Сервер случайным образом генерирует токен (например, хэширует файл cookie), сохраняет его в сеансе, помещает в файл cookie или передает его внешнему интерфейсу в виде ajax.
- Когда внешний интерфейс отправляет запрос, он анализирует токен в файле cookie и помещает его в URL-адрес или заголовок запроса.
- Сервер проверяет токен.Поскольку хакер не может получить или подделать токен, он может предотвратить csrf