Прокси-объект JavaScript. Первый опыт использования прокси. Простой обзор представления на основе данных.

Эта статья дает вам соответствующие знания о JavaScript. В основном она впервые знакомит вас с простым представлением прокси-объекта JS. Друзья, нуждающиеся в этом, могут обратиться к нему вместе, я надеюсь. будет полезен всем.

Вход в курс повышения квалификации по интерфейсу (vue): введите обучение

JQuery управляется событиями, то есть, когда часть данных связана с определенным содержимым DOM, мне нужно запустить DOM для синхронизации после изменения данных:

 <div id="data">данные</div>

 вар данные = "данные"
//Данные изменились через какое-то событие data="new data"
$("#data").text = данные

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

Когда я собирался заканчивать учебу, появились Angular, Vue и React, и мы открыли новый способ — управляемый данными. То есть, посредством «связывания» DOM и данных мы можем напрямую изменять данные и. содержимое DOM может быть изменено напрямую. Произошло изменение.

 <div>{{data}}</div>

 вар данные = "данные"
// ...как-то связаны data = "новые данные"

Содержимое DOM напрямую становится новыми данными. Его очень удобно использовать, а код относительно краток. В то время это казалось волшебством.

Различные платформы, управляемые данными, имеют разные принципы и процессы связывания, и все они относительно сложны. Но сегодня мы упростим его и будем использовать объект JS Proxy для реализации накопителя данных. (Кстати, адаптивные данные Vue3 используют этот принцип. Конечно, это будет гораздо сложнее, чем сегодняшний пример)

Что такое прокси-объект?

Объект Proxy используется для создания прокси-сервера объекта для реализации перехвата и настройки основных операций (таких как поиск атрибутов, присвоение, перечисление, вызов функций и т. д.). Конкретные методы использования:

 новый прокси (объект для проксирования, объект события прокси)

Можно делегировать следующие события:

Используйте прокси для написания простого представления, управляемого данными.

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

Сначала определите элемент DOM с тем же идентификатором, что и данные:

 <div id="firstName"></div>
<div id="age"></div>

Установите прокси-прокси для data , проксируйте его setter и управляйте в нем DOM:

 вар данные = {
имя: "",
возраст: 0
}
var p_data = новый прокси (данные, {
set: function (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval; // Не забудьте реализовать исходную логику return true // Требования к прокси-серверу, возвращаем true после успешной обработки;
}
})

Затем установите начальное значение и установите соответствующие взаимодействия и обратите внимание, что вместо data работает агент p_data :

 p_data.firstName = "Имя будет отображено через две секунды..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "Линь Юйчэнь"
}, 2000)
document.getElementById("grow").onclick = function() {
p_data.age++
}

Таким образом реализуется диск данных. Пока значение атрибута p_data изменяется произвольно, содержимое DOM может быть изменено напрямую:

JS

 вар данные = {
имя: "",
возраст: 0
}
var p_data = новый прокси (данные, {
set: function (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval;
вернуть истину
}
})
p_data.firstName = "Имя будет отображено через две секунды..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "Линь Юйчэнь"
}, 2000)
document.getElementById("grow").onclick = function() {
p_data.age++
}