Analyse de l'utilisation des liaisons de fonctions JavaScript

Cet article présente principalement l'utilisation de la liaison de fonctions JavaScript et analyse les principes, les méthodes de mise en œuvre et les techniques de fonctionnement associées de la liaison de fonctions JavaScript sous forme d'exemples. J'espère que cela pourra aider tout le monde.

Perface

Si on vous demande d'implémenter cette page et certaines opérations, comme cliquer sur 1 , 2 , 3, etc. sont affichés dans le texte de saisie, et il existe également une fonction de suppression. Nous ne nous en soucions pas lors de la numérotation, c'est juste une simulation. Si je débutais, je ferais ceci :

1. Utilisez CSS et HTML pour mettre en page l'interface

2. Utilisez la délégation d'événement JavaScript pour surveiller l'événement de clic du nœud parent de. le bouton

Mais que se passe-t-il si je souhaite utiliser la pensée orientée objet ? Je l'ai fait dans Ext, donc je dirais que cela m'a beaucoup aidé à encapsuler. Peut-être que certaines personnes qui n'ont jamais utilisé Ext ne comprennent pas le code que j'ai posté ci-dessous, mais je ferai de mon mieux pour l'expliquer clairement !

Description

ContactTelPanel =Ext.extend(Ext.Panel, {
  //构造方法
  constructor : function(config) {
    Ext.apply(this, config);//直接把config对象的属性全复制到this对象中
    Parent = this.parent;
    var me = this;
    ContactTelPanel.superclass.constructor.call(this, {//用ContactTelPanel的父类也就是Ext.Panel的构造函数
      autoScroll : true,
      title : "拨打电话",//设置title，跟这篇文章的主体没关系，不要管他
      id : "contacttelpanel",
      bodyStyle : "padding: 30px 300px;",
      defaults : {//可以为该对象(ContactTelPanel)包含的组件(也就是在items配置选项)设置一些相同属性
        layout : "column",
        defaults : {
          xtype : "button",
          width : 50,
          height : 25,
          style : "margin:4px 15px",
          handler : this.press //为每个按钮都添加一个click的事件
        },
        bodyBorder : false
      },
      items : [ {//textfield组件
        height : 30,
        width : 250,
        xtype : "textfield",
        id : "tf",
        style : "margin-bottom:10px"
      }, {// 没有xtype就是默认为panel，下面也是，不然就不要纠结了，直接在这里想象成第一行按钮1、按钮2、按钮3
        items : [ {
          text : "1"
        }, {
          text : "2"
        }, {
          text : "3"
        } ]
      }, {// 这里是按钮4、按钮5、按钮6
        items : [ {
          text : "4"
        }, {
          text : "5"
        }, {
          text : "6"
        } ]
      }, {// 这里是按钮7、按钮8、按钮9 下同
        items : [ {
          text : "7"
        }, {
          text : "8"
        }, {
          text : "9"
        } ]
      }, {
        items : [ {
          text : "*"
        }, {
          text : "0"
        }, {
          text : "#"
        } ]
      }, {
        items : [ {
          text : "拨打",
        }, {
          text : "删除",
        } ]
      } ]
    });
  },
  press : function() {
    var text = this.text, textfield = Ext.getDom("tf");
    if (/[0-9*#]/.test(text)) {//在textfield中显示所点击按钮的数字
      textfield.value += text;
    } else if (this.text == "删除") {//删除功能
      textfield.value = textfield.value.slice(0, -1);
    } else if (this.text == "拨打") {//这个先不要管他
      Tel.telcall(textfield.value);
    }
  }
});

Remarque : En fait, nous pouvons savoir d'après ce qui précède que ContactTelPanel hérite de Ext.Panel , puis il y a de nombreuses clés dans ce panneau, dont chacune écoute les événements de clic. J'ai vraiment l'impression que je ne fais pas du très bon travail ici. Je devrais utiliser la délégation d'événement pour l'implémenter, car chacun de vos boutons écoute l'événement de clic, ce qui affecte trop l'efficacité. Grâce à la délégation d'événements, nous pouvons simplement écouter l'événement de clic de son nœud parent, puis déterminer l'objet cible et opérer en fonction du flux d'événements. L'objectif de cet article est toujours dans le code handler : this.press dans l'événement d'écoute. Le problème que j'ai rencontré est le suivant : que se passe-t-il si je dois utiliser certains attributs de cette classe ContactTelPanel dans la fonction de presse ?

Idée

Je pense que je souhaite utiliser les attributs de cette classe dans la fonction presse J'utilise cet objet directement dans la presse. . Comprenez-le, mais j'avais tort. Par exemple, si vous voyez console.dir(this) dans la fonction de presse, ce qui apparaît sur la console Chrome, malheureusement, ce qui apparaît est un objet Button, et son pointeur this a changé ? C'était effectivement un peu gênant, et puis j'ai pensé à trois méthodes, comme suit :

Solution

1 Passer dans chaque fonction qui écoute à l'événement Référez-vous au

code : handler : this.press(this), puis écrivez alert(arguments[0])

dans le corps de la fonction presse Que se passe-t-il. : Cette page est effectivement chargée. La fenêtre pop-up est ContactTelPanel, mais elle n'apparaît pas lorsque vous cliquez sur ces boutons

Raison : this.press(this), l'analyseur javascript écrit de cette manière. le traitera comme appelant la fonction de presse. Ensuite, lorsque vous chargez la page, exécutez

2 et définissez la variable globale dans cette classe ContactTelPanel

Code  : Par exemple, set me = this sur la cinquième ligne, puis dans la fonction presse Écrivez dans le corps alert(me)

Que se passe-t-il : Il est vrai que la fenêtre apparaît lorsque l'on clique sur le bouton , et cela réussit

Inconvénients : pollue la situation globale. Les variables sont facilement falsifiées par d'autres involontairement. Par exemple, lorsque j'introduis le js de cette page et que je fais ensuite référence à d'autres js, je définis var me = "monkindy" dans le js suivant. Ensuite, lorsque vous cliquez sur le bouton de cette page, il apparaîtra 123, ce qui n'est pas un. Objet ContactTelPanel

3 Utilisation simple des fermetures

Code:handler : function(){me.press(me)} Remarque : moi est l'objet ContactTelPanel, car ce pointeur en fonction est déjà un objet bouton, donc il devrait être en fonction Utilisez-moi (ou un autre nom de variable) pour enregistrer cet objet à l'extérieur, c'est-à-dire var me = this

Que se passe-t-il : C'est bien sûr réussi

4 Utilisez l'appel pour implémenter la fonction Binding

Code : handler : function(){ me.press.call(this,me);}

Recommandations associées :

Explication détaillée de l'implémentation de javascript Liaison de fonction et liaison d'événement de classe dans ES6 Fonctions définies

Difficultés en JavaScript : explication détaillée des exemples de liaison de prototype et de constructeur

Liaison de fonction JavaScript

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!