Dans Javasript, le proxy et le délégué apparaissent souvent.
Alors, dans quelles circonstances, cela utilise-t-il réellement? Quel est son principe?
Ici, nous présentons l'utilisation et les principes du délégué JavaScript, ainsi que l'interface du délégué dans des cadres tels que le dojo, jQuery, etc.
Proxy de l'événement JavaScript
Le proxyage des événements est une fonctionnalité très utile et intéressante dans le monde JS. Lorsque nous devons ajouter des événements à de nombreux éléments, nous pouvons déclencher la fonction de traitement en ajoutant des événements à leur nœud parent et en déléguant des événements au nœud parent.
Cela est principalement dû au mécanisme des bulles d'événements du navigateur. Donnons un exemple spécifique pour expliquer comment utiliser cette fonctionnalité.
Cet exemple est principalement tiré des articles connexes de David Walsh (comment fonctionne la délégation des événements JavaScript).
Supposons qu'il existe un nœud parent UL qui contient de nombreux enfants Li:
<ul id = "list"> <li id = "li-1"> li 1 </li> <li id = "li-2"> li 2 </li> <li id = "li-3"> li 3 </li> <li id = "li-4"> li 4 </li> <li id = "li-5"> li 5 </li> </ul>
Lorsque notre souris passe à Li, nous devons obtenir des informations pertinentes sur ce Li et flotter hors de la fenêtre flottante pour afficher des informations détaillées, ou lorsqu'un Li est cliqué, l'événement de traitement correspondant doit être déclenché.
Notre façon d'écrire habituelle est d'ajouter une surveillance des événements comme OnMouseOver ou OnClick à chaque LI.
fonction addListenersLi (limelement) {Liement.OnClick = function clickhandler () {// todo}; Liement.OnMouseOver = Function MouseOverHandler () {// TODO}} Window.onLoad = function () {var ulElement = document.getElementById ("list"); var lielements = ulelement.getElementByTagName ("li"); for (var i = lielements.length - 1; i> = 0; i--) {addListenersli (lielements [i]); }}Si les éléments enfants Li dans cet UL seront ajoutés ou supprimés fréquemment, nous devons appeler la méthode AddListenersli chaque fois que nous ajoutons Li pour ajouter des fonctions de traitement des événements pour chaque nœud Li.
Cela peut créer une complexité et une possibilité d'erreurs dans le processus d'addition ou de suppression.
La solution au problème consiste à utiliser le mécanisme de proxy de l'événement. Lorsque l'événement est jeté au nœud parent du niveau supérieur, nous jugeons et obtenons la source de l'événement Li en vérifiant l'objet cible de l'événement.
Le code suivant peut réaliser l'effet souhaité:
/ Obtenez le nœud parent et ajoutez un événement de clic au document informatique.getElementById ("liste"). AddEventListener ("cliquez", fonction (e) {// Vérifiez si la source de l'événement E.Targe est li if (e.target && e.target.nodename.touppercase == "li") {// // todid! }});Ajoutez un événement de clic au nœud parent. Lorsque le nœud enfant est cliqué, l'événement de clic bouillonnera vers le haut à partir du nœud enfant. Une fois que le nœud parent a attrapé l'événement, il détermine s'il s'agit du nœud que nous devons traiter en jugeant e.target.nodeName. Et le nœud Li cliqué a été obtenu via E.Target. Par conséquent, les informations correspondantes peuvent être obtenues et traitées.
Bulle d'événements et capture
Le mécanisme des bulles d'événements du navigateur, différents fabricants de navigateurs ont des mécanismes de traitement différents pour la capture et la manipulation des événements. Nous introduisons ici les événements standard définis par W3C pour DOM2.0.
Le modèle DOM2.0 divise le processus de traitement des événements en trois étapes:
1. Étape de capture d'événements,
2. Étape cible de l'événement,
3. La scène bouillonnante de l'événement.
Comme indiqué dans la figure ci-dessous:
Capture de l'événement: Lorsqu'un élément déclenche un événement (tel que ONClick), le document d'objet de niveau supérieur émettra un flux d'événement, s'écoulant vers le nœud de l'élément cible avec le nœud de l'arborescence DOM jusqu'à ce que l'élément cible où l'événement se produit soit réellement atteint. Dans ce processus, la fonction d'écoute correspondante de l'événement ne sera pas déclenchée.
Cible de l'événement: une fois l'élément cible atteint, la fonction de traitement correspondante de l'événement de l'élément cible est exécutée. S'il n'y a pas de fonction d'écoute liée, il ne sera pas exécuté.
Bulles d'événements: commencez par l'élément cible et propagez-vous à l'élément supérieur. Si un nœud lie la fonction de gestion des événements correspondante sur le chemin, ces fonctions seront déclenchées immédiatement. Si vous souhaitez empêcher l'événement de bouillonner, vous pouvez utiliser e.stoppropagation () (firefox) ou e.cancelbubble = true (c'est-à-dire) pour organiser la propagation de la bulle de l'événement.
Fonction de délégué dans jQuery et Dojo
Voyons comment utiliser les interfaces proxy d'événements fournies dans Dojo et JQuery.
jQuery:
$ ("# list"). Delegate ("li", "click", function () {// "$ (this)" est le nœud qui a cliqué sur console.log ("vous avez cliqué sur un lien!", $ (this));});La méthode du délégué jQuery nécessite trois paramètres, un sélecteur, un nom de temps et un gestionnaire d'événements.
La similitude de Dojo avec jQuery n'est que la différence dans les styles de programmation entre les deux:
require ("" dojo / query "," dojox / nodelist / delegate "], function (query, délégué) {query (" # list "). Delegate (" li "," onclick ", function (event) {//" this.node "est le nœud qui a cliqué sur console.log (" vous cliquez sur un lien! ", this);});Le module délégué de Dojo est dans Dojox.Nodelist, et l'interface fournie est la même que jQuery et les paramètres sont les mêmes.
Grâce à la délégation, vous pouvez apprécier les différents avantages de l'utilisation de la délégation des événements au développement:
1. Il y a moins de fonctions gérées. Il n'est pas nécessaire d'ajouter une fonction d'écoute pour chaque élément. Pour les éléments enfants similaires sous le même nœud parent, les événements peuvent être gérés via une fonction d'écoute déléguée à l'élément parent.
2. Il est facile d'ajouter et de modifier les éléments dynamiquement, et il n'est pas nécessaire de modifier la liaison des événements en raison des changements d'élément.
3. La corrélation entre les nœuds JavaScript et DOM est réduite, ce qui réduit la probabilité de fuites de mémoire causées par des références circulaires.
Utilisation du proxy dans la programmation JavaScript
Ce qui précède introduit l'utilisation du mécanisme de bulle du navigateur pour ajouter un proxy d'événements aux éléments DOM lors du traitement des événements DOM. En fait, dans la programmation Pure JS, nous pouvons également utiliser ce modèle de programmation pour créer des objets proxy pour faire fonctionner des objets cibles.
var delegate = function (client, clientMethod) {return function () {return clientMethod.Apply (client, arguments); }} var apple = function () {var _color = "red"; return {getColor: function () {console.log ("Color:" + _Color); }, setColor: fonction (couleur) {_color = couleur; }}; }; var a = new Apple (); var b = new Apple (); a.getColor (); A.SetColor ("vert"); a.getColor (); // Appel proxy var d = delegate (a, a.setColor); d ("bleu"); // Exécution proxy a.getColor (); //b.getColor ();Dans l'exemple ci-dessus, la modification de A est exploitée en appelant la fonction proxy D créée par la fonction degate ().
Bien que cette méthode utilise l'application (l'appel peut également être utilisé) pour transférer l'objet d'appel, il implémente la cachette de certains objets du mode de programmation, qui peut protéger ces objets contre les accessions et modifiés à volonté.
Le concept de délégué est référencé dans de nombreux cadres pour spécifier la portée de l'opération d'une méthode.
Les exemples typiques sont Dojo.Hitch (portée, méthode) et CreatedElegate (OBJ, Args) des extjs.
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.