読者です 読者をやめる 読者になる 読者になる

素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

20〜30行くらいでjQueryっぽくする

javascript

jQueryを使うと短く書けていいのだけど、Greasemonkeyで使うのにはちょっと大げさ。なので、ネイティブのメソッドを簡単に呼べるようなものを書くと、コンパクトで便利。
メソッドチェーンにはあまりこだわってない。

var $ = // Firebugで実行できるようにするプチハック。
function $(list) {
  this.list = Array.slice(list);
  return this;
}
$.prototype.__noSuchMethod__ = function(prop, args) {
  if (!this.list.length) return this;
  if (typeof this.list[0][prop] == "function") {
    return this.list.map(function(i) i[prop].apply(i, args));
  }
  if (!args.length) {
    return new $(this.list.map(function(i) i[prop]));
  }
  if (args.length == 1) {
    this.list.forEach(function(i) {
      i[prop] = args[0];
    });
    return this;
  }
  return this;
};

var links = new $(document.links);
links
  .style()
    .color("black")
    .backgroundColor("white");
links
  .textContent("click me")
  .addEventListener("click",
    function(e){
      console.log(this);
      e.preventDefault();
    }, false);

new $(document.querySelectorAll('a[href$=".user.js"]'))
  .hash("#");

一つ気を付けることは、関数の戻り値を配列で返すので、

links
  .addEventListner("click",function(){},false)
  .textContent("hoge");

にはできないということ。
メソッドチェーンはUNIXとかのcdに似てると思ったけど、それはあんまり関係ない。