javascript中的OOP思想(-)

    隨著AJAX的流行，javascript又被WEB程序員重視起來，網上呈現的許多框架和類庫都很好的解決了瀏覽器的兼容問題。不過我認為除非做大型項目(比如OA系統)，否則我不贊成使用框架。
    一個prototype.js就幾十K，而Atlas.js有將近4百K，這些JS代碼是下載到本地由瀏覽器進行解釋執行的，如果再加一些其它的框架，瀏覽器不當掉才怪。
    前段時間我寫了同個JS的東東，可以說將面向對象發揮得淋漓盡致了!^_^：)，並且兼容各大瀏覽器。 下面先貼一個拖動代碼，稍候會作解釋!

// JavaScript Document
/*
writer:solidluck(xishui)
created:2006/12/23
QQ:45671948----UC:75853187
Version:Beta 1.0
*/
var Browser = {
    //定義一個Browser對象用於檢測瀏覽器
    //IE的條件編譯
    /*@cc_on isIE : true, @*/
    isFF : window.navigator.appName.indexOf("Netscape") != -1 ? true : false
};
//如果是IE瀏覽器，就創建三個函數(待會詳細解釋)^_^
if(Browser.isIE) {
    var HTMLElement = new Function();
    var HTMLDivElement = new Function();
    var HTMLUnknownElement = new Function();
}
if(!Browser.isIE) {
    //這個函數用於搜索事件參數(用於非IE中)
    function SearchEvent()     {
        var func=SearchEvent.caller;
        while(func!=null)         {
            var arg=func.arguments[0];
            if(arg){
                if(String(arg.constructor).indexOf('Event') > -1){
                    return arg;
                }
            }
            func=func.caller;
        }
        return null;
    }
    //給非IE中的window的構造函數增加一個屬性event
    window.constructor.prototype.__defineGetter__( "event", function() { return SearchEvent(); } );
    //增加一個樣式對象，供讀操作
    HTMLElement.prototype.__defineGetter__( "currentStyle", function() { return this.ownerDocument.defaultView.getComputedStyle(this,null); } );
    //增加一個樣式對象，供寫操作(可以看作是currentStyle的寫版本)
    HTMLElement.prototype.__defineGetter__( "runtimeStyle", function() { return this.style; } );
    //增加一個attachEvent方法，用於綁定事件
    HTMLElement.prototype.attachEvent = function(eName,handler){
        var eType = eName.substring(2,eName.length);
        this.addEventListener(eType,handler,true);
    }
    if(Event) {
        //增加一個事件源屬性
        Event.prototype.__defineGetter__( "srcElement", function() { return this.target; } );
    }
}
//這個方法就重要了，改寫了document.getElementById()方法，用於實現非IE內核中HTML元素的綁定，實現 繼承
function $() { 
    if(!arguments.length) return;
    var elements = [];
    for(var i = 0;i < arguments.length;i++) {
        elements.push(document.getElementById(arguments[i]));
        if(Browser.isIE) {
            //如果綁定過，就不再進行綁定
            if(!elements[i].expand) {
                Global.copy(elements[i],HTMLElement.prototype);
                Global.copy(elements[i],elements[i].getType().prototype);
                elements[i].expand = true;
            }
        }
    }
    if(elements.length == 1)
        return elements[0];

    return elements;
}
var Global = {
    //Global對象的copy方法利用反射機制實現成員復制
    copy : function(without,object) {
        if(arguments.length != 2) return;
        if(!without || !object) return;
        for(var index in object) {
            if(without[index]) continue;
            without[index]=object[index];
        }
    }
}
Global.copy(HTMLElement.prototype,{
    //getType方法將成為所有HTML元素的一個方法。主要用於實現HTML各個元素的不同基類
    getType : function() {
        if(this.tagName.toUpperCase() != "DIV")
            return HTMLUnknownElement;
        return HTMLDivElement;
    }
});
Global.copy(HTMLDivElement.prototype,{
    //接下來就是對DIV元素所繼承的類進行擴展。我這裡只是實現了拖動
    parent : function() {
        var Parent = this.offsetParent,current;
        if(Parent.tagName.toUpperCase() == "BODY" || Parent.tagName.toUpperCase() == "HTML") {
            current = this;
        } else {
            current = Parent;
        }
        return current;
    },
    drag : function() {
        var _this = this.parent();
        var current = this;
        var doc = document.documentElement || document.body;
        this.runtimeStyle.cursor = "move";
        function down(e) {
            Global.down = true;
            Global.left = event.clientX - _this.offsetLeft;
            Global.top = event.clientY - _this.offsetTop;
            if(_this.setCaptrue)
                _this.setCaptrue();
            else if(window.captureEvents)
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            document.body.onmousemove = function(e) {
                if(Global.down) {
                    _this.runtimeStyle.left = Math.min(Math.max((event.clientX - Global.left),0),doc.clientWidth - _this.clientWidth) + "px";
                    _this.runtimeStyle.top = Math.min(Math.max((event.clientY - Global.top),0),doc.clientHeight - _this.clientHeight) + "px";
                }
                return false;
            }
            document.body.onmouseup = function(e) {
                Global.down = false;
                if(_this.releaseCapture)
                    _this.releaseCapture();
                else if(window.releaseEvents)
                    window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
                document.onmousemove = null;
                document.onmouseup = null;
                return false;
            } return false;
        }
        this.attachEvent("onmousedown",down);
    }
}); 

 

/*--------------源碼詳解 ---------------*/

if(Browser.isIE) {
    var HTMLElement = new Function();
    var HTMLDivElement = new Function();
    var HTMLUnknownElement = new Function();
}

 

 如果是IE內核的瀏覽器，就創建三個函數，我這裡創建的這三個函數名不是隨便取的。
