Интерфейс Wanzi Jingjing - Продвинутая глава

интервью

Это второй день моего участия в августовском испытании обновлений, подробности о мероприятии:Испытание августовского обновления

Эта статья является передней частьюПередовойуже вышелОсновы

Ссылка на основную статью нажмите, чтобы перейти

Серверное программирование/Ajax

Недостатки JSONP

  • JSON поддерживает только получение, потому что теги сценария могут использовать только запросы на получение;
  • JSONP требует, чтобы серверная часть взаимодействовала для возврата данных в указанном формате.

Междоменный (jsonp, ajax)

JSONP: на запросы Ajax влияет политика одного и того же источника, междоменные запросы не допускаются, а цепочка в атрибуте src тега script Однако у него есть доступ к междоменным js-скриптам, благодаря чему сервер больше не возвращает данные в формате JSON, а Возвращает фрагмент js-кода, который вызывает функцию, и вызывает ее в src, таким образом реализуя междоменное взаимодействие.

Как добиться междоменного

  • JSONP: междоменная связь достигается за счет динамического создания сценария и запроса URL-адреса с параметрами. document.domain + iframe cross-domain: обе страницы вынуждены устанавливать document.domain в качестве базового основного домена через js, который реализует один и тот же домен. location.hash + междоменный iframe: хочет общаться с междоменным b через промежуточную страницу c для достижения. Для трех страниц для передачи значений между разными доменами используется location.hash iframe, а для связи между одними и теми же доменами используется прямой js-доступ. window.name + iframe cross-domain: атрибут src iframe переносится из внешнего домена в локальный домен, а междоменные данные передаются из внешнего домена в локальный домен через window.name iframe.
  • postMessage cross-domain: одно из свойств окна, которое может работать между доменами.
  • CORS: Access-Control-Allow-Origin может быть установлен на стороне сервера. Внешний интерфейс не нужно устанавливать. Чтобы запросить запрос cookie, необходимо установить как внешний, так и внутренний интерфейс.
  • Междоменный прокси: запустите прокси-сервер для реализации пересылки данных

Внедрить Ajax

AJAX создает асинхронный объект Операция XMLHttpRequest Объект XMLHttpRequest

  1. Установить параметры запроса (метод запроса, относительный путь запрашиваемой страницы, асинхронный или нет)
  2. Установите функцию обратного вызова, функцию, которая обрабатывает ответ сервера, используя onreadystatechange, аналогичную указателю функции.
  3. Получите свойство readyState асинхронного объекта: это свойство хранит информацию о состоянии ответа сервера. При каждом изменении readyState будет выполняться функция onreadystatechange.
  4. Судите о статусе ответного сообщения, если оно равно 200, это означает, что сервер работает нормально и возвращает данные ответа.
  5. Чтобы прочитать данные ответа, вы можете получить данные, возвращенные сервером, через свойство responseText.
var xhr = new XMLHttpRequest();
xhr.open('get', 'aabb.php', true);
xhr.send(null);
xhr.onreadystatechange = function() {
    if(xhr.readyState==4) {
        if(xhr.status==200) {
        console.log(xhr.responseText);
        }
    }
}

мобильная веб-разработка

Вы знаете о PWA?

Полное название PWA — Progressive Web App, то есть прогрессивное веб-приложение. Приложение PWA — это сначала веб-страница, а приложение веб-страницы может быть написано с помощью веб-технологий. Затем добавляются App Manifest и Service Worker для реализации установки PWA и автономных функций.

Схема мобильной раскладки

Просто дайте ссылку для более подробной информации.самородки.IM/post/599970…

Rem, Em

Как единицы rem преобразуются в значения пикселейПри использовании единиц rem преобразование страницы в размер пикселя зависит от размера шрифта корневого элемента листа, т.е. HTML Размер шрифта элемента. Размер шрифта корневого элемента, умноженный на значение rem. Например, размер шрифта корневого элемента равен 16px, тогда 10rem эквивалентно 10*16=160px.

как em конвертируется в pxПри использовании единиц em значение в пикселях равно значению em, умноженному на размер шрифта элемента в единицах em. Например Шрифт div равен 18px, а его ширина и высота установлены на 10em, тогда ширина и высота равны 18px*10em=180px.

.test{
    width: 10em;
    height: 10em;
    background-color: #ff7d42;
    font-size: 18px;
}
/**
一定要记住的是，em 是根据使用它的元素的font-size 的大小来变化的，而不是根据父
元素字体大小。有些元素大小是父元素的多少倍那是因为继承了父元素中font-size 的设
定，所以才起到的作用。
*/

