快捷導(dǎo)航

JavaScript 學(xué)習(xí)筆記 Black.Caffeine 09.11.28

更新時(shí)間：2009年11月30日 22:20:54 作者：

這兩天終于寫(xiě)出了一個(gè)個(gè)人認(rèn)為真正意義上的作業(yè)了，不過(guò)，最大感受就是。。。IE太垃圾了。。。so，這個(gè)作業(yè)實(shí)際上也沒(méi)有完成的很完美，因?yàn)?，在IE上還是有兼容性的問(wèn)題存在，不錯(cuò)，就此先自我總結(jié)一下吧~免得以后又忘了~

1. 之前寫(xiě)的一直都是分散的函數(shù)，用到什么功能，就寫(xiě)什么函數(shù)，覺(jué)得不夠整潔，所以這次寫(xiě)的是封裝的類(lèi)，用起來(lái)還不錯(cuò)，但是傳遞參數(shù)的時(shí)候遇到了不少問(wèn)題，所以，查閱了很多資料，總結(jié)如下：
1）動(dòng)態(tài)綁定事件問(wèn)題：
需要將onclick事件綁定到對(duì)象上，比如列表項(xiàng)。需要用到addEventListener或者attachEvent，用于吧函數(shù)操作添加到事件中去，而不是覆蓋，但是，attachEvent不支持FF，F(xiàn)F只能用addEventListener。so，就需要一個(gè)函數(shù)，把它們倆給綜合起來(lái)，于是乎，這個(gè)函數(shù)誕生了：

復(fù)制代碼代碼如下:

 
function addEventHandler(oTarget, sEventType, fnHandler) 
{ 
    if(oTarget.addEventListener) 
    {oTarget.addEventListener(sEventType, fnHandler, false);} 
    else if(oTarget.attachEvent) 
    {oTarget.attachEvent('on' + sEventType, fnHandler);} 
    else{oTarget['on' + sEventType] = fnHandler;} 
} 

2）傳遞this參數(shù)問(wèn)題：
由于我吧函數(shù)和屬性都封裝到了一個(gè)類(lèi)里面，所以在綁定onclick之類(lèi)的事件是，就會(huì)產(chǎn)生一個(gè)問(wèn)題，比如，addEventHandler(this.elems[i],"click",this.Move);，這樣就出錯(cuò)了，因?yàn)樵趏nclick事件發(fā)生的時(shí)候，調(diào)用的this就不是指向這個(gè)封裝的類(lèi)了，于是乎，就需要用到apply()了~——應(yīng)用某一對(duì)象的一個(gè)方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。具體格式我就不用說(shuō)了，網(wǎng)上一大堆~函數(shù)：

復(fù)制代碼代碼如下:

 
var Bind = function(object,func){ 
        var args = Array.prototype.slice.call(arguments).slice(2); 
        return function(){ 
            return func.apply(object,args); 
        } 
    } 

調(diào)用：
this._fnMove=Bind(this,this.move,i);//this.move是我定義的一個(gè)成員函數(shù),封裝在類(lèi)中
//this.elems[i].onclick=this._fnMove;//吧上面那句話(huà)換成這句話(huà)也是可以的，只不過(guò)，onclick事件就被替換為this._fnMove，而不是添加this._fnMove進(jìn)去
addEventHandler(this.elems[i],"click",this._fnMove);
這樣就OK了~
PS.call()也是基本相同的功能，但具體參數(shù)不一樣
2.setInterval問(wèn)題
1）與setTimeout的區(qū)別
在一般情況下，setTimeout僅執(zhí)行一次，（當(dāng)然，如果在一個(gè)函數(shù)里反復(fù)調(diào)用setTimeout,就可以重復(fù)執(zhí)行了）而 setInterval是可以重復(fù)執(zhí)行的，直到clearIntercal()
2）在IE下不兼容問(wèn)題
這個(gè)問(wèn)題折磨了我50%的時(shí)間，哦買(mǎi)噶，以后是不是要半生都浪費(fèi)在跟IE干仗上了。。。
本來(lái)，在chrome,ff,safari上都運(yùn)行的很好，我相當(dāng)激動(dòng)，以至于遺忘了IE。。。后來(lái)在IE上一試，結(jié)果，完了，修改，google（此處為動(dòng)詞，嘿嘿）,基本上花了大半天時(shí)間吧，終于搞定。之前，語(yǔ)句是這樣的：this.timer=setInterval(this.unfold,5,this.divs[index],this);結(jié)果在IE下完全不好使。最后，在某位大俠的文章里面看到如下描述：在IE下，setTimeout和setInterval是不支持參數(shù)傳遞的.問(wèn)題很快就解決掉了，果然是我太菜了~
解決問(wèn)題的函數(shù)如下：

復(fù)制代碼代碼如下:

 
var mySetInterval = setInterval; 
window.setInterval = function(callback, interval) 
{ 
var args = Array.prototype.slice.call(arguments, 2); 
function callFn(){callback.apply(null, args);} 
return mySetInterval(callFn, interval); 
} 

var mySetTimeOut = setTimeout; //修改setInterval 
window.setTimeout = function(callback, timeout) 
{ 
var args = Array.prototype.slice.call(arguments, 2); 
function callFn(){callback.apply(null, args);} 

然后使用window.setTimeout或window.setInterval調(diào)用就可以了~
我的語(yǔ)句修改如下：
this.timer=window.setInterval(this.unfold,5,this.divs[index],this); //其中，this.divs[index],this是傳遞的兩個(gè)參數(shù)
再次謝謝那位大俠，雖然他不認(rèn)識(shí)我~
目前，在IE中還有點(diǎn)排版的小問(wèn)題，繼續(xù)學(xué)習(xí)~全力兔子！

您可能感興趣的文章: