JSカスタムイベントの概要とイベントインタラクションの原則(2)_JavaScriptスキル

js カスタム イベント (1) の目的は、カスタム イベントがどのようにシミュレートされるかを誰もが簡単に理解できるようにすることです。次のような多くの欠陥があることは容易にわかります。
1. このイベント オブジェクトは 1 つしか登録できません。複数のイベントを提供します
2. 登録メソッドが一部の情報を返しません

以下でこれらの問題を解決しましょう。以下は MyEvent.js のソース コードです:

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

function MyEvent() {
this.handlers={};
}
MyEvent.prototype={
addHandler:function(type,handler)
{
if(typeof this.handlers[タイプ] == "未定義")
{
this.handlers[タイプ]=[];
}
this.handlers[タイプ].push(handler); >},
fire:function(event)
{if(this.handlers[event.type] 配列のインスタンス)
{
var handlers=this.handlers[event.type]; >for(var i= 0, len=handlers.length;i{
handlers[i](event)
}
}
}; >removeHandler:function(type , handler)
{
if(this.handlers[type] 配列のインスタンス)
{
var handlers=this.handlers[type]
for(var) i= 0, len= handlers.length;i{
if(handlers[i]===handler)
{
break;
handlers.splice(i,1);
}
}
このタイプは最初の記事の最適化です。
属性ハンドラーはハンドラーになり、配列になります。
addHandler() メソッドは、イベント タイプとイベントの処理に使用される関数という 2 つのパラメーターを受け取ります。このメソッドが呼び出されると、ハンドラー属性にこのイベント タイプの配列
がすでに存在するかどうかがチェックされ、存在しない場合は新しい配列が作成されます。次に、push() を使用して、そのハンドラーを配列の末尾に追加します。

fire() メソッドは、イベントをトリガーするために使用されます。このメソッドは、少なくとも type 属性を含むオブジェクトであるパラメーターを受け取ります。それ以外の場合は、ハンドラーが既に存在するかどうかを判断できません。このタイプを使用して、イベント タイプに対応する一連のハンドラーを検索し、各関数を呼び出し、イベント オブジェクトを与えます。これらはカスタム オブジェクトであるため、イベント オブジェクトの他の内容をユーザーが定義できます。

removeHandler() メソッドは、addHandler() の補助です。イベントのタイプとイベント ハンドラーという同じパラメータを受け入れます。このメソッドは、イベント ハンドラーの配列を検索して、削除するハンドラーの場所を見つけます。見つかった場合は、break 演算子を使用してループを終了します。次に、項目は splice() メソッドを使用して配列から削除されます。

ここでの使用法を、より長く使用されている形式に変更しましょう。私の知る限り、多くの製品にはイベントを使用する 2 つの方法があります。1 つは直接継承です (この地域ではこの概念はありません)。プロトタイプ チェーン (ここでは詳しく説明しません) を介して継承の効果をシミュレートすることで、このイベント オブジェクトはこれらの動作を行うことができますが、この方法はより限定的であり、次の方法を使用してクラス上に作成する方法がより一般的です。このオブジェクトを保持するプロパティ。例: 同じディレクトリに Student.js ファイルを作成します。内部のコードは次のとおりです:




コードをコピー


コード

関数 Student(name) { this.myEvent=new MyEvent(); this.name=name; Student.prototype={ setName:function(name) {

var eventsStart={

type:"changeNameStart",
newName:name,
oldName:this.name
};
this.myEvent.fire(eventStart);
this.name=name;
}
} ここに学生クラスがあり、 MyEvent オブジェクトはコンストラクターで Attribute として初期化され、パラメーターを通じて name 属性を初期化します。

名前を変更するメソッド setName を提供しますが、名前を変更する前に、イベントchangeNameStartをトリガーする可能性のあるリスナーが設定されます。
HTML ページを作成し、同じディレクトリに配置します。 コードは次のとおりです。




コードをコピーします


は次のとおりです:

;/html>


これは非常に便利で、一般的な使用方法でもあります。
通常、実際のプロジェクトでイベントを使用する場合は、次のような最適化を行う必要があります。
1. コードからは、どのようなイベントもハンドラーに追加できるように見えます。 . ですが、実際に影響を与えるイベント (fire() メソッドを設定する場所) はコードからは直感的にわかりません。通常、製品を作成する場合は、この点を考慮する必要があります。

2. Daxing プロジェクトでは、イベントを Fire プレイスで使用する方が便利であることがわかりました。さまざまな種類のイベントが存在する可能性があり、その場合、火の中でいくつかの判断が行われる可能性があります。
js イベントに初めて参加する読者同士のコミュニケーションに役立つことを願っています。