JavaScript_javascript スキルにおけるカスタム イベントの使用状況の分析

この記事の例では、JavaScript でのカスタム イベントの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

Webフロントエンド開発ではjsのカスタムイベントを利用しない人も多いかもしれませんが、比較的大規模なプロジェクトを行う場合、特に複数人で共同開発する場合にはカスタムイベントは非常に重要です。では、js のカスタム イベントとは何でしょうか?まず例を見てみましょう:
フロントエンド開発者 A は関数をカプセル化します:

コードをコピー コードは次のとおりです。

function move(){
alert(a); //これは N 行のコードを表します
}

しばらくすると、フロントエンド開発者 B は A に基づいてこの関数を強化するため、次のように書きます:

コードをコピー コードは次のとおりです。

function move(){
alert(a); //これは N 行のコードを表します
alert(b); //これは N 行のコードを表します
}

問題は見つかりましたか? B は、A の変数や関数などの名前付けや競合の問題に注意する必要があります。しばらくすると、フロントエンド開発者 C もこの関数を強化します。

コードをコピー コードは次のとおりです。

function move(){
alert(a); //これは N 行のコードを表します
alert(b); //これは N 行のコードを表します
alert(c); //これは N 行のコードを表します
}

この時点では非常にイライラするでしょうし、C でコードを書くのは簡単ではないと確信しています。この問題を解決する方法は、次のようなカスタム イベントを相互に影響を与えずに要素に追加できることです。

コードをコピー コードは次のとおりです:

window.addEventListener('click',function(){

アラート(1);
} ,false);
window.addEventListener('click',function(){
アラート(2);
} ,false);

ページをクリックすると、1 と 2 の両方がポップアップ表示され、このメソッドを使用して関数を定義できます:

コードをコピーします コードは次のとおりです:

window.addEventListener('move',function(){

アラート(3);
} ,false);
window.addEventListener('move',function(){
アラート(4);
} ,false);

このように、move(); を実行すると、3 と 4 が表示されます。ここでの move はカスタム イベントであり、実際には関数
です。 イベント ハンドラーにパラメータを渡す方法を見てみましょう:

コードをコピーします コードは次のとおりです:

//パラメータを持つ関数をパラメータのない関数にカプセル化します

function createFunction(obj, strFunc) {
var args = [] //イベントハンドラーに渡されるパラメータを格納するためのargsを定義します
If (!obj) obj = window; // グローバル関数の場合、obj=window; //イベントハンドラーに渡されるパラメータを取得します
for (var i = 2; i // パラメーターのない関数を使用して、イベント ハンドラーの呼び出しをカプセル化します
戻り関数() {
obj[strFunc].apply(obj, args) // 指定されたイベント ハンドラーにパラメータを渡します
}
}
関数 class1() {
}
class1.prototype = {
show: function() {
This.onShow();
}、
onShow: function() { }
}
function objOnShow(userName) {
alert("こんにちは、" ユーザー名);
}
関数 test() {
var obj = new class1();
var userName = "テスト";
obj.onShow = createFunction(null, "objOnShow", userName);
Obj.show();
}

「イベントメカニズムはパラメーター情報を持たずに関数の名前だけを渡すため、パラメーターを渡すことはできません。」 「この問題を解決するには、逆の考え方をすることができます。いいえ。」パラメータを渡す方法を考えますが、パラメータを持たないイベント ハンドラを構築する方法を考えてください。このプログラムはパラメータ付きのイベント ハンドラをベースに作成されており、「ここでの「プログラム」は createFunction. 関数を巧みに使用しています。 apply 関数は、パラメーターを持つ関数をパラメーターのない関数にカプセル化します。最後に、カスタム イベントの複数のバインディングを実装する方法を見てみましょう:

コードをコピー コードは次のとおりです:

// カスタム イベントが複数のバインディングをサポートするようにします
//パラメータ付き関数をパラメータなし関数にカプセル化します
function createFunction(obj, strFunc) {
var args = [] //イベントハンドラーに渡されるパラメータを格納するためのargsを定義します
If (!obj) obj = window; // グローバル関数の場合、obj=window; //イベントハンドラーに渡されるパラメータを取得します
for (var i = 2; i // パラメーターのない関数を使用して、イベント ハンドラーの呼び出しをカプセル化します
戻り関数() {
obj[strFunc].apply(obj, args) // 指定されたイベント ハンドラーにパラメータを渡します
}
}
関数 class1() {
}
class1.prototype = {
show: function() {
if (this.onShow) {
for (var i = 0; i < this.onShow.length; i ) {
This.onShow[i]();
}
}
}、
attachOnShow: function(_eHandler) {
If (!this.onShow) { this.onShow = [] }
This.onShow.push(_eHandler);
}
}
function objOnShow(userName) {
alert("こんにちは、" ユーザー名);
}
function objOnShow2(testName) {
alert("show:" テスト名);
}
関数 test() {
var obj = new class1();
var userName = "あなたの名前";
Obj.attachOnShow(createFunction(null, "objOnShow", userName));
Obj.attachOnShow(createFunction(null, "objOnShow2", "テストメッセージ"));
Obj.show();
}

AttachOnShow メソッドの基本的な考え方は、配列をプッシュすることであることがわかります。実際、以下でイベント処理関数を個別に実装することもできます。

コードをコピー コードは次のとおりです:

//パラメータを持つ関数をパラメータのない関数にカプセル化します
function createFunction(obj, strFunc) {
var args = [] //イベントハンドラーに渡されるパラメータを格納するためのargsを定義します
If (!obj) obj = window; // グローバル関数の場合、obj=window; //イベントハンドラーに渡されるパラメータを取得します
for (var i = 2; i // パラメーターのない関数を使用して、イベント ハンドラーの呼び出しをカプセル化します
戻り関数() {
obj[strFunc].apply(obj, args) // 指定されたイベント ハンドラーにパラメータを渡します
}
}
関数 class1() {
}
class1.prototype = {
show: function() {
if (this.onShow) {
for (var i = 0; i < this.onShow.length; i ) {
This.onShow[i]();
}
}
}、
attachOnShow: function(_eHandler) { // イベントをアタッチ
If (!this.onShow) { this.onShow = [] }
This.onShow.push(_eHandler);
}、
detachOnShow: function(_eHandler) { // イベントを削除します
If (!this.onShow) { this.onShow = [] }
This.onShow.pop(_eHandler);
}
}
関数 objOnShow(userName) {

alert("こんにちは、" ユーザー名);
}
function objOnShow2(testName) {
alert("show:" テスト名);
}
関数 test() {
var obj = new class1();
var userName = "あなたの名前";
Obj.attachOnShow(createFunction(null, "objOnShow", userName));
Obj.attachOnShow(createFunction(null, "objOnShow2", "テストメッセージ"));
Obj.show();
obj.detachOnShow(createFunction(null, "objOnShow", userName));
Obj.show(); // 1 つを削除し、残りの 1 つを表示します
obj.detachOnShow(createFunction(null, "objOnShow2", "テストメッセージ"));
Obj.show(); // 両方を削除し、どちらも表示しません
}

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。