2016年06月22日

イベント処理

メンテナブルJavaScriptを呼んでいて、イベント処理のハンドラ分岐が意識できていなかったのでメモ
obj = {
init : function(){
this.evens();
},
events : function(){
$(".hoge").click($.proxy(this.handleClick,this));
},
handleClick : function(e){
e.preventDefault();
var $popup = $(".popup");
$popup.css({
left: e.clientX,
top:e.clientY,
}).addClass("reveal");
}
}
obj.init();


これは以下のように修正する

obj = {
init : function(){
this.evens();
},
events : function(){
$(".hoge").click($.proxy(this.handleClick,this));
},
handleClick : function(e){
e.preventDefault();
this.showPopup(event.clientX,event.clientY)
},
showPopup : function(clientX,clientY){
var $popup = $(".popup");
$popup.css({
left: clientX,
top: clientY,
}).addClass("reveal");
}
}
obj.init();


ポイントは以下の点

- イベントのhadleメソッドは限りなく薄くして具体的なメソッドを叩く(VMのようにあくまで橋渡し)。
- イベントオブジェクトは引き回さず必要な情報だけメソッドに渡す。
- preventDefault()やstopPropagation()はhadleメソッド内で利用する。

こうすことでメソッドがテスタブルになる。
posted by ねこまんま at 14:58 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/439281250
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック