2007年11月17日土曜日

Javascript の this についてのメモ

this の扱いに困り果てたので、メモ

以下のサイトを参考にさせてもらって、イベント経由で呼び出した場合、
クラス内の this が別のものに変わってしまう点は対応できた。

[JavaScript] イベント上の this をめぐる攻防

こんな感じでクラスを書いてみる。

testFunction = function() {
this.init();
}

testFunction.prototype = {
init : function(){
this.setEvent();
},
setEvent : function() {
Event.observe($('testbButton'), 'click', this.doFunction, false);
},
doFunction : function(obj){
this.alert(obj);
},
alert: function(obj){
alert(obj.getAttribute('id')+ 'で doFunction が実行されたよ') ;
}
}

new testFunction();

HTML上にはこんなのがあるとして。
<button type="'button'" id="'testButton'">ぼたんだよ</button>


これだと、クリックしたときのに呼び出される this.Function 内の thsi が ボタンの部分を
参照してしまうので、動かない・・・Firebugで「this.console is not a function」とエラー

で上記のサイトで説明してくれてる クロージャーを使って this を 無名関数内に
閉じ込めて?あげる、、、こんな感じかな?

setEvent : function() {
Event.observe($('testbButton'), 'click', (function(obj){
return function(){
obj.doFunction(this);
};
})(this), false);
}

Firefox だと「testbButtonで doFunction が実行されたよ」ってでるけど、IE7で動かない・・・IE7 と Firefox だと this が違うみたい。

いろいろ試したり、for ~ in で表示させたりしたところ、IE7 だと window オブジェクトが this っぽい?
window オブジェクトからは イベント発生源とれなそうなので、イベントオブジェクトが関数側に渡されるので、そちらから、「event.srcElement」で取得する。
setEvent : function() {
Event.observe($('testbButton'), 'click', (function(obj){
return function(evt){
var params = Prototype.Browser.IE ? evt.srcElement : this;
obj.doFunction(params);
};
})(this), false);
}
これで IE7 でも 「testbButtonで doFunction が実行されたよ」って表示された。おしまい。

Firefox なら event.target でも取得できそうだけど、どっちを使うのがいいんだろうかとかどっちの実装が正しいんだろうか(Firefoxだろうけど)とかは Under Translation of ECMA-262 3rd Edition(邦訳)このあたり参照で。

2007年11月8日木曜日

HTML崩壊


KAZUMiX memo

で公開されているブックマークレット、実行するとHTMLが崩壊していく。
会社で30分くらい楽しい時間を過ごしてしまった。

これがを拡張?して何かできないかなぁと

しかし、こういうの思いつく人はほんとにすごいと思う。作るのはまだできるとおもうけど絶対思いつけない。こういう発想ができるようになりたい。

2007年11月7日水曜日

rico.js 20.b3 を使ってみる2

昨日の続き

includeでどう呼び出すか?と悩んでたけど、モジュール単位で呼び出してくれる Rico.loadModule のほうがよさそうなので、とりあえずそれを使ってみる。
--モジュール名は Rico.moduleDependencies参照
--内部的にモジュールの配列分解 → include してるので、ファイル名書く手間とどのファイルが影響してるか考える時間が減るだけ

Rico.loadModule('Corner');
Rico.onLoad(function() {
Rico.Corner.round.bind(Rico.Corner);
Rico.Corner.round("leftBox", {corners:"all",bgColor:"red",blend:false} );
Rico.Corner.round("rightBox", {corners:"all",bgColor:"red",blend:false} );
});

こんな感じで読み込める。関数呼び出しは Rico.onLoad 内じゃないと動かない・・・?



普通に Script タグで呼び出して使うのと使い勝手が全く変わってくるけれども、どっちがどんな感じでいいのかわからないから、もう少し調べてみようと思う。

jQuery でもいいかなぁとか思いだしてたりもするけど

2007年11月6日火曜日

rico.js 20.b3 を使ってみる

とりあえず DragAndDrop と Corner.roundを使ってみる。

こんな感じ
 http://www.reirou.jp/sample/RicoSample1.html


まあ、ほとんどデモ そのままだけど


new してるのは、特に意味は無い。
あえて言えば、別で使ったの流用だから this 外すの面倒だったから


こんなに簡単にD&Dができちゃうと、いろいろ楽しい

直前にドロップしたDIVのtop,leftを引きずってドラッグ中にマウスからずれるので気になる・・・position:absolute;は使っちゃダメなのかな。

あと、ricoCommon.js は rico.js の中で this.include で読み込まれてるっぽいので今回使った ricoStyles.js / ricoDragDrop.js もそれで読み込めないかなぁと思ったけど、眠いので今日はおしまい。