在標准的DOM瀏覽器中(比如 firefox)，HTMLElement是所有HTML元素的基類，而各個HTML元素又有各自的基類，比如DIV元素繼承了 HTMLDivElement類和HTMLElement，select元素耿繼承了HTMLSelectElement和HTMLElement類。
我之所以在IE內核的瀏覽器中創建FF中相同的類名函數，是因為接下來擴展就不需要再去檢測瀏覽器。夠方便!
__defineGetter__()和__defineSetter__()是屬性構造器。前者為讀，後者為寫。其實也就相當於C#中的get和 set。但這在IE中是不支持的。所以有點遣憾，覺得程序員們把太多的時間和精力浪費在兼容問題上了。
接下來講講兩種不同內核瀏覽器的事件模型吧(差別太大，以致於很多程序員只寫在IE運行的程序，不過我認為，作為一個合格的程序員，要寫就寫兼容的。即使是桌面應用程序，跨平台也是一個持久話題)。
IE內核的瀏覽器：一旦解發了事件，就會產生一個全局對象，這個對象自動成為window對象的一個成員屬性，通過window.event可以進行訪問(event對象只在事件觸發期間存在，一旦傳給相應事件的函數運行完畢，這個event對象將會自動銷毀)。
根據事件的類型，event對象會保存不同的信息。這些信息作為event的成員進行訪問。標准瀏覽器： 比如firefox瀏覽器，在執行事件時，需要傳遞一個參數來保存事件的相關信息。
一般可以通過如下代碼進行瀏覽器兼容：

document.onclick=function(e) { 
	var e=window.event||e; 
	var target=e.srcElement||e.target; 
	alert(target); 
}  

這裡用到了||運算符，它是一個短路運算符，比如有a||b，在執行時，首先會將a轉為boolean類型來進行測試，如果為true,那麼直接返回a的值(注意，是返回原值，而不是返回boolean類型的值)，如果為false，那麼就去測試b(同樣轉為boolean類型來進行測試)，當然，不管b 測試的結果是true或false，都會返回b的值(返回原值)。
不過如果要大量的使用事件，在寫兼容瀏覽器的代碼時，會重復很多，顯得很不簡潔。其實在firefox瀏覽器中，提供了一個靜態的Event對象。可以利用我剛才說過的__defineGetter__()屬性構造器來進行擴展Event(在觸發事件時，產生的事件對象其實是Event對象的一個實例)，然後通過修改window的構造函數來得到一個跟IE兼容的event對象。下面解釋一下searchEvent方法。

function SearchEvent() 	{ 
	var func=SearchEvent.caller; 
	while(func!=null) 		{ 
		var arg=func.arguments[0]; 
		if(arg){ 
			if(String(arg.constructor).indexOf('Event') > -1){ 
				return arg; 
			} 
		} 
		func=func.caller; 
	} 
	return null; 
} 

 

這裡用到了caller，它是函數對象的一個屬性，指向調用者，如果a函數被b函數調用，那麼a.caller指向這個b(只能在函數內部使用 caller)，否則返回null。
通過while循環一級一級的向上搜尋，直到找到為止。arguments是參數對象，只能在函數內部使用，表示當前函數的形參集合(對於arguments,比較怪異，它像一個集合，又像一個數組。卻不是集合也不是數組)。
這樣擴展以後，在使用時，就跟在IE中一樣方便，使代碼效率更高。
下面來解釋一下樣式對象。相信各位用過style對象了。如果樣式是在行內定義的，style肯定可以得到相關樣式的值(如果你定義了的話)。但如果樣式是一個外部文件呢。那麼通過style來進行讀取某個樣式值是行不通的。
換個思路，不管樣式定義在哪裡，在運行時，元素是肯定具備某些樣式的(如果定義了的話)。IE提供了一個currentStyle來進行讀取。FF中的要麻煩一些，不過好歹提供了相應的屬性。^_^：)。
下面著重講解一下$()方法的實現。貼代碼先：

function $() {  
	if(!arguments.length) return; 
	var elements = []; 
	for(var i = 0;i < arguments.length;i++) { 
		elements.push(document.getElementById(arguments[i])); 
		if(Browser.isIE) { 
			//如果綁定過，就不再進行綁定
			if(!elements[i].expand) { 
				Global.copy(elements[i],HTMLElement.prototype); 
				Global.copy(elements[i],elements[i].getType().prototype); 
				elements[i].expand = true; 
			} 
		} 
	} 
	if(elements.length == 1) 
		return elements[0]; 

	return elements; 
} 

 

首先確定綁定是在IE內核的瀏覽器中進行的。然後判斷元素的expand屬性是否存在(第一次綁定時，expand屬性是肯定不存在的，綁定之後，將 expand的值賦為true,那麼下一次執行$()方法時，就不再進行綁定)。

Global.copy(elements[i],HTMLElement.prototype); 

 

//通過繼承HTMLElement類，當前元素將會擁有getType()方法。getType()方法會根據元素返回相應的類(我這裡僅僅擴展了 DIV，如果某位網友想擴展別的，可以按照我的思路)。

Global.copy(elements[i],elements[i].getType().prototype); 

 

//這個時候已經有getType()方法了，執行之後將返回一個類，接著擴展這個類，那麼元素就會擁有這個類的所有成員。 寫個例子來拖動吧。。

好了，說了那麼多了，朋友們有問題可以跟我聯系。。。。^_^：)

评论

1 楼 seven_cuit 2008-11-07  

文章写成这样让人怎么看！