Javascript：役に立つオブジェクトの使用例：jQuery風に$関数を使いメソッドチェーン化する

・　ソースと説明: 　このページでは、jQuery風に$関数を作り、各BOXのインスタンス化を掌っています。 $関数の引数はIDで、そのIDを持つオブジェクトを引数にしたoBoxクラスのオブジェクトを返します。ページが読み込まれた時点のメソッドチェーンの記述だけを見るとjQueryの様です。詳細はソースの中をご覧ください。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<script type="text/javascript">
<!--

//--oBoxクラスの生成関数（コンストラクタ）（引数は、オブジェクト）

var oBox=function(obj){

//--プロパティー設定
	this.obj=obj;
	this.sh=parseInt(this.obj.style.height);
	this.sw=parseInt(this.obj.style.width);
	this.sc=this.obj.style.backgroundColor;
	this.x=0;
	this.tid="";
	this.c_flag=false;

};

//--oBoxオブジェクトの実体（インスタンス）を生成する関数（引数はID）

var $=function(id){

//--変数OBJにoBoxオブジェクトの実体（インスタンス）を入れる
	var OBJ=new oBox(document.getElementById(id));

//--変数OBJを返す
	return OBJ;

};

//--prototypeによるクリック背景色変更メソッド追加（引数は、背景色）

oBox.prototype.MC=function(ec){

//--プロパティー設定
	this.ec=ec;

//--変数oにoBoxクラスのオブジェクトを入れる
	var o=this;

//--オンクリック設定
	o.obj.onclick=function(){
		o.c_flag=!o.c_flag;
		if(o.c_flag){
			o.obj.style.backgroundColor=o.ec;
		}else{
			o.obj.style.backgroundColor=o.sc;
		};
	};

//--メソッドチェーン用
	return this;

};

//--prototypeによるマウスオーバー拡大縮小メソッド追加（引数は、最終高さ、最終幅、ステップ数）

oBox.prototype.MO=function(eh,ew,step){

//--プロパティー設定
	this.eh=eh;
	this.ew=ew;
	this.step=step;

//--変数oにoBoxクラスのオブジェクトを入れる
	var o=this

//--変える関数設定
	,dasu_dk=function(){
		clearTimeout(o.tid);
		var go_dasu=function(){
			if(o.x<o.step){
				o.obj.style.height=o.x*(o.eh-o.sh)/o.step+o.sh+"px";
				o.obj.style.width=o.x*(o.ew-o.sw)/o.step+o.sw+"px";
				o.x++;
				o.tid=setTimeout(go_dasu,10);
			}else{
				clearTimeout(o.tid);
			};
		};
		go_dasu();
	}

//--戻す関数設定
	,kesu_dk=function(){
		clearTimeout(o.tid);
		var go_kesu=function(){
			if(o.x>0){
				o.obj.style.height=o.x*(o.eh-o.sh)/o.step+o.sh+"px";
				o.obj.style.width=o.x*(o.ew-o.sw)/o.step+o.sw+"px";
				o.x--;
				o.tid=setTimeout(go_kesu,10);
			}else{
				clearTimeout(o.tid);
				o.obj.style.height=o.sh+"px";
				o.obj.style.width=o.sw+"px";
			};
		};
		go_kesu();
	};

//--マウスイベント設定
	o.obj.onmouseover=dasu_dk;
	o.obj.onmouseout=kesu_dk;

//--メソッドチェーン用
	return this;

};

//--ページが読み込まれた時点で$関数を呼び出し、メソッドチェーンでMOとMCを呼び出す

window.onload=function(){

$("koboBox1").MO(150,250,50).MC("#000");
	$("koboBox2").MO(200,200,20).MC("#f00");

};

//--Copyright (C) Miyake_kobo.--
//-->
</script>
</head>
<body style="text-align:center;">

</body>
</html>

Javascript：役に立つオブジェクトの使用例：トップ