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

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

WBOY

リリース： 2016-05-16 17:42:30

オリジナル

1041 人が閲覧しました

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 イベントに初めて参加する読者同士のコミュニケーションに役立つことを願っています。