スポンサーサイト
投稿日時 : -------- --:--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
-------- --:-- | スポンサー広告
中央管理型イベントマネージャ『evtmgr.js』 0.05 beta
投稿日時 : 2008-10-26 14:47
 Javascriptのメモリリークレスな中央管理型イベントマネージャモジュールのevtmgr.jsのバージョン0.05betaを公開します。
 

■evtmgr.js 0.05 beta 変更点

  • イベント登録時に必須だった登録オブジェクトのinstプロパティをオプションに。instプロパティ指定無しの場合はelemプロパティの参照先HTMLElementが自動格納される。
  • instプロパティが必須ではなくなった影響で各関数を微調整。
 

■evtmgr.js 0.05 beta のダウンロード

 使用は自己責任でお願いします。evtmgr.jsが原因で発生したいかなる損害に対しても作者itmstはその責任を負いません。
 
evtmgr.js 0.05 beta (2008/10/26 11:31) 動作確認 : Firefox 3.0.0 - 3.0.3/ Firefox 2.0.0.14 / Opera 9.50 - 9.61 / Safari 3.1.2 / IE 7.0 / IE 6.0 / IE 5.5 / Mozilla 1.8b / NN 9.0.0.5
 

■evtmgr.jsの導入方法の簡単な説明

 通常の外部jsファイルと同じようにSCRIPT要素のsrcでURL指定するだけです。ロードを実行したコンテキストのグローバルオブジェクトに「evtmgr」というプロパティが追加されるので、後は「evtmgr.methodName()」や「evtmgr.propertyName」という感じでevtmgr.jsの機能を利用できます。
<html>
<head>
<script type="text/javascript" src="evtmgr.js"></script>
<script>
//ここでevtmgr.add()などを使用する
</script>
</head>
<body></body>
</html>
 

■最も基本的なイベント登録コード

 instプロパティがオプションになったことでイベント登録コードがaddEventListener()使用時と近いものになりました。最も基本的なイベント登録のサンプルコードを紹介しておきます。以下のコードで「document要素でonclickイベントが発生したらonEvent関数を呼ぶ」という意味になります。
<html>
<script type="text/javascript" src="evtmgr.js"></script>
<script>
//イベント発生時に呼ばれる関数
function onEvent(){alert("クリック!");}

//evtmgr.add()メソッドを使ってイベント登録
evtmgr.add({elem:document,type:"click",func:onEvent});
</script>
</html>
これはaddEventListenerを使った以下のコードと「基本的には」同じです。
<html>
<script type="text/javascript" src="evtmgr.js"></script>
<script>
//イベント発生時に呼ばれる関数
function onEvent(){alert("クリック!");}

//addEventListener()メソッドを使ってイベント登録
document.addEventListener("click",onEvent,false);
</script>
</html>
このサンプルだけ見るとただ複雑になっただけのように思えるかもしれませんが、evtmgr.jsは「イベントタイプ」や「呼び出す関数」などをキーとして登録オブジェクト(イベント関連情報をひとまとめにしたオブジェクト)を検索し抽出する機能や、条件に一致するイベントの一括削除、ガーベッジコレクション機能などの柔軟で強力なイベント中央管理機能を提供します。子ウィンドウのイベントも中央で一元管理できます。詳細はevtmgr.js ドキュメントデモページ(手抜きです)を参照してください。
 

■0.05betaで使用可能なメソッド・プロパティ一覧

 詳細はevtmgr.js ドキュメントを参照してください。
 
メソッド
  • add イベント登録
  • remove イベント削除
  • find 登録オブジェクト検索
  • selectRemove 条件一致登録オブジェクト一括削除
  • removeAll 全イベント削除
  • getIdList IDリスト取得
  • selectById IDから登録オブジェクト参照
  • selectAll 全登録オブジェクトリスト
  • isGarbage ガーベッジ化登録オブジェクト判定
  • selectGarbage ガーベッジ化登録オブジェクトリスト
  • isOverlap 重複登録チェック
  • gc ガーベッジコレクション実行
  • gcAutoStart ガーベッジコレクション自動実行開始
  • gcAutoStop ガーベッジコレクション自動実行停止
  • exec イベント発生時関数実行
  • chkArg 登録オブジェクトプロパティチェック
  • isDuck 類似オブジェクト判定
  • uid ユニークID生成
