JavaScript 関連のちょっとしたメモ
気になって調べたり、見つけたもの。小ネタ。基本的にはmonjudoh/BeautifulProperties.js · GitHub をみてたってのがきっかけ。
prototype 汚染しちゃだめなのって Object と Array だっけ?
というか prototype 汚染しないほうがいいのってなんでだっけ?という基礎的な話。prototype.js でいろいろ苦しい話がでたからやめようって経緯があるのは知ってて、名前空間分けようってのは知ってたけど、じゃあどこまでならやっていいんだろうみたいな話。
具体的には以下
JavaScriptでのbuilt-in/DOM objectのprototype拡張 - 文殊堂
Object.defineProperty で enumerable: false はしってたけど、なるなるという。
arguments は array じゃないよって話
答えは本に載ってた
JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技
- 作者: JSサポーターズ
- 出版社/メーカー: 技術評論社
- 発売日: 2012/08/31
- メディア: 単行本(ソフトカバー)
- 購入: 38人 クリック: 1,796回
- この商品を含むブログ (11件) を見る
Array っぽいけどちょっと違う独自のオブジェクトですよという。まあたしかに console.log() した結果で [object Arguments] ってなってたのはみたけど、じゃあなんなの、という状態だった。で、これを配列として扱いたいときは以下のイディオムですよねという。
Array.prototype.slice.apply(this, arguments)
ちなみに上記のイディオムは arguments にたいしてだけじゃなくて Array に変換したいときに一般的にある話で、具体的には DOM で document.getElementsByClassName() とか $(".class") とかしたときにかえってくるのが HTMLCollection とか HTMLElemnt とか NodeList とかそんな感じなので、変換したりする。
カスタムイベントについて
Hit-a-Hintブックマークレット2.0をリリースしたよ - by edvakf in hatena を空間ナビゲーション版やエクステンション版や、あるいは vimOperate という拡張でもやれるけど、いまでもつかっている。で、読んだときに「マウスイベント作って→初期化して→発火」というくだりでクリックイベントをエミュレーションできるのだけど、でも jQuery.trigger ってあれどうやってるの?と疑問に思った。
まずは MDN をあたった
document.createEvent - DOM | MDN
そうだよね、いろいろあるよね。マウスイベントだけじゃなくて DOM 操作や DOM Level 3 Events からはキーボードイベントもとれるよね、いうのはわかった。でもじゃあ自前でイベントをつくるにはどうすればいいんだろう?というのは残った。ら、既にやっている人がいた。
javascriptのカスタムイベントを作ろう! - 馬鹿と天才は紙一重
つまりイベントオブジェクト作ってしまえば名前なんでもよかったのだ。で、リスナーもなんでもよかったのだ。
// リスナーをはる document.addEventListener("hoge",function () { console.log(1); }, false); // イベントオブジェクトつくって var e = document.createEvent("Event") // 初期化して e.initEvent("hoge", bubbles, cancelbuble); // 対象のエレメントに発火 document.dispathEvent(e) // 1
まあ
小ネタ