Analyse der JavaScript-Funktionsbindungsnutzung

Dieser Artikel stellt hauptsächlich die Verwendung der JavaScript-Funktionsbindung vor und analysiert die Prinzipien, Implementierungsmethoden und zugehörigen Betriebstechniken der JavaScript-Funktionsbindung in Form von Beispielen. Ich hoffe, dass er allen helfen kann.

Perface

Wenn Sie aufgefordert werden, diese Seite und einige Vorgänge zu implementieren, z. B. das Klicken auf 1 , 2 , 3 usw. werden im Eingabetext angezeigt, und es gibt auch eine Löschfunktion. Beim Wählen ist uns das egal, es ist nur eine Simulation. Wenn ich gerade erst anfangen würde, würde ich Folgendes tun:

1. Verwenden Sie CSS und HTML, um die Schnittstelle zu gestalten.

2. Verwenden Sie die JavaScript-Ereignisdelegierung, um das Klickereignis des übergeordneten Elements der Schaltfläche zu überwachen Knoten

Aber was ist, wenn ich objektorientiertes Denken verwenden möchte? Ich habe es in Ext gemacht, daher würde ich sagen, dass es mir beim Einkapseln sehr geholfen hat. Vielleicht verstehen einige Leute, die Ext noch nie verwendet haben, den Code, den ich unten gepostet habe, nicht ganz, aber ich werde mein Bestes geben, um ihn klar zu erklären!

Beschreibung

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);
    }
  }
});

Hinweis: Tatsächlich können wir aus dem oben Gesagten erkennen, dass ContactTelPanel erbt Ext.Panel , und dann gibt es in diesem Panel viele Tasten, von denen jede auf Klickereignisse lauscht. Ich habe wirklich das Gefühl, dass ich hier nicht sehr gut bin. Ich sollte die Ereignisdelegation verwenden, um es zu implementieren, da jede Ihrer Schaltflächen auf das Klickereignis hört, was die Effizienz zu sehr beeinträchtigt. Mithilfe der Ereignisdelegierung können wir einfach das Klickereignis seines übergeordneten Knotens abhören und dann das Zielobjekt bestimmen und basierend auf dem Ereignisfluss agieren. Der Schwerpunkt dieses Artikels liegt immer noch im Code handler : this.press im Hörereignis. Das Problem, auf das ich gestoßen bin, ist, was passiert, wenn ich einige Attribute dieser ContactTelPanel-Klasse in der Press-Funktion verwenden muss?

Idee

Ich denke, dass ich die Attribute dieser Klasse in der Pressfunktion verwenden möchte. Ich verwende dieses Objekt direkt im Press . Verstehen Sie es einfach, aber ich habe mich geirrt. Wenn Sie beispielsweise console.dir(this) in der Chrome-Konsole sehen, wird leider ein Button-Objekt angezeigt, und dieser Zeiger hat sich geändert. Es war in der Tat etwas mühsam, und dann habe ich mir drei Methoden überlegt, wie folgt:

Lösung

1 Übergeben Sie jede Funktion, die lauscht zum Ereignis Beziehen Sie sich auf den

-Code : handler : this.press(this) und schreiben Sie dann alert(arguments[0])

in den Pressefunktionstext : Diese Seite wird tatsächlich geladen, aber sie wird nicht angezeigt, wenn Sie auf diese Schaltflächen klicken.

Grund: this.press(this), der Javascript-Parser ist auf diese Weise geschrieben behandelt es als Aufruf der Press-Funktion. Wenn Sie dann die Seite laden, führen Sie

2 aus und legen Sie die globale Variable in dieser ContactTelPanel-Klasse

Code fest: Zum Beispiel: set me = this in der fünften Zeile und dann in der Press-Funktion in den Text schreibenalert(me)

Was passiert: Es ist tatsächlich möglich, dass beim Klicken auf die Schaltfläche ein Fenster erscheint , und es gelingt

Nachteile: Verunreinigung der Gesamtsituation. Variablen können leicht unbeabsichtigt von anderen manipuliert werden. Wenn ich beispielsweise die js dieser Seite vorstelle und dann auf andere js verweise, setze ich in den nachfolgenden js var me = „monkindy“. Wenn Sie dann auf die Schaltfläche dieser Seite klicken, wird 123 angezeigt, was nicht der Fall ist ContactTelPanel-Objekt

3 Einfache Verwendung von Abschlüssen

Code:handler : function(){me.press(me)} Hinweis: me ist das ContactTelPanel-Objekt, da dieser Zeiger in der Funktion bereits ein Schaltflächenobjekt ist Es sollte in der Funktion „Verwende mich“ (oder einen anderen Variablennamen) sein, um dieses Objekt außerhalb zu speichern, also var me = this

Was passiert: Das ist natürlich erfolgreich

4 Verwenden Sie den Aufruf, um die Funktion zu implementieren. Bindung

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

Verwandte Empfehlungen:

Detaillierte Erläuterung der Javascript-Implementierung Funktionsbindung und Klassenereignisbindung in ES6 Definierte Funktionen

Schwierigkeiten in JavaScript: Detaillierte Erläuterung von Prototyp- und Konstruktorbindungsbeispielen

JavaScript-Funktionsbindung

Das obige ist der detaillierte Inhalt vonAnalyse der JavaScript-Funktionsbindungsnutzung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!