イベント設計モード
4718 ワード
1.イベント設計の概要
イベントのメカニズムは、プログラムロジックがより明確に見えることができます.JavaScriptでは、多くのオブジェクトが自分のイベントを持っています.私たちが自分でデザインしたクラスに対しても、事件のメカニズムがありますか?答えは肯定的です.イベント機構を通して、クラスを独立したモジュールとして設計することができ、イベントを通じて外部との通信が可能になり、プログラムの開発効率が向上します.
2.パラメータなしのイベント設計モード
最も簡単なモードは、クラスの方法メンバーをイベントとして定義し、JavaScriptの基本文法を利用して実現することができ、通常は空の方法である.たとえば:
このデザインは応用が簡単ですが、以下の欠点があります.
イベントハンドラにパラメータを渡すことができません.私たちはショー()という内部方法でイベントハンドラを呼び出すので、外部のパラメータが分かりません.
各イベントインターフェースは一つのイベントハンドラしか結合できないが、内部方法は、atachEventまたはaddEvent Listener方法を使用して複数の処理プログラムをバインドすることができる.
3.イベントハンドラにパラメータを渡す
イベントハンドラにパラメータを送るのは、カスタマイズイベントに存在する問題だけではなく、システム内部のオブジェクトのイベントメカニズムに存在する問題でもあります.イベントメカニズムは関数名のみを伝達し、パラメータ情報を持たないので、パラメータを渡すことができません.たとえば:
function User(){
)
User.prototype={
ショー:function(){
this.onshow()//トリガonshow事件
}
on Show:function()//定義イベントインターフェース
)
var obj=new User();
//objを作成するonshowイベントハンドラ
function objOnShow(userName){
alert("hello"+userName);
)
//username変数を定義する
var userName="plkong"
//objと結びつけられたonshowイベント
Obj.onShow=ObjOnShow;/userNameという変数を転送できませんでした.
obj.show()
上記のプログラムはパラメータを伝達できません.この問題を解決するために、反対の考え方から問題を考えることができます.パラメータをどうやって渡すかを考えずに、パラメータなしのイベントハンドラをどうやって構築するかを考えます.まず以下の関数を見てみましょう.
例えば、イベントハンドラ
someObject.eventHandler=function(_arg 1,u arg 2){
//イベントハンドリングコード
)
コールすべき:creat Funct(someObject、「eventHander」、arg 1、arg 2);
このように、パラメータなしの関数を返します.戻りの関数には、転送されたパラメータが含まれています.グローバル関数がイベントハンドラとして機能すると、実はwindowオブジェクトの一つの方法なので、windowオブジェクトをObjパラメータとして伝えることができます.もっと明確にするために、Objをnullとして指定することもできます.creat Function関数の内部では、自動的にこの関数が大域関数として認識されます.最後に完了したコードは以下の通りです.
イベントのメカニズムは、プログラムロジックがより明確に見えることができます.JavaScriptでは、多くのオブジェクトが自分のイベントを持っています.私たちが自分でデザインしたクラスに対しても、事件のメカニズムがありますか?答えは肯定的です.イベント機構を通して、クラスを独立したモジュールとして設計することができ、イベントを通じて外部との通信が可能になり、プログラムの開発効率が向上します.
2.パラメータなしのイベント設計モード
最も簡単なモードは、クラスの方法メンバーをイベントとして定義し、JavaScriptの基本文法を利用して実現することができ、通常は空の方法である.たとえば:
<script language="javascript" type="text/javascript" >
function User(){
}
User.prototype={
show:function(){
this.onShow();// onShow
},
onShow:function(){}//
}
var obj = new User();
// obj onShow
obj.onShow = function(){
alert(" ");
}
// obj show
obj.show();
</script>
Obj.onShowメソッドはクラスの外部で定義され、クラスの内部メソッドshow()で呼び出され、これによって事件のメカニズムが実現される.このデザインは応用が簡単ですが、以下の欠点があります.
イベントハンドラにパラメータを渡すことができません.私たちはショー()という内部方法でイベントハンドラを呼び出すので、外部のパラメータが分かりません.
各イベントインターフェースは一つのイベントハンドラしか結合できないが、内部方法は、atachEventまたはaddEvent Listener方法を使用して複数の処理プログラムをバインドすることができる.
3.イベントハンドラにパラメータを渡す
イベントハンドラにパラメータを送るのは、カスタマイズイベントに存在する問題だけではなく、システム内部のオブジェクトのイベントメカニズムに存在する問題でもあります.イベントメカニズムは関数名のみを伝達し、パラメータ情報を持たないので、パラメータを渡すことができません.たとえば:
<script language="javascript" type="text/javascript" >
function User(){
}
User.prototype={
show:function(){
this.onShow();// onShow
},
onShow:function(){}//
}
var obj = new User();
// obj onshow
function objOnShow(userName){
alert("hello,"+userName);
}
// username
var userName = "plkong";
// obj onshow
obj.onShow = objOnShow;// userName
obj.show();
</script>
<script laguage=「javascript」type=「text/javascript」function User(){
)
User.prototype={
ショー:function(){
this.onshow()//トリガonshow事件
}
on Show:function()//定義イベントインターフェース
)
var obj=new User();
//objを作成するonshowイベントハンドラ
function objOnShow(userName){
alert("hello"+userName);
)
//username変数を定義する
var userName="plkong"
//objと結びつけられたonshowイベント
Obj.onShow=ObjOnShow;/userNameという変数を転送できませんでした.
obj.show()
上記のプログラムはパラメータを伝達できません.この問題を解決するために、反対の考え方から問題を考えることができます.パラメータをどうやって渡すかを考えずに、パラメータなしのイベントハンドラをどうやって構築するかを考えます.まず以下の関数を見てみましょう.
/* */
function createFunction(obj, strFunc)
{
var args = [];// args
if(!obj) obj = window;// obj = window;
//
for( var i = 2; i<arguments.length; i++)
args.push(arguments[i]);
//
/*
JavaScript :apply call, 。
*/
return function()
{
obj[strFunc].apply(obj, args);//
}
}
この方法はパラメータのある関数をパラメータのない関数としてカプセル化し,大域関数だけでなくオブジェクト法の存在の関数としても適用できる.この方法はまず、2つのパラメータを受信する.objとstuFncと、objはイベントハンドラがあるオブジェクトを表す.strFunはイベントハンドラの名前を表します.プログラムでは、関数に伝達する暗黙的パラメータとしてargmentsオブジェクトを利用しています.argmentsオブジェクトは、実際に関数に伝達されるパラメータであり、関数宣言で定義されているイメージリストに限定されません.argmentsオブジェクトについては、他の資料を参照することができます.2番目のパラメータ以降の暗黙的パラメータを処理します.つまり、イメージパラメータとして定義されていないパラメータです.例えば、イベントハンドラ
someObject.eventHandler=function(_arg 1,u arg 2){
//イベントハンドリングコード
)
コールすべき:creat Funct(someObject、「eventHander」、arg 1、arg 2);
このように、パラメータなしの関数を返します.戻りの関数には、転送されたパラメータが含まれています.グローバル関数がイベントハンドラとして機能すると、実はwindowオブジェクトの一つの方法なので、windowオブジェクトをObjパラメータとして伝えることができます.もっと明確にするために、Objをnullとして指定することもできます.creat Function関数の内部では、自動的にこの関数が大域関数として認識されます.最後に完了したコードは以下の通りです.
function User()
{
}
User.prototype=
{
show:function()
{
this.onShow();// onShow
},
onShow:function(){}//
}
var obj = new User();
// obj onshow
function objOnShow(userName)
{
alert("hello,"+userName);
}
// username
var userName = "plkong";
// obj onshow
//obj.onShow = objOnShow;// userName
obj.onShow = createFunction(null, "objOnShow", userName);
obj.show();