Унаследованные эффекты единиц emКогда есть наследование, используя EM-блок, каждый элемент автоматически наследует размер шрифта своего родительского элемента, наследства Это может быть покрыто только четким блоком шрифта, такими как PX и VW. Пока родительские элементы всегда были сделаны для них Бит, будет продолжаться, но если вы настроите блок-размер шрифта в качестве PX, вы будете использовать его напрямую. Значение единицы PX.

Элементы в корневом html наследуют размер шрифта, установленный в браузере.Если явно не установлено фиксированное значение для переопределения. Поэтому, хотя размер шрифта html-элемента напрямую определяет значение rem, Но этот размер шрифта в первую очередь определяется настройками браузера. (Поэтому обязательно задайте размер значения html, т.к. Возможно, размер шрифта в браузере пользователя несовместим. )

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

html{
    font-size: 1.5em;
}
/**
可以看到，因为浏览器默认字体大小为16px，所以当设置HTML 的fontsize 的值为1.5em
的售后，其对应的px 的值为16*1.5=24px
所以此时，再设置其他元素的rem 的值的时候，其对应的像素值为n*24px。
例如，test 的rem 的值为10，
*/
.test{
    width: 10rem;
    height: 10rem;
    background-color: #ff7d42;
}
/**
总结：
1. rem 单位翻译为像素值的时候是由html 元素的字体大小决定的。此字体大小会
被浏览器中字体大小的设置影响，除非显式的在html 为font-size 重写一个单位。
2. em 单位转换为像素值的时候，取决于使用它们的元素的font-size 的大小，但是有
因为有继承关系，所以比较复杂。
优缺点
em 可以让我们的页面更灵活，更健壮，比起到处写死的px 值，em 似乎更有张力，改
动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能,
em 做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那
么其后代元素都得重新计算
*/

Проблема адаптации к 1px на мобильном терминале

рекомендоватьblog.CSDN.net/WeChat_4367…

  1. Запишите значения px в виде десятичных дробей (не рекомендуется)
// IOS8 下已经支持带小数的px 值, media query 对应devicePixelRatio 有个查询值
// -webkit-min-device-pixel-ratio, css 可以写成这样
// 通过-webkit-min-device-pixel-ratio 设置。
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
// 如果使用less/sass 的话只是加了1 句mixin
// 缺点: 安卓与低版本IOS 不适用, 这个或许是未来的标准写法, 现在不做指望
  1. flexible.js

Это решение принято мобильным терминалом Taobao, адрес github.:https://github.com/amfe/lib-flexible.уже раньше Я сказал, что причина утолщения в 1 пиксель заключается в том, чтобы установить ширину области просмотра по всем направлениям. Что касается фактической физической ширины устройства, разве 1px в css не равен фактической длине 1px? сухой.<meta name=”viewport”>Значение масштаба внутри относится к масштабированию идеального окна просмотра, проверяет flexible.js Когда модель IOS будет обнаружена, она рассчитаетscale = 1/devicePixelRatio, затем установите область просмотра

  1. Псевдокласс + реализация преобразования
/** 对于解决1px 边框问题，我个人觉得最完美的解决办法还是伪类+transform 比较好。
原理：是把原先元素的border 去掉，然后利用:before 或者:after 重做border ，并
transform 的scale 缩小一半，原先的元素相对定位，新做的border 绝对定位。
media query
通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比
如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x 图，为
大屏幕手机设置@3x 图，通过媒体查询就能很方便的实现。
但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么
多套样式代码会很繁琐。*/
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media
/** 方便应用广泛适用于pc 端手机页面，通常做自适应布局时我们比较常用。
缺点：相对于代码要重复很多，得知道设备的宽度，手机的分辨率很多所以麻烦了点，
不过性能方面肯定最高； 可能存在闪屏的问题
@media 处理手机和pc 端界面兼容的问题，在IE 上的访问出现问题，百度方法，找找
两种，一种是respond.js，另一种是 
css3-mediaquerieshttp://blog.csdn.net/small_tu/article/details/47317453
*/

Опыт оптимизации мобильных приложений

Чтобы дать вам ссылку не перечислять по одномуКак оптимизировать мобильную производительность

Мобильная совместимость

Другие справочные ссылки: https://column.direct call.com/afraid/28206065

Событие жеста

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

Рисунок 2X Рисунок 3X Адаптация рисунка

