IT戦記

今さらだけど $X + GreaseMonkey はまじで最強だなぁ。例えば 2 行で mixi のクローラとか作れちゃうもん

JavaScript, XPath

最近

GreaseMonkey ちょっと使ったりするんだけど $X 関数が便利すぎる！！

$Xとは

cho45氏が作った XPath 用の関数です。Shibuya.JS で発表してた資料にあります。

http://lowreal.net/2006/shibuya-js-1-lt.html

http://lowreal.net/logs/2006/03/16/1

例：mixiクローラ

これは例です。規約違反などで実際には絶対やらないでください。

var links = $X("//a[contains(@href,'show_friend.pl')]");
setTimeout(function(){document.location.href=links[Math.floor(Math.random()*links.length)].href }, 3000); 

簡単過ぎる！

これでグリモンユーザ増えないかなぁ・・・

ツイートする

Permalink | コメント(0) | トラックバック(0) | 11:54

Plain Old JavaScript Prototypes (普通の JavaScript も使えるようにしよう)

JavaScript

Prototype.js や MochiKit や jQuery や dojo

こういう便利なライブラリがたくさん出てきてとても便利になりました。

でもそのライブラリ本当に必要？

たしかに、グループワーキングを行うにはこれらのライブラリは必須だと思います。

でも、ちょいスクリプトを作るのに .bind(this) や $ や each や Event.observe が必要でしょうか。

いささかオーバスペックな気がします。

実際に「このツール Prototype.js 必須かよ。こっちは MochiKit で作ってるのにぃ」とかってことも多々あります。

あれを使うためにあれとこれを読み込んで、これを使うためにこれも必要だな。こんな感じだとサイトはどんどん重いものになってしまします。。。orz

そこで、原点回帰です。

ちょっとしたツールでライブラリ使うのはやめようよ！何も使わなくても JavaScript は楽しく書けるよ！ script タグ一個でいろいろ出来るよ！

それ、ライブラリじゃなくてもできるよ！

しかも

FireBug のコンソールやアドレスバー*1で他サイトをいじりまくれますよ！ブックマークも GreaseMonkey も作りまくり！

どんなライブラリを読み込んでいようがいまいが、こっちは「普通の JavaScript」が書けるんだからね！

それでは Prototype.js を例に、普通化していきましょう

$

$('id');

document.getElementById('id');

ちょwwww本末転倒w

$A

var args = $A(arguments);
args.push('hoge');
args.shift();

Array.prototype.push.apply(arguments, 'hoge');
Array.prototype.shift.apply(arguments);

bind

this.method1.bind(this);
this.method2.bind(this, a, b);

var self = this;
function() { self.method1() };
function() {
    Array.prototype.unshift.apply(arguments, a, b);
    self.method2.apply(self, arguments);
};

bindAsEventListener

this.method1.bindAsEbentListener(this);

var self = this;
function(event) { self.method1(event || window.event) };

Event.observe

Event.observe('load', function() {alert('Loaded')});

window.onload = function() {alert('Loaded')};
// OR
var handler = function() {alert('Loaded')};
try { window.addEventListener('load', handler) }
catch(e) {window.attachEvent('onload', handler) }

Event.pointerX Event.pointerY

move(Event.pointerX(event), Event.pointerY(event));

var html = document.documentElement, body = document.body;
move(
    event.pageX || event.clientX + (html.scrollLeft || body.scrollLeft),
    event.pageY || event.clientY + (html.scrollTop || body.scrollTop)
);

Event.stop

Event.stop(event);

(event.preventDefault||function(){
    event.returnValue = false;
    event.cancelBubble = true
})();
(event.stopPropagation||function(){})();

Class.create

var Hoge = Class.create;
Hoge.prototype = {
    initialize: function() {
        alert('Created');
    }
};

(window.Hoge = function() {this.initialize.apply(this, arguments)}).prototype = {
    initialize: function() {
        alert('Created');
    }
}

Object.extend

var SubClass = Class.create;
Object.extend(SubClass.prototype, SuperClass.prototype);
Object.extend(SubClass.prototype, {
....
});

(window.SubClass = function() {this.initialize.apply(this, arguments}).prototype = new SuperClass();
(function() {
    var prototype = {
        ...
    };
    for(var n in prototype) SubClass.prototype[n] = prototype[n];
})();

each 系

['hoge', 'fuga'].each(function(e){alert(e)});

for(var array = ['hoge', 'fuga'], i = 0, len = array.length; i < len; i ++) { alert(array[i]); }

このくらい出来れば充分じゃないですか？？

読みにくいですか^^;？

ちょいスクリプトなら多少読みにくくても保守できますよ ^^

書きにくいですか^^;？

手が慣れますよ ^^

ツイートする

Permalink | コメント(2) | トラックバック(0) | 05:00