Compréhension approfondie de la série JavaScript (31) : Explication détaillée du modèle de proxy des compétences de design patterns_javascript

Présentation

L'agent, comme son nom l'indique, consiste à aider les autres à faire des choses. GoF définit le modèle d'agence comme suit :

Le mode proxy (Proxy) fournit un proxy pour d'autres objets pour contrôler l'accès à cet objet.

Le modèle proxy permet aux objets proxy de contrôler les références à des objets spécifiques. Un proxy peut être presque n'importe quel objet : un fichier, une ressource, un objet en mémoire ou quelque chose de difficile à copier.

Texte

Donnons un exemple simple. Si Dudu veut envoyer des roses à la fille au yaourt, mais qu'il ne connaît pas ses coordonnées ou qu'il est gêné, et veut confier à un oncle l'envoi de ces roses, alors l'oncle sera un agent (en fait c'est plutôt bien), vous pouvez déduire quelques fleurs pour votre belle-fille), alors comment faire ?

Copier le code Le code est le suivant :

// Déclarez d'abord l'objet de beauté
var fille = fonction (nom) {
This.name = nom;
};

// C'est mec
var dudu = fonction (fille) {
This.girl = fille;
This.sendGift = fonction (cadeau) {
alert("Salut " girl.name ", dudu t'offre un cadeau : " gift);
>
};

//Oncle est un agent
var proxyTom = fonction (fille) {
This.girl = fille;
This.sendGift = fonction (cadeau) {
(new dudu(girl)).sendGift(gift); // Envoyer des fleurs à dudu
>
};

La méthode d'appel est très simple :

Copier le code Le code est le suivant :

var proxy = new proxyTom(new girl("Yoghurt Girl"));
proxy.sendGift("999 roses");

Combat pratique

Grâce au code ci-dessus, je pense que tout le monde est très clair sur le mode proxy. Pratiquons-le : nous avons une liste de lecture simple et devons afficher la musique de la vidéo sous le lien lorsque nous cliquons sur un seul lien (ou en sélectionnant tout). Bouton d'introduction et de lecture. Lorsque vous cliquez sur le bouton de lecture, la vidéo sera lue. La structure de la liste est la suivante :
.

Copier le code Le code est le suivant :

Vidéos de Dave Matthews

Sélectionner tout/sélection inverse

1. Gravedigger


2. Save Me
3. Crush


4. Ne buvez pas d'eau


5. Drôle comme c'est< ;/li>
   
6. Que diriez-vous
   

Analysons-le d'abord. Tout d'abord, nous devons non seulement surveiller l'événement de clic d'une connexion, mais également surveiller l'événement de clic de « tout sélectionner/sélection inverse ». Ensuite, demander au serveur d'interroger les informations vidéo, d'assembler les informations. Informations HTML et affichez-les à la dernière position de l'élément li, l'effet est le suivant :

.

Surveillez ensuite l'événement de clic de la connexion de lecture et commencez à jouer après avoir cliqué. L'effet est le suivant :

Bon, commençons, sans jQuery, personnalisons un sélecteur :

Copier le code Le code est le suivant :

var $ = fonction (id) {
Retourner document.getElementById(id);
};

Étant donné que le service json de Yahoo fournit des paramètres de rappel, nous transmettons notre rappel personnalisé pour accepter les données. Le code d'assemblage de chaîne de requête spécifique est le suivant :
.

Copier le code Le code est le suivant :

var http = {
MakeRequest : fonction (identifiants, rappel) {
      var url = 'http://query.yahooapis.com/v1/public/yql?q=',
sql = 'select * from music.video.id où ids IN ("%ID%")',
format = "format=json",
             handler = "callback=" rappel,
              script = document.createElement('script');

sql = sql.replace('%ID%', ids.join('","'));
               sql = encodeURIComponent(sql);

url = sql '&' format '&' gestionnaire;
               script.src = url;

document.body.appendChild(script);
>
};

Les objets proxy sont les suivants :

Copier le code Le code est le suivant :

var proxy = {
identifiants : [],
délai : 50,
Délai d'expiration : nul,
rappel : nul,
contexte : nul,
//Définissez l'identifiant de la requête et le rappel pour déclencher le rappel pendant la lecture
MakeRequest : fonction (id, rappel, contexte) {

// Ajouter à la file d'attente dd à la file d'attente
This.ids.push(id);

this.callback = rappel;
This.context = contexte;

// Définir le délai d'attente
Si (!this.timeout) {
This.timeout = setTimeout(function () {
                 proxy.flush();
             }, this.delay);
>
},
// Déclenchez la requête et appelez http.makeRequest
en utilisant la responsabilité proxy flush : fonction () {
// proxy.handler est le rappel
lors de la demande de Yahoo            http.makeRequest(this.ids, 'proxy.handler'
);                               // Après avoir demandé des données, exécutez la méthode proxy.handler (il existe un autre rappel défini)
                             
​​​​ //Effacer le délai d'attente et la file d'attente
This.timeout = null;
This.ids = [];

},
Gestionnaire : fonction (données) {
var je, max;

// Rappel pour une seule vidéo
Si (parseInt(data.query.count, 10) === 1) {
              proxy.callback.call(proxy.context, data.query.results.Video);
             revenir ;
>

// Rappels pour plusieurs vidéos
pour (i = 0, max = data.query.results.Video.length; i < max; i = 1) {
             proxy.callback.call(proxy.context, data.query.results.Video[i]);
>
>
};

Le module de traitement vidéo a principalement trois sous-fonctions : obtenir des informations, afficher des informations et lire des vidéos :

Copier le code Le code est le suivant :

var vidéos = {
    // 初始化播放器代码，开始播放
    getPlayer : fonction (id) {
        retourner ''
            ''
            ''
            ''
            ''
            '             'hauteur="255" '
            'largeur="400" '
            'id="uvp_fop" '
            'allowFullScreen="true" '
            'src="http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf" '
            'type="application/x-shockwave-flash" '
            'flashvars="id=v' id '&eID=1301797&lang=us&ympsc=4195329&enableFullScreen=1&shareEnable=1"'
            '/>'
            '';
                },
    // 拼接信息显示内容，然后在append到li的底部里显示
    updateList : fonction (données) {
        identifiant var,
            html = '',
            infos;

        if (data.query) {
            data = data.query.results.Video;
        >
        id = data.id;
        html = '';
        html = '

' data.title '

';
        html = '

' data.copyrightYear ', ' data.label '

';
        si (données.Album) {
            html = '

Album : ' data.Album.Release.title ', ' data.Album.Release.releaseYear '
';
        >
        html = '

» jouer

';
        info = document.createElement('div');
        info.id = "info" id;
        info.innerHTML = html;
        $('v' id).appendChild(info);
    },
    // 获取信息并显示
    getInfo : fonction (id) {
        var info = $('info' id);

        si (!info) {
            proxy.makeRequest(id, videos.updateList, vidéos); //执行代理职责，并传入videos.updateList回调函数
            revenir ;
        >

if (info.style.display === "aucun") {
                   info.style.display = '';
         } autre {
                  info.style.display = 'none';
>
>
};

Nous pouvons maintenant traiter le code des événements de clic. Comme il existe de nombreuses connexions A, si chaque connexion lie un événement, il y aura évidemment des problèmes de performances, nous lions donc l'événement à l'élément

le clic est une connexion, si c'est le cas, cela signifie qu'on clique sur l'adresse de la vidéo, et ensuite on peut la lire :
Copier le code Le code est le suivant :

$('vids').onclick = fonction (e) {
var src, identifiant;

e = e || fenêtre.événement;
src = e.cible || e.srcElement;

// S'il n'est pas connecté, le processus ne continuera pas
Si (src.nodeName.toUpperCase() !== "A") {
         revenir ;
>
//Arrête de bouillonner
If (typeof e.preventDefault === "function") {
         e.preventDefault();
>
e.returnValue = false;

id = src.href.split('--')[1];

//Si vous cliquez sur le lien de lecture de la zone d'information vidéo qui a été produite, commencez la lecture
// Alors le retour ne continue pas
Si (src.className === "play") {
src.parentNode.innerHTML = videos.getPlayer(id);
         revenir ;
>
                             
src.parentNode.id = "v" id;
Videos.getInfo(id); // Il s'agit du code de traitement permettant d'afficher les informations vidéo lorsque vous cliquez pour la première fois
};


Les codes pour tout sélectionner et inverser la sélection sont similaires, nous ne les expliquerons donc pas :

Copier le code Le code est le suivant :

$('toggle-all').onclick = fonction (e) {

var hrefs, i, max, id;

hrefs = $('vids').getElementsByTagName('a');
pour (i = 0, max = hrefs.length; i < max; i = 1) {
​​​​ //Ignorer la connexion de jeu
Si (hrefs[i].className === "play") {
                 continuer ;
>
​​​​ //Ignorer les éléments non sélectionnés
Si (!hrefs[i].parentNode.firstChild.checked) {
                 continuer ;
>

id = hrefs[i].href.split('--')[1];
hrefs[i].parentNode.id = "v" id;
vidéos.getInfo(id);
>
};


Résumé

Le mode proxy est généralement adapté aux situations suivantes :

1. Le proxy distant consiste à fournir une représentation locale d'un objet dans différents espaces d'adressage. Cela peut masquer le fait qu'un objet existe dans différents espaces d'adressage, tout comme la classe proxy dans le service Web.
2. Proxy virtuel, créez des objets coûteux selon vos besoins et utilisez-le pour stocker des objets réels dont l'instanciation prend beaucoup de temps. Par exemple, lorsque le navigateur effectue le rendu, le problème sera affiché en premier et l'image peut s'afficher lentement (c'est à dire). c'est-à-dire, via le proxy virtuel Au lieu de l'image réelle, l'agent virtuel enregistre le chemin et la taille de l'image réelle
. 3. Le proxy de sécurité est utilisé pour contrôler les autorisations lors de l'accès à des objets réels. Il est généralement utilisé pour les objets qui doivent avoir des autorisations d'accès différentes.
4. Guidage intelligent, ce n'est que lorsque l'objet réel est appelé que l'agent gère d'autres choses. Par exemple, dans le garbage collection en C#, lorsqu'un objet est utilisé, il y aura un décompte de références. Si l'objet n'est plus référencé, le GC peut le recycler.

Référence : "Modèle de conception Dahua"