При реальной разработке программы значение, используемое в нашем коде, относится к логическому разрешению pt, а не к разрешению в пикселях px. Например, мы определяем высоту кнопки как 45, это 45 означает 45pt вместо 45px. 1pt = 1px под экраном не Retina, 1pt = 2px под экраном Retina 4 и 4,7 дюйма, 1pt = 3px под экраном 5,5 и х. Делаем картинки разных размеров, Например, если @1x — это 22 пикселя, то @2x — это 44 пикселя, а @3x — 66 пикселей, с именем image.png соответственно. Создайте новый набор изображений в Assets.xcassets, измените имя на изображение и перетащите изображение соответствующего размера в соответствующую позицию.

/* 根据dpr 显示2x 图/3x 图*/
.bg-image(@url){
background-image:~"url('@{url}@2x.png')";
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
background-image:~"url('@{url}@3x.png')";
}
}
.bg-color(@color) {
background-color: @color;
}

Картинка на Андроиде, на некоторых устройствах размыто

Эта проблема вызвана разницей в devicePixelRatio, потому что разрешение мобильного телефона слишком маленькое. Если веб-страница отображается в соответствии с разрешением, символы будут очень маленькими. Все системы Apple изначально изменили разрешение 960x640 пикселей на iphone. От 4 до 480x320 пикселей на веб-странице. Это devicePixelRatio = 2. Android devicePixelRatio запутанный, со значениями 1,5, 2 и 3. Чтобы изображение отображалось более четко в мобильном телефоне, вместо него необходимо использовать фоновое изображение в 2 раза больше ширины и высоты. тега img (обычно оба используются дважды) Например: ширина и высота div — 100 x 100. Фоновое изображение должно быть 200 x 200, а затем установите стиль background-size:contain, чтобы отобразить его более четко.

Запретить увеличение и уменьшение страницы на мобильных устройствах

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

заставка перехода

//设置内联的元素在3D 空间如何呈现：保留
3D-webkit-transform-style:preserve-3D;
//设置进行转换的元素的背面在面对用户时是否可见：隐藏
-webkit-backface-visibility:hidden;

Заикание и замедление при прокрутке полосы прокрутки вверх и вниз

body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling:touch;
}

Нажмите и удерживайте страницу в течение длительного времени, и страница начнет мигать

element{
    -webkit-touch-callout: none;
}

Фронтенд-инжиниринг

Каков принцип Вавилона?

Процесс перевода babel также делится на три этапа, которые заключаются в следующем:

  • Parse Parse: анализ кода для создания абстрактного синтаксического дерева (т. е. AST), то есть процесс лексического и синтаксического анализа.
  • Transform Transform: для серии операций по преобразованию AST, babel принимает AST и проходит через Babel-traverse, добавляя, обновляя и удаляя операции в процессе.
  • Генерировать Генерировать: преобразовать преобразованный AST в код JS, используемый модуль — Babel-генератор.

image.png

Как написать плагин для Babel?

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

module.export = function(babel){
    return {
        visitor:{
        }
    }
}

Посетитель — это место, где обрабатываются различные типы узлов AST, так как же мы узнаем, что сгенерировал Babel? Какие узлы есть у AST? Очень просто, вы можете распечатать результат преобразования Бабеля, Или вот порталы:AST explorer

image.png

/** 这里我们看到const result = 1 + 2 中的1 + 1 是一个BinaryExpression 节点，那么在
visitor 中，我们就处理这个节点 */
var babel = require('babel-core');
var t = require('babel-types');
const visitor = {
BinaryExpression(path) {
const node = path.node;
let result;
// 判断表达式两边，是否都是数字
if (t.isNumericLiteral(node.left) && t.isNumericLiteral(node.right)) {
// 根据不同的操作符作运算
switch (node.operator) {
case "+":
result = node.left.value + node.right.value;
break
case "-":
result = node.left.value - node.right.value;
break;
case "*":
result = node.left.value * node.right.value;
break;
case "/":
result = node.left.value / node.right.value;
break;
case "**":
let i = node.right.value;
while (--i) {
result = result || node.left.value;
result = result * node.left.value;
}
break;
default:
}
}
// 如果上面的运算有结果的话
if (result !== undefined) {
// 把表达式节点替换成number 字面量
path.replaceWith(t.numericLiteral(result));
}
}
};
module.exports = function (babel) {
return {
visitor
};
}
// 插件写好了，我们运行下插件试试
const babel = require("babel-core");
const result = babel.transform("const result = 1 + 2;",{
plugins:[
require("./index")
]
});
console.log(result.code); // const result = 3;
/** 与预期一致，那么转换const result = 1 + 2 + 3 + 4 + 5;呢?
结果是: const result = 3 + 3 + 4 + 5;
这就奇怪了，为什么只计算了1 + 2 之后，就没有继续往下运算了?
我们看一下这个表达式的AST 树
你会发现Babel 解析成表达式里面再嵌套表达式。
表达式( 表达式( 表达式( 表达式(1 + 2) + 3) + 4) + 5)
而我们的判断条件并不符合所有的，只符合1 + 2 */
// 判断表达式两边，是否都是数字
if (t.isNumericLiteral(node.left) && t.isNumericLiteral(node.right)) {}
/** 那么我们得改一改
第一次计算1 + 2 之后，我们会得到这样的表达式
表达式( 表达式( 表达式(3 + 3) + 4) + 5)
其中3 + 3 又符合了我们的条件， 我们通过向上递归的方式遍历父级节点
又转换成这样:
表达式( 表达式(6 + 4) + 5)
表达式(10 + 5)
15 */
// 如果上面的运算有结果的话
if (result !== undefined) {
// 把表达式节点替换成number 字面量
path.replaceWith(t.numericLiteral(result));
let parentPath = path.parentPath;
// 向上遍历父级节点
parentPath && visitor.BinaryExpression.call(this, parentPath);
}
/** 到这里，我们就得出了结果const result = 15;
那么其他运算呢: */
const result = 100 + 10 - 50>>>const result = 60;
const result = (100 / 2) + 50>>>const result = 100;
const result = (((100 / 2) + 50 * 2) / 50) ** 2>>>const result = 9;

