Quelle est l'utilisation du proxy dans es6

Dans es6, le proxy est utilisé pour intercepter des opérations spécifiées sur un objet, et peut filtrer et réécrire l'accès externe ; le proxy met en place une couche « d'interception » devant l'objet cible, et l'accès externe à l'objet doit passer par là. Interception de couche, la syntaxe est "new Proxy(target, handler);".

L'environnement d'exploitation de ce tutoriel : système Windows 10, ECMAScript version 6.0, ordinateur Dell G3.

À quoi sert le proxy dans es6 ?

Le proxy peut être compris comme la mise en place d'une couche « d'interception » avant que l'accès externe à l'objet ne doive d'abord passer par cette couche d'interception, il fournit donc un mécanisme. qui peut filtrer et réécrire l'accès externe. Le sens originel du mot proxy est agence. Il est utilisé ici pour signifier qu'il « agit pour le compte de » certaines opérations. Il peut être traduit par « agent ». Ce qui suit est une définition du proxy tirée de la documentation officielle.

let p = new Proxy(target, handler);

target : l'objet cible qui doit être encapsulé par le proxy (peut être n'importe quel type d'objet, y compris des tableaux natifs, des fonctions ou même un autre proxy).

handler : Un objet dont les propriétés sont des fonctions qui définissent le comportement de l'agent lorsqu'une opération est effectuée (peut être compris comme une sorte de déclencheur).

ES6 propose une nouvelle fonctionnalité, proxy, qui permet d'intercepter des opérations spécifiées sur un objet. Cette fonction est très utile. Pour donner un exemple : l'objet

var engineer = { name: 'Joe Sixpack', salary: 50 };
var interceptor = {
 set: function (receiver, property, value) {
  console.log(property, 'is changed to', value);
  receiver[property] = value;
 }
};
engineer = Proxy(engineer, interceptor);

engineer est remplacé par l'objet proxy construit par proxy Proxy. Le deuxième paramètre passé dans Proxy est une fonction de processeur. Une fonction de processeur a plusieurs méthodes, telles que get, set et d'autres méthodes. La méthode set ici peut intercepter toutes les opérations d'attribution de propriétés effectuées sur l'objet proxy.

Lorsque nous effectuons la mission suivante :

engineer.salary = 60;

déclenchera le processeur et affichera des informations :

salary is changed to 60

Chaque fois qu'une valeur est attribuée à l'objet proxy, la fonction du processeur sera appelée, qui peut être utilisée pour déboguer certains problèmes.

Bien sûr, Proxy n'est pas né uniquement pour le débogage. Si vous avez utilisé Sencha Touch ou AngularJS, vous constaterez que ces frameworks ont des fonctions similaires à la liaison de modèles de données.

L'auteur a utilisé un proxy dans Sencha Touch. Le code est le suivant :

proxy:{//数据代理
//       type:'localstorage',
//       id:'bills',
    // limitParam:'limit',
    // pageParam:'page',
    //将用户代理改为sql，通过websql来解决localstorage的5MB存储上限的问题
    type:'sql',
    database:'myDB',
    table:'bill',
},
//filters:[{property:"kind",value:"无"}],//过滤属性
listeners:{
    removerecords:function(){
      console.log("数据被删除");
    },
    addrecords:function(){
      console.log("数据被追加");
    },
    updaterecord:function(){
      console.log("数据被修改");
    },
}

Comme vous pouvez le voir, il utilise une méthode de surveillance des setters et des getters, tandis qu'Angular utilise la détection sale. . Lorsque nous disposons d'un proxy, ces méthodes de détection spécifiques peuvent être simplifiées pour une simple liaison de modèle de données.

【Recommandations associées : tutoriel vidéo javascript, front-end web】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!