プロパティ
  • browser 使用可能メソッドフラグ
  • list 登録オブジェクト格納用
  • overlap イベント重複登録許可/非許可フラグ
  • gcInterval ガーベッジコレクション自動実行間隔
  • gcAutoHandle ガーベッジコレクション自動実行状態
  • ongc ガーベッジコレクション実行時呼び出し関数

■従来通りinstプロパティも使える

 今まで通りinstプロパティを使ってfuncプロパティ指定の関数を呼び出すときにthisに設定されるObjectを明示的に指定することもできます。
<html>
<script type="text/javascript" src="evtmgr.js"></script>
<script>
var msg = "foo"
function showMsg(){
	alert(this.msg); //「bar」と表示される

}
var myObject = {msg:"bar"};
evtmgr.add({
	type:"click",
	elem:window,
	func:showMsg,
	inst:myObject //実行スコープをmyObjectに
});
</script>
</html>
このコードでwindowでclickイベントを捕捉するとwindow.msgの「foo」ではなくmyObject.msgの「bar」が表示されます。instプロパティの指定がなければwindow.msgの「foo」が表示されます。
 

■XULアプリでも全く同じように使用できそう

 Dropfox作ってる時に試してみたんですが、XULアプリ中でも何の問題もなく動作しそうです。
 

■ドキュメントとデモページ

ドキュメント
手抜きなデモページ
 
 
スポンサーサイト
2008-10-26 14:47 | evtmgr.js | Comment(0) | Trackback(0)
中央管理型イベントマネージャ『evtmgr.js』 0.04 beta
投稿日時 : 2008-09-17 15:56
 Javascriptのメモリリークレスな中央管理型イベントマネージャのevtmgr.jsのバージョン0.04betaを公開します。今バージョンで複数ウィンドウのイベントを親ウィンドウで中央管理できるようになりました。また、ウィンドウ単位でのイベント全削除にも対応。
 
このページの情報は古くなっている可能性があります。evtmgr.jsに関する最新情報はカテゴリ:evtmgr.jsを参照して下さい。
 

■evtmgr.js の特徴

 初期バージョンから徹底していることはすべてのイベント管理をevtmgrというObject一つで完結させることです。親ウィンドウにevtmgrというグローバル変数を1つ追加し、HTMLElementにイベントハンドラーを追加する以外、いかなる名前空間の汚染、仕様外のプロパティ追加などを行わない、イベントの完全な中央管理を実現しています。その他詳細は [Javascript] 中央管理型イベントマネージャ 『evtmgr.js』ドキュメントデモを参照してください(*ドキュメントとデモは現時点では0.03beta用のままです。)。
 

■evtmgr.js 0.04 beta 変更点

  • 複数ウィンドウのイベントが中央管理可能に。
  • 登録オブジェクトにwinプロパティ追加。
  • winプロパティを使ってウィンドウ単位でのイベント検索やイベント全削除が可能に。
  • isGarbage()メソッド追加。登録オブジェクト単体でのガーベッジ判定をプログラマが任意のタイミングで実行可能に。
  • isOverlap()メソッド追加。重複登録チェックをプログラマが任意のタイミングで実行可能に。
  • 重複登録チェックが少し高速化。
  • 0.03betaで追加されたrepaer()メソッド及びlifeプロパティ廃止。
登録オブジェクトのwinプロパティには、add()メソッドでのイベント登録時にelemプロパティに指定されたHTMLElementオブジェクトが所属する実行コンテキストのグローバルオブジェクト(各ウィンドウのWindowオブジェクト)が自動的に格納されます。登録時に設定しても上書きされます。
 

■evtmgr.js 0.04 beta のダウンロード

 使用は自己責任でお願いします。evtmgr.jsが原因で発生したいかなる損害に対しても作者itmstはその責任を負いません。
 
最新バージョンはカテゴリ:evtmgr.jsを参照して下さい。
 
evtmgr.js 0.04 beta (2008/09/17 20:03) 動作確認:Firefox 3.0.1 / Firefox 2.0.0.14 / Opera 9.52 / Safari 3.1.2 / IE 7.0 / IE 6.0 / IE 5.5 / Mozilla 1.8b / NN 9.0.0.5
 