Каков ваш рабочий процесс git?

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

Разница между webpack и gulp (модульный и потоковый)

  • Webpack — это интерфейсное модульное решение, которое больше ориентировано на упаковку модулей.Мы можем рассматривать все ресурсы в разработке (изображения, файлы js, файлы css и т. д.) как модули и использовать загрузчик (загрузчик) и плагины (плагин) для обработки ресурсов.Обработка, упаковка во внешние ресурсы, соответствующие развертыванию в производственной среде.
  • Gulp делает упор на рабочий процесс фронтенд-разработки.Мы можем настроить ряд задач, определить транзакции, обрабатываемые задачами (такие как сжатие и слияние файлов, карта спрайтов, запуск сервера, контроль версий и т. д.), а затем определить порядок выполнения, позволяющий gulp выполнять эти задачи, тем самым выстраивая весь процесс разработки интерфейса проекта.

Vue

Расскажите мне о своем понимании vue

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

  1. Представление, управляемое данными, абстрагирует виртуальный дом (по сути, объект js) от реального дома, обновляет дом и отображает страницу с минимальными затратами с помощью алгоритма diff, адаптивного и наблюдательного, асинхронной очереди и других средств.
  2. Компонентизация, компоненты организованы и написаны в виде одного файла, так что мы можем написать html\css (конфигурация атрибута с областью видимости, изоляция CSS)\js в одном файле и взаимодействовать с Vue-загрузчиком для поддержки более мощных препроцессоров и т.д. .
  3. Из-за использования виртуального дома Vue ssr по своей сути достаточно, а мощный и богатый API предоставляет ряд API для удовлетворения различных потребностей в развитии бизнеса.
  4. Функция хука жизненного цикла, опциональная организация кода, ее довольно легко написать, но еще есть место для оптимизации (композиция Vue3-api)

недостаток:

  1. Поскольку нижний слой основан на Object.defineProperty (vue3.0 использует new Proxy()) для реализации отзывчивости, а сам этот API не поддерживает браузеры IE8 и ниже.
  2. Врожденный недостаток csr, проблема производительности первого экрана (белый экран)
  3. Поскольку Baidu и другие сканеры поисковых систем не могут сканировать контент в js, спа по своей сути не имеет SEO-оптимизации (кукловод Google довольно хорош, и этот инструмент также используется для достижения нижнего уровня предварительного рендеринга).

Что такое виртуальный DOM?

Виртуальный DOM относится к реальному DOM, отображаемому браузером.До появления реакции, vue и других технологий, Если мы хотим изменить содержимое, отображаемое на странице, мы можем найти дом, который нужно изменить, только путем обхода дерева запросов. Затем измените поведение или структуру стиля для достижения цели обновления пользовательского интерфейса. Этот метод потребляет много вычислительных ресурсов, потому что каждый запрос dom должен пройти через все дерево dom, если Создайте виртуальный объект dom (объект js), соответствующий дереву dom, чтобы представить dom в форме вложения объектов. дерево, то каждое изменение dom становится изменением свойств js-объекта, так что js-объект можно найти Изменения атрибутов обходятся дешевле, чем запросы к дереву dom.

жизненный цикл

image.png

Как vue прослушивает события клавиатуры?

