Beispiele zur Erläuterung der Verwendung der JavaScript-Funktionsbindung

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. Das interessiert uns zunächst nicht, 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 Knotens zu überwachen der Knopf

Aber was ist, wenn ich objektorientiertes Denken nutzen 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, aber ich werde versuchen, 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 Ereignisdelegation 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 erscheint nicht, 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 schreiben alert(me)

Was passiert: Es ist wahr, dass das Fenster erscheint, wenn auf die Schaltfläche geklickt wird , und es gelingt

Nachteile: verunreinigt die 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);}

Ich persönlich denke : Dies sollte am nützlichsten sein

Anderer: Der vorherige Artikel, eine detaillierte Erklärung der JavaScript-Funktionsbindung, stellte die auf reinem JS basierende Funktionsbindungstechnologie vor. Interessierte Leser können die Ähnlichkeiten und Unterschiede zwischen den beiden vergleichen.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung von Funktionsbindungscode für die Javascript-Interaktion

js verwendet Funktionsbindungstechnologie, um Ereignisse zu ändern Handler Scope_Javascript-Kenntnisse

Detaillierte Erläuterung der JavaScript-Funktionsbindung_Grundkenntnisse

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung der Verwendung der JavaScript-Funktionsbindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!