■新機能を使ったサンプルコード

 0.04betaから追加した機能を使ったサンプルコードを載せておきます。
 
子ウィンドウを閉じる前に子ウィンドウのイベントを全削除する
//子ウィンドウを生成して参照を得る
var child = window.showModelessDialog("child.hta");

//イベント登録
evtmgr.add({
	type:"unload",
	elem:child,
	func:function(){evtmgr.selectRemove({win:child})},
	inst:child
});
子ウィンドウのWindowオブジェクトのchildでunloadイベントが発生したら、条件に一致するイベントを一括削除するselectRemove()メソッドに、winプロパティにchildが設定された条件指定用のオブジェクトを渡すようにイベント登録。これで子ウィンドウに設定したイベントはunloadイベント発生時に全て削除されます。このように複数のウィンドウのイベントを中央で管理できるようになりました。
 
子ウィンドウの中の0番目の"onclick"イベントを削除する
//登録イベントを検索して結果(Array)をfoundに格納
var found = evtmgr.find({
	type:"click",
	win:child
});

//結果が0件でないなら0番目のイベントを削除
if(found.length){
	evtmgr.remove(found[0]);
}
検索条件指定Objectのwinプロパティにchildとイベントタイプclickを設定してfind()メソッドに渡すと子ウィンドウ中のclickイベントを含む登録オブジェクトへの参照Arrayが返る。この0番目の登録オブジェクトをremove()メソッドに渡してイベントを削除する。
 
ガーベッジ化したイベントかどうか調べる
<div id="mOverDiv">マウスオーバー</div>
<script>
var moverdiv = document.getElementById("mOverDiv");
function mOver(){alert('onmouseover!')}
var regObj = evtmgr.add({
	type:"mouseover",
	elem:moverdiv,
	func:mOver,
	inst:window
});
//ガーベッジ判定
alert(evtmgr.isGarbage(regObj)); //「false」と表示

//エレメントを削除してイベントをガーベッジ化させる
moverdiv.parentNode.removeChild(moverdiv);

//ガーベッジ判定
alert(evtmgr.isGarbage(regObj)); //「true」と表示

//削除
evtmgr.remove(regObj);

</script>
イベント登録後にelemプロパティが参照しているHTMLElementが消えた場合、今後イベントが発生する可能性が全くないガーベッジ(ゴミ)になる。isGarbage()メソッドに登録オブジェクトを渡してみて、ガーベッジ化しているかどうか判定できる。ガーベッジ化している場合はこのサンプルコードのように個別に削除するか、GC(ガーベッジコレクション)を実行するgc()メソッドを呼び出せばよい。GCはgcAutoStart()メソッドで自動実行させることもできる。
 
 
重複登録かどうかチェックする
//登録オブジェクト生成
var regObj1 = {
	type:"keydown",
	elem:document,
	func:showKeyCode,
	inst:window
};

//イベント登録
evtmgr.add(regObj1);

//まったく同じ条件の登録オブジェクトを新たに生成
var regObj2 = {
	type:"keydown",
	elem:document,
	func:showKeyCode,
	inst:window
};

//重複登録チェック
if(evtmgr.isOverlap(regObj2)){
	alert("重複したイベントです");
}
まったく同じ構成での重複登録はデフォルトでは許可されません。isOverlap()メソッドに登録しようとしているObjectを渡してみて重複かどうか判定できます。ちなみにevtmgr.overlap = true;とすればaddメソッド時の自動重複チェックが実行されなくなります。正しく設計されたプログラムなら重複してイベントを登録することはないと思われるので、登録時の負荷軽減のために重複を許可する方がよい。
 
 
2008-09-17 15:56 | evtmgr.js | Comment(0) | Trackback(0)
[Javascript] evtmgr.jsのドキュメントを作成
投稿日時 : 2008-07-02 14:58
中央管理型イベントマネージャ 『evtmgr.js』の仕様書にあたるドキュメントを作成しました。
 
このページの情報は古くなっている可能性があります。evtmgr.jsに関する最新情報はカテゴリ:evtmgr.jsを参照して下さい。
 
evtmgr.js ドキュメント
 