//  @keyup. 方法
<template>
<input ref="myInput" type="text" value="hello world" autofocus
@keyup.enter="handleKey">
</template>
<script>
    export default {
    methods: {
        handleKey(e) {
            console.log(e)
        }
    }
}
</script>
//  addEventListener
<script>
    export default {
        mounted() {
            document.addEventListener('keyup', this.handleKey)
        },
        beforeDestroy() {
            document.removeEventListener('keyup', this.handleKey)
        },
        methods: {
            handleKey(e) {
                console.log(e)
            }
        }
}
</script>
<script>
export default {
    mounted() {
        document.addEventListener('keyup', this.handleKey)
    },
    beforeDestroy() {
        document.removeEventListener('keyup', this.handleKey)
    },
    methods: {
        handleKey(e) {
            console.log(e)
        }
    }
}
</script>

посмотрите, как глубоко отслеживать изменения объекта

deep 设置为true 就可以监听到对象的变化
let vm=new Vue({
    el:"#first",
    data:{msg:{name:'北京'}},
    watch:{
        msg:{
            handler (newMsg,oldMsg){
                console.log(newMsg);
            },
            immediate:true,
            deep:true
        }
    }
})

В чем разница между delete и Vue.delete для удаления массива?

  • удалить: только удаленные члены массива становятся пустыми/неопределенными, а значения ключей других элементов остаются неизменными
  • Vue.delete: удаляет элементы массива напрямую и изменяет значение ключа массива (объект реагирует, гарантируя, что удаление может вызвать обновление представления, этот метод в основном используется, чтобы избежать ограничения, которое Vue не может обнаружить свойство, являющееся удалено)

В чем разница между наблюдением и вычисляемым свойством?

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

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

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

Принцип двусторонней привязки Vue

Двусторонняя привязка данных Vue достигается за счет перехвата данных в сочетании с шаблоном издатель-подписчик. воспользовался Object.defineProperty() Этот метод переопределяет объект, чтобы получить значение свойства (get) и установить значение свойства (set).

Vue3.0 принимает новый прокси()Вы можете обратиться к https://juejin.cn/post/6950826293923414047Написано великим богом, подписавшим контракт с Наггетс.

Подскажите как пользоваться аксиосами? Как решить междоменную проблему?

axios — это асинхронный запрос, его использование похоже на ajax, его можно использовать, установив npm install axios — сохраните, пожалуйста Запрос включает в себя пять методов запроса, таких как получение, отправка, размещение, исправление, удаление и т. д. Чтобы решить проблему кроссдоменности, вы можете добавить его в заголовок запроса. Access-Control-Allow-Origin, вы также можете изменить конфигурацию proxyTable в файле index.js для решения междоменных проблем. проблема.

Как внедрить сторонние библиотеки (например, jQuery) в проект vue?

// 1、绝对路径直接引入
// 在index.html 中用script 引入
<script src="./static/jquery-1.12.4.js"></script>
// 然后在webpack 中配置external
externals: { 'jquery': 'jQuery' }
// 在组件中使用时import
import $ from 'jquery'
// 2 、在webpack 中配置alias
resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'jquery':
resolve('static/jquery-1.12.4.js') } }
// 然后在组件中import
// 3、在webpack 中配置plugins
plugins: [ new webpack.ProvidePlugin({ $: 'jquery' }) ]
// 全局使用，但在使用eslint 情况下会报错，需要在使用了$ 的代码前添加/*eslint-disable*/ 来去掉ESLint 的检查。

Зачем использовать Proxy API вместо defineProperty API в Vue3.0?

Отзывчивая оптимизация.

  1. Самая большая причина ограничения API defineProperty заключается в том, что он может отслеживать только одноэлементные свойства. Отзывчивая реализация в Vue2.x основана на дескрипторе в defineProperty, который просматривает + рекурсивно выполняет свойства в данных и устанавливает геттеры и сеттеры для каждого свойства. Вот почему Vue может реагировать только на предопределенные свойства в данных.В Vue невозможно использовать метод подстрочного индекса для прямого изменения значения свойства или добавления уже существующего свойства объекта, которое не может контролироваться сеттером. является ограничением defineProperty.
  2. Мониторинг API прокси предназначен для объекта, тогда все операции над этим объектом войдут в операцию мониторинга, которая может полностью проксировать все атрибуты, что приведет к значительному повышению производительности и улучшению кода. Прокси можно понимать как настройку уровня «перехвата» перед целевым объектом, и доступ к объекту из внешнего мира должен сначала пройти этот уровень перехвата, поэтому он обеспечивает механизм фильтрации и перезаписи доступа к внешнему миру. .
  3. Отзывчивость ленива.В Vue.js 2.x для объекта с глубоко вложенными свойствами, чтобы перехватить его изменения на глубоком уровне, необходимо рекурсивно пройти по объекту, выполнить Object.defineProperty для хранения данных каждого слоя объекта Станьте отзывчивым, что, несомненно, приведет к большим потерям производительности. В Vue.js 3.0 использование Proxy API не может отслеживать глубокие изменения свойств внутри объекта, поэтому его метод обработки заключается в рекурсивном ответе в геттере.Преимущество этого заключается в том, что внутренние свойства, к которым фактически осуществляется доступ, становятся отзывчивыми. можно просто сказать, что он реализует реакцию по запросу и снижает потребление производительности.

