Objet proxy JavaScript Première expérience du proxy Présentation de la vue simple basée sur les données

Cet article vous apporte des connaissances pertinentes sur JavaScript.Il vous présente pour la première fois la vue simple basée sur les données de l'objet proxy JS. Les amis dans le besoin pourront s'y référer ensemble, j'espère. sera utile à tout le monde.

Entrée front-end (vue) au cours de maîtrise : entrez dans l'apprentissage

JQuery est piloté par les événements, c'est-à-dire que lorsqu'une donnée est associée à un certain contenu du DOM, je dois faire fonctionner le DOM pour la synchronisation après les modifications des données :

 <div id="data">données</div>

 var données = "données"
//Les données ont changé via une sorte d'événement data = "new data"
$("#data").text = données

Dans les interactions simples, cette méthode semble toujours pratique, mais une fois que les interactions deviennent énormes, le code sera gonflé.

Quand j'étais sur le point d'obtenir mon diplôme, Angular, Vue et React émergeaient, et nous avons découvert une nouvelle méthode - basée sur les données, c'est-à-dire grâce à la « liaison » du DOM et des données, nous pouvons directement modifier les données, et. le contenu du DOM peut être directement modifié. Il y a eu un changement.

 <div>{{données}}</div>

 var données = "données"
// ... lié d'une manière ou d'une autre data = "nouvelles données"

Le contenu du DOM devient directement de nouvelles données. C’est très pratique à utiliser et le code est relativement concis Cela semblait magique à l’époque.

Différents cadres basés sur les données ont des principes et des processus contraignants différents, et ils sont tous relativement complexes. Mais aujourd'hui, nous allons le simplifier et utiliser l'objet Proxy de JS pour implémenter le lecteur de données. (D'ailleurs, les données réactives de Vue3 utilisent ce principe. Bien sûr, ce sera beaucoup plus compliqué que l'exemple d'aujourd'hui)

Qu'est-ce qu'un objet proxy ?

L'objet Proxy est utilisé pour créer un proxy pour un objet afin d'implémenter l'interception et la personnalisation des opérations de base (telles que la recherche d'attributs, l'affectation, l'énumération, l'appel de fonction, etc.). Les méthodes d'utilisation spécifiques sont :

 nouveau proxy (objet à proxy, objet événement du proxy)

Les événements suivants peuvent être délégués :

Utilisez Proxy pour écrire une vue simple basée sur les données

Maintenant que nous comprenons l'utilisation de base du proxy, nous pouvons l'utiliser pour proxyer le setter de l'objet afin d'implémenter le lecteur de données.

Définissez d'abord un élément DOM avec le même ID que les données :

 <div id="firstName"></div>
<div id="âge"></div>

Définissez un proxy proxy pour data , proxy son setter et exploitez le DOM dedans :

 données var = {
prénom: "",
âge: 0
}
var p_data = nouveau proxy (données, {
set : fonction (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval; // N'oubliez pas d'implémenter la logique d'origine return true; // Définir les exigences du proxy, renvoyer true après un traitement réussi
}
})

Définissez ensuite la valeur initiale et définissez les interactions pertinentes, et notez que l'agent p_data est exploité à la place de data :

 p_data.firstName = "Le nom sera affiché dans deux secondes..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "Lin Yuchen"
}, 2000)
document.getElementById("grow").onclick = function() {
p_data.age++
}

De cette façon, le lecteur de données est réalisé. Tant que la valeur de l'attribut de p_data est modifiée arbitrairement, le contenu du DOM peut être directement modifié :

JS

 données var = {
prénom: "",
âge: 0
}
var p_data = nouveau proxy (données, {
set : fonction (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval;
retourner vrai
}
})
p_data.firstName = "Le nom sera affiché dans deux secondes..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "Lin Yuchen"
}, 2000)
document.getElementById("grow").onclick = function() {
p_data.age++
}