現在16メソッド、5プロパティの解説とサンプルコードが載っています。参考にしてください。こういったものを外部向けに書くのは初めてなんですがこんな感じでいいんでしょうか?まだ書き足りない部分があるので随時更新していきます。evtmgr.js本体と動作デモのページは以下。
 
evtmgr.js 本体
デモページ
 
 
2008-07-02 14:58 | evtmgr.js | Comment(0) | Trackback(0)
[Javascript] 中央管理型イベントマネージャ 『evtmgr.js』
投稿日時 : 2008-07-02 14:47
 
このページの情報は古くなっている可能性があります。evtmgr.jsに関する最新情報はカテゴリ:evtmgr.jsを参照して下さい。
 
 JavascriptのattachEvent/detachEventやaddEventListener/removeEventListenerでElementにイベントハンドラを設定して管理するのは面倒だし、IEではメモリリークの原因にもなりやすい。さらにクラス定義コード内でイベントハンドラにthisキーワードを使ってインスタンスへの参照を持たすにはクロージャを使わなければならない。このあたりをもっとスマートにコーディングできないかと試行錯誤して中央管理型のメモリリークレス(たぶん)なイベントマネージャ『evtmgr.js』を書いてみたのでのでデモを公開します。
 

■evtmgr.js 0.01 beta の概要

 evtmgr.jsは中央管理型イベントマネージャモジュールです。従来のイベント管理方法ではどのエレメントにどのイベントが設定され、どの関数がどのオブジェクトのメソッドとして呼ばれるのか、の全体を正確に把握するのは困難でした。
 evtmgr.jsはElementへのイベント設定を関連情報をまとめた「登録オブジェクト」として中央管理し、「特定のイベントタイプ」や「特定のインスタンス」というキーで登録オブジェクトを検索し抽出する機能や、条件に一致するイベントの一括削除などの柔軟なイベント管理機能を提供します。
 また、クラス定義コード内ではクロージャを使用することなくthisキーワードをそのままインスタンスへの参照としてイベント登録に使えるなどスマートなコーディングを可能にします。
 

■evtmgr.js 0.01 beta の主な特徴

  • 中央管理型イベントマネージャモジュール。
  • 登録イベントをイベントタイプやイベントをアタッチしたエレメント、呼び出し関数、インスタンス、登録IDをキーにして検索することが可能。
  • クラス定義コード内でクロージャを使用することなくthisキーワードをそのままインスタンスへの参照としてイベント登録に使える。
  • 登録イベントを条件を指定して一括削除することができる。特定のイベントタイプや特定のインスタンスに関係するイベントを全て削除するという使い方を想定。条件はひとつでも複数でも可。
  • ページアンロード時にはすべてのイベントの登録を自動削除するのでメモリリークしない。
  • GC(ガーベッジコレクション)機能搭載。中央管理型イベントマネージャの欠点である、対象エレメントがDOMツリー上から削除された後も中央からの参照のせいでメモリが解放されないという問題を解決。任意のタイミングまたは自動でGCを実行することが可能。
  • メジャーなブラウザで動作確認済み:Firefox 3.0 / Firefox 2.0.0.14 / Opera 9.50 / Safari 3.1.2 / IE 7.0 / IE 6.0 / IE 5.5 / Mozilla 1.8b / NN 9.0.0.5

■デモページ

 まあごちゃごちゃ書くより(ごちゃごちゃ書いた後ですがw)動いてるのを見るのが早いと思うのでデモページを作りました。メソッドごとにボタンがあるのでそれを押せば解説付きで実行されます。ちょっと読みにくいですが。しっかり作ったデモではありませんが雰囲気は伝わるかと思います。いろいろいじってみてください。
 
evtmgr.js デモページ
 

■ドキュメント

evtmgr.js ドキュメント
 
 メソッドやプロパティの仕様とサンプルコードが載ったドキュメントを作成しました。参考にしてください。
 

■evtmgr.js ダウンロード

evtmgr.js
 

■バグ等

 まあ当然バグはあると思います。それ以前に何かとんでもない思い違いをしてることがあるかもしれませんw。あまり自信がないです。まだサイ本読み終えてないぐらいですし。何かおかしな点がありましたら指摘して下さい。
 
 
 
2008-07-02 14:47 | evtmgr.js | Comment(0) | Trackback(0)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。