Основное использование:

let datas = {
    num:0
}
let proxy = new Proxy(datas,{
    get(target,property){
        return target[property]
    },
    set(target,property,value){
        target[property] += value
    }
})

Какие оптимизации сделаны в компиляции Vue3.0?

  1. Сгенерировать дерево блоков

Детализация обновления данных Vue.js 2.x и повторного рендеринга триггера осуществляется на уровне компонентов, и один компонент должен пройти через группу. Все дерево vnode файла. В версии 2.0 скорость рендеринга положительно связана с размером компонента: чем больше компонент, тем больше Чем медленнее эффективность. Более того, для некоторых статических узлов нет обновления данных, эти обходы являются потерей производительности. Vue.js 3.0 анализирует статический шаблон на этапе компиляции, компилирует и создает дерево блоков. Дерево блоков Это вложенный блок, вырезающий шаблон на основе инструкций динамического узла, структура узла внутри каждого блока фиксирована. Каждый блок должен отслеживать только те динамические узлы, которые он содержит. Итак, в версии 3.0 эффективность рендеринга больше не связана с размером шаблона. положительно коррелирует, но положительно коррелирует с количеством динамических узлов в шаблоне.

  1. оптимизация компиляции слотов

В Vue.js 2.x, если компоненту передан слот, каждый раз, когда родительский компонент обновляется, дочерняя группа будет принудительно обновление файла, что приводит к потере производительности.

Vue.js 3.0 оптимизирует создание слотов, так что обновление свойств в нединамических слотах будет запускать только обновление подкомпонентов. Динамический слот относится к использованию v-if, v-for, имени динамического слота и т. д. в слоте, что заставит слот генерировать движение во время выполнения. состояние изменяется, но не может быть отслежено дочерними компонентами.

3. Оптимизация алгоритма сравнения

Виртуальный дом в Vue2.x — это полное сравнение. В Vue3.0 добавлен статический флаг (PatchFlag): при сравнении с последним виртуальным узлом сравнивается значение Узел с флагом исправления и конкретное содержимое текущего узла, подлежащего сравнению, могут быть известны через информацию о флаге.

  1. подъемникСтатический статический подъем

Vue2.x: пересоздавать каждый раз, независимо от того, участвует элемент в обновлении или нет. Vue3.0: для элементов, которые не участвуют в обновлении, они будут созданы только один раз и будут повторно использоваться при каждом рендеринге.

  1. Кэш прослушивателя событий cacheHandlers

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

говорить о прокси

Перехват данных Vue имеет два недостатка:

  1. Невозможно прослушать изменения значения массива, измененного по индексу
  2. Невозможно отследить изменение объекта, то есть стоимость объекта

Так что в vue2.x будет атрибут $set proxy — новый API, запущенный в es6, который может компенсировать два вышеуказанных недостатка, поэтому версия vue3.x заменена на proxy объект.defineproperty.

React

избыточное промежуточное ПО

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

Общее промежуточное ПО: redux-logger: обеспечивает вывод журнала; redux-thunk: обрабатывает асинхронные операции; redux-promise: Обрабатывает асинхронные операции; возвращаемое значение actionCreator — обещание

Разделение компонентов React Бизнес-компоненты Технологические компоненты?

Компоненты обычно делятся на компоненты пользовательского интерфейса и компоненты-контейнеры в соответствии с их обязанностями. Компоненты пользовательского интерфейса отвечают за отрисовку пользовательского интерфейса, а компоненты-контейнеры отвечают за управление данными и логикой. Они связаны методом соединения, предоставляемым React-Redux.

Функции жизненного цикла React

// 1. 初始化阶段
getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的DOM 节点
componentDidMount:组件真正在被装载之后
// 2. 运行中状态
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据
后不更新，阻止render 调用，后面的函数不会被继续执行了）
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新
// 3. 销毁阶段：
componentWillUnmount:组件即将销毁

Какая периодическая функция является оптимизацией производительности React?

