
Greasemonkey スクリプトの冒頭に書く 5 行2009-01-20
WordPress with Twitter の不具合を修正した記念に、Greasemonkey を書く時に頻繁に利用する関数をまとめたので、公開してみます。
外部の JavaScript ライブラリを読み込む方法を解説したサイトもありますが、そこまで大げさな機能が必要でもなく、軽く動作させたいときに便利です。
特に共通ライブラリを利用すると、Firefox 以外のブラウザの対応も無駄に読み込む事になるので、スマートじゃないなぁと思います。
この辺は、ブラウザ間の互換を考えないといけない汎用ライブラリではなかなか実装できないところですね。
もちろん、下記のように名前空間を汚さないように書くのは基本的なマナーです。
$ 関数とかをグローバル (window オブジェクトのメンバ) に定義しちゃうと、サイトによっては壊滅的に動作がおかしくなってしまうかも?
ちまたでよく見る GM は大概ラッピングされていたので、ずっと勘違いしていました。公式マニュアルにリンクしておきます。
公式マニュアル
$a のパフォーマンスが良くないという話もありますが、配列のサイズがあらかじめ確定しているので、配列のインスタンス生成時にサイズを指定するようにして、push を使わないほうがいいよ。って事かと思います。気になる方は直して使って下さい。
いずれにせよ、ご指摘ありがとうございました。
外部の JavaScript ライブラリを読み込む方法を解説したサイトもありますが、そこまで大げさな機能が必要でもなく、軽く動作させたいときに便利です。
特に共通ライブラリを利用すると、Firefox 以外のブラウザの対応も無駄に読み込む事になるので、スマートじゃないなぁと思います。
var d = document; var $ = function(id) { return d.getElementById(id); } var $x = function(xp) { return d.evaluate(xp, d, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; } var $a = function(xp) { var r = d.evaluate(xp, d, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); var a=[]; for(var i=0; i<r.snapshotLength; i++){ a.push(r.snapshotItem(i)); } return a; } var $e = function(e,t,f) { if (!e) return; e.addEventListener(t, f, false); }
- d
document のエイリアスです。目的はコードの短縮と実行速度の高速化です。 - $ 関数
getElementById のエイリアスです。説明不要でしょう。 - $x 関数
xpath を引数としてとり、最初に一致したエレメントを返します。 - $a 関数
xpath を引数としてとり、一致したエレメント全てを配列で返します。 - $e 関数
addEventListener のエイリアスです。説明不要でしょう。
この辺は、ブラウザ間の互換を考えないといけない汎用ライブラリではなかなか実装できないところですね。
もちろん、下記のように名前空間を汚さないように書くのは基本的なマナーです。
$ 関数とかをグローバル (window オブジェクトのメンバ) に定義しちゃうと、サイトによっては壊滅的に動作がおかしくなってしまうかも?
(function(){ // 処理本体 })();
2009-01-26 追記 -- コメントでご指摘いただいた点について
Greasemonkey の実行環境はサンドボックス上にあるので、function によるラッピングは不要だそうです。ちまたでよく見る GM は大概ラッピングされていたので、ずっと勘違いしていました。公式マニュアルにリンクしておきます。
公式マニュアル
$a のパフォーマンスが良くないという話もありますが、配列のサイズがあらかじめ確定しているので、配列のインスタンス生成時にサイズを指定するようにして、push を使わないほうがいいよ。って事かと思います。気になる方は直して使って下さい。
いずれにせよ、ご指摘ありがとうございました。
カテゴリ: Development タグ: wordpress twitter greasemonkey xpath