jQueryから学んだ名前空間を節約する方法

実装側では非常に苦労しますが、使い勝手は抜群。わざわざnew演算子を使ってインスタンス生成をしなくても関数の戻り値としてオブジェクトを使うテクニックです。

例を使って説明します。以下はDOMの操作で要素を削除する方法です。

普通の方法

var elem = document.getElementById('navi');
elem.parentNode.removeChild(elem);

DOMのAPIでは直接要素を削除できません。いったんparentNodeをたどり、removeChildでDOMツリーから削除します。

普通のクラス化

var Elem = function(id){
  this.elem=document.getElementById(id);
};
Elem.prototype.remove = function(){
  this.elem.parentNode.removeChild(this.elem);
};

var elem = new Elem('navi');
elem.remove();

普通のOOP的には何の問題も無く分かりやすくなりました．ですが要素を削除するだけで変数を定義することに（しかも２行）。

jQueryでやってる方法

var Elem = function(id){
  if ( window == this || !this.init )
	  return new Elem(id);
  return this.init(id);
};
Elem.prototype.init = function(id){
  this.elem=document.getElementById(id);
  return this;
};
Elem.prototype.remove = function(){
  this.elem.parentNode.removeChild(this.elem);
};

Elem('navi').remove();

なんとワンライナですよ。コレだけ簡潔にかければコードリーディングもラクラク。

核心部は下記のコードで以下のいずれかの条件時にインスタンス化されたオブジェクトが返されるようになります。

• thisがwindowのとき(関数としてコールされた場合は thisがwindowになります。)
• this.initが未定義のとき(関数としてコールされた場合、initなんてプロパティは定義してない限り無い)

if ( window == this || !this.init )
  return new Elem(id);

やっぱりjQuery最高。

その他

jQueryの最初の方にある下記のコードが意味不明。だれか教えてー
id:asiamothさんのおかげで理解しました。初期のJavaScriptにはwindow.undefinedがなかったから、それの初期化です。

// Global undefined variable
window.undefined = window.undefined;