Was sind die Regeln für die Ereignisbehandlung in der Webentwicklung?

Dieses Mal werde ich Ihnen die Regeln für die Ereignisbehandlung in der Webentwicklung und die Vorsichtsmaßnahmen für die Ereignisbehandlung in der Webentwicklung vorstellen. Das Folgende ist ein praktischer Fall. Werfen wir einen Blick darauf.

Ereignisverarbeitung

Wir wissen, dass das Ereignis--Objekt (Ereignisobjekt) beispielsweise als Rückrufparameter an den Ereignishandler übergeben wird :

// 不好的写法function handleClick(event) {  var pop = 
document
.getElementById('popup');
  popup.style.left = event.clientX + 'px';
  popup.style.top = event.clientY + 'px';
  popup.className = 'reveal';
}// 你应该明白addListener函数的意思addListener(element, 'click', handleClick);

Dieser Code verwendet nur zwei Attribute des Ereignisobjekts: clientX und clientY. Verwenden Sie diese beiden Attribute, um das Element zu positionieren, bevor es auf der Seite angezeigt wird. Obwohl dieser Code sehr einfach aussieht und keine Probleme aufweist, ist er eigentlich eine schlechte Art, ihn zu schreiben, da dieser Ansatz seine Grenzen hat.

Regel 1: Anwendungslogik isolieren

Das erste Problem mit dem obigen Beispielcode besteht darin, dass der Ereignishandler Anwendungslogik enthält. Anwendungslogik ist funktionaler Code, der sich auf die Anwendung bezieht, nicht auf das Benutzerverhalten. Die Anwendungslogik im obigen Beispielcode besteht darin, ein Popup-Fenster an einer bestimmten Stelle anzuzeigen. Obwohl diese Interaktion stattfinden sollte, wenn der Benutzer auf ein bestimmtes Element klickt, ist dies nicht immer der Fall.

Es ist eine bewährte Vorgehensweise, die Anwendungslogik von allen Event-Handlern zu trennen, da Sie nie wissen, wann dieselbe Logik an anderer Stelle ausgelöst wird. Manchmal müssen Sie beispielsweise festlegen, ob ein Popup-Fenster angezeigt werden soll, wenn der Benutzer die Maus über ein Element bewegt, oder ob beim Drücken einer bestimmten Taste auf der Tastatur die gleiche logische Entscheidung getroffen werden soll. Auf diese Weise führen mehrere Event-Handler dieselbe Logik aus, Ihr Code wird jedoch versehentlich mehrmals kopiert.

Ein weiterer Nachteil der Platzierung von Anwendungslogik in Event-Handlern hängt mit dem Testen zusammen. Beim Testen müssen Sie den Funktionscode direkt auslösen, anstatt einen Klick auf das Element zu simulieren. Wenn Ihre Anwendungslogik in einem Ereignishandler platziert ist, besteht die einzige Möglichkeit, sie zu testen, darin, das Ereignis auszulösen. Obwohl einige Test-Frameworks auslösende Ereignisse simulieren können, ist dies in der Praxis nicht der beste Testansatz. Funktionscode lässt sich am besten mit einem einzigen Funktionsaufruf aufrufen.

Sie müssen Anwendungslogik und Ereignisverarbeitungscode immer trennen. Wenn Sie den vorherigen Beispielcode umgestalten möchten, besteht der erste Schritt darin, den Code, der die Popup-Box-Logik verarbeitet, in eine separate Funktion einzufügen. Diese Funktion wird wahrscheinlich auf einem für die Anwendung definierten globalen Objekt bereitgestellt. Der Event-Handler sollte sich immer im selben globalen Objekt befinden, daher gibt es zwei Methoden.

// 好的写法 - 拆分应用逻辑var MyApplication = {  handleClick: function (event) {    this.showPopup(event);
  },  showPopup: function (event) {    var pop = document.getElementById('popup');
    popup.style.left = event.clientX + 'px';
    popup.style.top = event.clientY + 'px';
    popup.className = 'reveal';
  }
};
addListener(element, 'click', function (event) {
  MyApplication.handleClick(event);
});

Die gesamte Anwendungslogik, die zuvor in Event-Handlern enthalten war, wird jetzt in die Methode MyApplication.showPopup() verschoben. Jetzt führt die MyApplication.handleClick()-Methode nur noch eine Aufgabe aus, nämlich den Aufruf von MyApplication.showPopup(). Wenn die Anwendungslogik entfernt wird, können Aufrufe desselben Funktionscodes an mehreren Stellen erfolgen, und es besteht keine Notwendigkeit, sich auf die Auslösung eines bestimmten Ereignisses zu verlassen, was offensichtlich praktischer ist. Dies ist jedoch nur der erste Schritt zur Aufschlüsselung des Event-Handler-Codes.

