Hatena::ブログ(Diary)

latest log このページをアンテナに追加 RSSフィード

2010-10-24

イベントハンドリングなら handleEvent を使えば、Function#bind や $.proxy はたぶん要らない

タイトル変えました

uupaa.js の個々の機能をちょっとずつ紹介しています。

h2ham さんの記事を拝見して

http://h2ham.seesaa.net/article/142734325.html

uupaa.js では、 クラスオブジェクトhandleEvent にイベントを束縛できるため、

jQuery の、この(↓)ようなコードは

$(function() {
    var obj01 = {
        somevar : 'jQuery',
        doSomething : function() {
            alert(this.somevar); // alert( "jQuery" )
        }
    };
    $('button#test02').click($.proxy(obj01.doSomething, obj01)); // ココ!!
});

uupaa.js だと、この(↓)ように記述できます。

uu.ready(function(uu) {
    var obj01 = {
        somevar : 'uupaa.js',
        handleEvent: function(event) {
            alert(this.somevar); // alert( "uupaa.js" )
        }
    };
    uu('button#test02').click(obj01);  // ココ!!
});

もう一歩進んで、しっかり書くとなると、こう(↓)なるでしょうか。

uu.ready(function(uu) {

    uu.Class.singleton("Object1", {
        somevar: "uupaa.js - ClassObject",
        handleEvent: function(event) {  // ココ!!
            alert(this.somevar); // alert( "uupaa.js - ClassObject" )
        }
    });

    uu('button#test02').click(uu("Object1"));  // ココ!!
});

USE MESSAGE

イベントではなく、uupaa.js のメッセージングでこの(↓)ように代用することもできます。

# uu().post() は近々追加される予定の機能です。

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8" />
<title></title>
<script src="uupaa.js"></script>
<script>
uu.ready(function(uu) {

    uu.Class.singleton("Object1", {
        ident: "uupaa.js - ClassObject",
        handleEvent: function(event) { // DOMイベントハンドラ
            alert(this.ident);
        },
        msgbox: function(msg, param1, param2) { // メッセージボックス(引数を2つまで渡せる, 型は自由)
            alert(this.ident);
            return "hello"; // uu.msg.send() なら値を返せる
        }
    });

    uu('button#test02').click(uu("Object1")); // クリックイベントをDOM Event経由で通知
    uu('button#test02').post(uu("Object1")); // クリックイベントをメッセージング経由で通知
});
</script>
</head><body>
<button id="test02">click me!</button>

</body></html>

handleEvent は DOM 標準の機能

handleEventDOM 標準の機能です。

例により、handleEvent によるイベントハンドリングは IE8以下で利用できないため、そのへんは uupaa.js がちょっとだけ面倒をみています。

メッセージング は uupaa.js の機能

handleEvent はそもそもイベント用なので(カスタムイベントを作れば handleEvent をイベント以外でも使えるけど)、イベント以外の通知を行うメッセージングという仕組みが uupaa.js にはあります。

uupaa.js のメッセージングは postMessage() メソッドと名前が似ていますが、ちょっと違う機能(クラスオブジェクトに、ユニ/マルチ/ブロードキャストや同期/非同期通信が可能)です。

イベントとメッセージングは責務/用途で棲み分けがされていますが、メッセージングは多機能かつ値も渡せる/返せるため、カスタムイベントで無理やりシステムっぽい事をするよりも、自然にコーディングできます。

まとめ

えーと、イベントハンドリングに関しては、Function#bind や $.proxy() でゴニョゴニョせず、 handleEvent ベースで思考すると JavaScript をもっと楽しめると思います。

IE以外ならDOM標準の機能を使うため、内部で余計なクロージャを何個も作ったりせずにすみますし、JavaScript に限らず、イベントハンドリング周りはボトルネックになりがちなので、本来はできるだけ軽く仕上げなきゃだめな部分です。

そこにクロージャーを挟むという考え方は、モバイルデバイスのUXを妨げる発想(モッサリの元)になると考えてます。

おまけ

mousemove や touchmove を $.proxy でハンドリングした場合と、uupaa.js の handleEvent でハンドリングした場合のベンチをだれかがやってくれることを期待。

180mm180mm 2010/10/25 12:30 handleEvent、初耳でした。
ネイティブなJSのみで実装するとこういうこと、ですよね?
http://jsbin.com/opovo4/edit

理解がまだ浅いですが、
色々調べてみます。

uupaauupaa 2010/10/25 13:31 です。HTML5 の世界では handleEvent を使うと幸せになれそうです。IE6〜IE8 に対応するには、 uupaa.js が内部でやっているようにすれば可能です(ソースコードがちょっとむずいけど)

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。