shouldComponentUpdate Этот метод используется для определения необходимости вызова метода рендеринга для перерисовки dom. так как Рендеринг dom очень затратный, если мы можем написать подробнее в методе shouldComponentUpdate Оптимизированный алгоритм dom diff может значительно повысить производительность.

Решение для оптимизации производительности React

  1. Переопределите shouldComponentUpdate, чтобы избежать ненужных манипуляций с домом.
  2. Используйте производственную версию React.js.
  3. Используйте ключ, чтобы помочь React определить наименьшее изменение для всех дочерних компонентов в списке.

Кратко опишите идею флюса

Самая большая особенность Flux — это «односторонний поток» данных.

  • Доступ пользователей Просмотр
  • Просмотр проблем Действия пользователя
  • Диспетчер получает действие и просит магазин обновить его соответствующим образом.
  • После обновления магазина создайте событие «change»
  • После того, как View получит событие «change», обновите страницу

Знать о shouldComponentUpdate

Технология React virtual dom требует постоянного сравнения различий между dom и виртуальным dom.Если цена дерева dom велика, Эта операция сравнения занимает много времени, поэтому React предоставляет функцию исправления, такую ​​как shouldComponentUpdate, например Если для некоторых изменений, если мы не хотим, чтобы компонент обновлялся, или если он такой же, как и оригинал после обновления, мы можем Используйте эту функцию, чтобы сообщить React напрямую, исключив операцию сравнения и еще больше повысив эффективность.

Как работает реакция

React создаст виртуальный DOM (виртуальный DOM). Когда состояние в компоненте изменяется, React сначала Изменения в виртуальном DOM помечаются алгоритмом «diffing», вторым шагом является сверка, которая будет использовать diff результат для обновления DOM.

Каковы преимущества использования React

  1. Легко увидеть, как компонент визуализируется, просто взглянув на функцию рендеринга.
  2. Внедрение JSX делает код компонентов более читабельным и упрощает понимание расположения компонентов или того, как компоненты относятся друг к другу.
  3. Поддерживается рендеринг на стороне сервера, что улучшает SEO и производительность.

В чем разница между компонентом класса и функциональным компонентом

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

В чем разница между государством (сборкой) (государством) и свойствами (реквизиты)?

  1. Состояние — это структура данных, которая используется для значений по умолчанию данных, необходимых при монтировании компонента. Состояние может меняться со временем, но в основном в результате поведения пользователя.
  2. Props (сокращение от properties) — это конфигурация компонента. Реквизиты передаются от родительских компонентов к дочерним компонентам, а что касается дочерних компонентов, то реквизиты неизменяемы. Компонент не может изменять свои собственные реквизиты, но может объединять реквизиты своих подкомпонентов (унифицированное управление). Реквизиты — это не только данные — обратные вызовы также могут передаваться через реквизиты.

сделать запрос ajax в течение этого жизненного цикла

В компонентах React сетевые запросы должны выполняться в componentDidMount. Этот метод будет вызываться в компоненте Выполняется после «монтирования» (добавления в DOM), только один раз за время существования компонента. важнее, Вы не можете гарантировать, что запрос Ajax будет завершен до монтирования компонента, если это так, это означает, что вы попытаетесь Вызов setState для несмонтированного компонента не будет работать. Инициировать сеть в componentDidMount Запрос гарантирует наличие компонента, который можно обновить.

Какова роль рефов в React

Рефы можно использовать для получения ссылки на узел DOM или компонент React. Хороший пример того, когда использовать refs Либо управляйте фокусом/выделением текста, запускайте анимацию команд, либо интегрируйтесь со сторонними библиотеками DOM. вам следует избегать использования Ссылки типа String и встроенные обратные вызовы ссылок. Обратные вызовы Refs — это то, что рекомендует React.

Что такое компонента более высокого порядка?

Компонент более высокого порядка — это функция, которая принимает компонент и возвращает новый компонент. HOC запускает ваш повторно используемый код, логику и загрузочная абстракция. Наиболее распространенной, вероятно, является функция подключения Redux. В дополнение к простому обмену библиотеками инструментов и простым Композиция, лучший способ HOC — разделить поведение между компонентами React. Если вы обнаружите, что пишете в другом месте Если у вас много кода для выполнения одной и той же задачи, вам следует подумать о рефакторинге кода в многоразовый HOC.

Почему предполагается, что параметр, передаваемый в setState, является обратным вызовом, а не объектом

Поскольку обновления this.props и this.state могут быть асинхронными, на их значения нельзя полагаться для вычисления следующего состояния.

Как предотвратить рендеринг компонента

Возврат null в методе рендеринга компонента не влияет на метод жизненного цикла инициирующего компонента.

Что является ключом при отображении списка? Какова цель установки ключа

Ключи помогают React определить, какие элементы были изменены, добавлены или удалены. Ключи должны быть назначены Лучший способ выбрать ключ — использовать Строка, однозначно идентифицирующая элемент списка. Много раз вы будете использовать идентификаторы в данных как keys, если у вас нет стабильных идентификаторов для отображаемых элементов, вы можете использовать индекс элемента в качестве индекса отображаемого элемента. ключ, но этот метод не рекомендуется, если элементы могут быть переупорядочены, это приведет к замедлению повторного рендеринга.

Какова цель вызова super(props) (в конструкторе)

Подклассы не могут использовать это до тех пор, пока не будет вызвана функция super(). В ES2015 подклассы должны быть в конструкторе. вызовите super() в . Причина передачи реквизита в super() заключается в облегчении (в подклассах) доступа в конструкторе. это.реквизит.

JSX

JSX — это синтаксическое расширение синтаксиса JavaScript, обладающее всеми возможностями JavaScript. Производство JSX Реагируйте на «элементы», вы можете заключить любое выражение JavaScript в фигурные скобки и встроить его в JSX. середина. После компиляции выражения JSX становятся обычными объектами JavaScript, что означает, что вы можете Внутри операторов if и циклов for используется JSX, присваивается переменная, принимается как параметр и возвращается из функции. Это.

Angular

Как компоненты взаимодействуют друг с другом в Angular

Props down

  1. Вызов подкомпонентов и передача значений через пользовательские свойства
  2. Дочерний компонент получает значение свойства через Input

Events up

  1. Определите метод с параметрами в родительском компоненте
  2. При вызове дочернего компонента свяжите пользовательское событие и предыдущий метод
  3. Дочерний компонент внутренне запускает события и передает значения через Output и EventEmitter.

Восемь компонентов Angular и краткое описание

model 是Angular 开发中的基本单位,是一个容器,可以包含组件、指令、管道等
Components 是可被反复使用的带有特定功能的视图
Templates 是经过指令和管道、组件等增强过的html
Bindings 结合着事件绑定属性绑定双向数据绑定等扩展html 的功能
Directives 分为结构性和属性型指令还有其他模块中比如路由模块中的指令等,
主要是增强html.
Pipes 可以对数据做一个筛选、过滤、格式化从而得到目的数据
Service 将组件、应用中的可共用的部分,比如数据或者方法等封装成服务以方便服用
DependencyInjection 依赖注入

Общие функции хука жизненного цикла в Angular

ngOnChanges:当Angular 设置其接收当前和上一个对象值的数据绑定属性时响应。
ngOnInit:在第一个ngOnChange 触发器之后,初始化组件/指令。这是最常用的方法,
用于从后端服务检索模板的数据。
ngDoCheck：检测并在Angular 上下文发生变化时执行。
每次更改检测运行时,会被调用。
ngOnDestroy:在Angular 销毁指令/组件之前消除。取消订阅可观察的对象并脱离
事件处理程序,以避免内存泄漏。
组件特定的hooks:
ngAfterContentInit:组件内容已初始化完成
ngAfterContentChecked:在Angular 检查投影到其视图中的绑定的外部内容之后。
ngAfterViewInit:Angular 创建组件的视图后。
ngAfterViewChecked：在Angular 检查组件视图的绑定之后

Как работает маршрутизация в Angular

Приложение Angular имеет один экземпляр службы маршрутизатора, и всякий раз, когда изменяется URL-адрес, соответствующий маршрут связывается с маршрутом. по массиву конфигурации соответствовать. При успешном совпадении он применяет перенаправление, после чего маршрутизатор строит дерево объектов ActivatedRoute, Также содержит текущее состояние маршрутизатора. Перед перенаправлением роутер будет запускать защиту (CanActivate) чтобы проверить, разрешено ли новое состояние. Route Guard — это просто метод интерфейса, который маршрутизаторы используют для проверки авторизации маршрутизации. После запуска Guard анализирует данные маршрутизации и создает экземпляры необходимых компонентов для<router-outlet></router-outlet>чтобы активировать состояние маршрутизатора.

Объясните сценарии использования rjx в Angular.

Rxjs 是在微软所提供的一种的异步处理数据的方式,在Angular 中处理网络通信时用到了。
创建一个Observable 并subsribe
比如:this.http.get('').subscribe((data)=>{ })

Здесь он в основном завершен, и если есть что-то, что не было описано, вы можете исправлять и критиковать. Предложить лайк + избранное

Ссылка на основную статью нажмите, чтобы перейти

Категории