Regel 2: Ereignisobjekte nicht verteilen

Nach dem Entfernen der Anwendungslogik besteht im obigen Beispielcode immer noch ein Problem, d. h. Ereignisobjekte werden unkontrolliert verteilt. Es übergibt MyApplication.handleClick() vom anonymen Ereignishandler, der es dann an MyApplication.showPopup() weitergibt. Wie oben erwähnt, enthält das Ereignisobjekt viele zusätzliche Informationen zum Ereignis, und dieser Code verwendet nur zwei davon. Die Anwendungslogik sollte sich aus folgenden Gründen nicht darauf verlassen, dass das Ereignisobjekt die Funktion ordnungsgemäß ausführt: Die

-Methodenschnittstelle gibt nicht an, welche Daten erforderlich sind. Eine gute API muss hinsichtlich Erwartungen und Abhängigkeiten transparent sein. Wenn Sie ein Ereignisobjekt als Parameter übergeben, erfahren Sie nicht, welche Eigenschaften des Ereignisses nützlich sind und wofür sie verwendet werden.

Wenn Sie diese Methode testen möchten, müssen Sie daher ein Ereignisobjekt neu erstellen und übergeben als Parameter eingeben. Daher müssen Sie genau wissen, welche Informationen diese Methode verwendet, damit Sie den Testcode korrekt schreiben können.

Diese Probleme (bezogen auf unklares Schnittstellenformat und selbst erstellte Ereignisobjekte zum Testen) sind in großen Webanwendungen nicht ratsam. Unklarheit im Code kann zu Fehlern führen.

Der beste Weg besteht darin, den Ereignishandler das Ereignisobjekt verwenden zu lassen, um das Ereignis zu verarbeiten, und dann alle erforderlichen Daten abzurufen und an die Anwendungslogik zu übergeben. Beispielsweise erfordert die Methode MyApplication.showPopup() nur zwei Datenelemente, die x-Koordinate und die y-Koordinate. Auf diese Weise werden wir die Methode so umschreiben, dass sie diese beiden Parameter erhält.

// 好的写法var MyApplication = {  handleClick: function (event) {    this.showPopup(event.clientX, event.clientY);
  },  showPopup: function (x, y) {    var pop = document.getElementById('popup');
    popup.style.left = x + 'px';
    popup.style.top = y + 'px';
    popup.className = 'reveal';
  }
};
addListener(element, 'click', function (event) {
  MyApplication.handleClick(event);
});

在这段新重写的代码中，MyApplication.handleClick()将x坐标和y坐标传入了MyApplication.showPopup()，代替了之前传入的事件对象。可以很清晰地看到MyApplication.showPopup()所期望传入的参数，并且在测试或代码的任意位置都可以很轻易地直接调用这段逻辑，比如：

// 这样调用非常棒MyApplication.showPopup(10, 10);

当处理事件时，最好让事件处理程序成为接触到event对象的唯一的函数。事件处理程序应当在进入应用逻辑之前针对event对象执行任何必要的操作，包括阻止默认事件或阻止事件冒泡，都应当直接包含在事件处理程序中。比如：

// 好的写法var MyApplication = {  handleClick: function (event) {    // 假设事件支持DOM Level2
    event.preventDefault();
    event.stopPropagation();    // 传入应用逻辑
    this.showPopup(event.clientX, event.clientY);
  },  showPopup: function (x, y) {    var pop = document.getElementById('popup');
    popup.style.left = x + 'px';
    popup.style.top = y + 'px';
    popup.className = 'reveal';
  }
};
addListener(element, 'click', function (event) {
  MyApplication.handleClick(event);
});

在这段代码中，MyApplication.handleClick()是事件处理程序，因此它在将数据传入应用逻辑之前调用了event.preventDefault()和event.stopPropagation()，这清除地展示了事件处理程序和应用逻辑之间的分工。因为应用逻辑不需要对event产生依赖，进而在很多地方都可以轻松地使用相同的业务逻辑，包括写测试代码。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样利用JS做出引用传递与值传递

如何做出node.js界面

Das obige ist der detaillierte Inhalt vonWas sind die Regeln für die Ereignisbehandlung in der Webentwicklung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!