JavaScript 學習筆記 Black.Caffeine 09.11.28
更新時間:2009年11月30日 22:20:54 作者:
這兩天終于寫出了一個個人認為真正意義上的作業(yè)了,不過,最大感受就是。。。IE太垃圾了。。。so,這個作業(yè)實際上也沒有完成的很完美,因為,在IE上還是有兼容性的問題存在,不錯,就此先自我總結(jié)一下吧~免得以后又忘了~
1. 之前寫的一直都是分散的函數(shù),用到什么功能,就寫什么函數(shù),覺得不夠整潔,所以這次寫的是封裝的類,用起來還不錯,但是傳遞參數(shù)的時候遇到了不少問題,所以,查閱了很多資料,總結(jié)如下:
1)動態(tài)綁定事件問題:
需要將onclick事件綁定到對象上,比如列表項。需要用到addEventListener或者attachEvent,用于吧函數(shù)操作添加到事件中去,而不是覆蓋,但是,attachEvent不支持FF,F(xiàn)F只能用addEventListener。so,就需要一個函數(shù),把它們倆給綜合起來,于是乎,這個函數(shù)誕生了:
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ù)問題:
由于我吧函數(shù)和屬性都封裝到了一個類里面,所以在綁定onclick之類的事件是,就會產(chǎn)生一個問題,比如,addEventHandler(this.elems[i],"click",this.Move);,這樣就出錯了,因為在onclick事件發(fā)生的時候,調(diào)用的this就不是指向這個封裝的類了,于是乎,就需要用到apply()了~——應(yīng)用某一對象的一個方法,用另一個對象替換當前對象。具體格式我就不用說了,網(wǎng)上一大堆~函數(shù):
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是我定義的一個成員函數(shù),封裝在類中
//this.elems[i].onclick=this._fnMove;//吧上面那句話換成這句話也是可以的,只不過,onclick事件就被替換為this._fnMove,而不是添加this._fnMove進去
addEventHandler(this.elems[i],"click",this._fnMove);
這樣就OK了~
PS.call()也是基本相同的功能,但具體參數(shù)不一樣
2.setInterval問題
1)與setTimeout的區(qū)別
在一般情況下,setTimeout僅執(zhí)行一次,(當然,如果在一個函數(shù)里反復(fù)調(diào)用setTimeout,就可以重復(fù)執(zhí)行了)而 setInterval是可以重復(fù)執(zhí)行的,直到clearIntercal()
2)在IE下不兼容問題
這個問題折磨了我50%的時間,哦買噶,以后是不是要半生都浪費在跟IE干仗上了。。。
本來,在chrome,ff,safari上都運行的很好,我相當激動,以至于遺忘了IE。。。后來在IE上一試,結(jié)果,完了,修改,google(此處為動詞,嘿嘿),基本上花了大半天時間吧,終于搞定。 之前,語句是這樣的:this.timer=setInterval(this.unfold,5,this.divs[index],this);結(jié)果在IE下完全不好使。最后,在某位大俠的文章里面看到如下描述:在IE下,setTimeout和setInterval是不支持參數(shù)傳遞的.問題很快就解決掉了,果然是我太菜了~
解決問題的函數(shù)如下:
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)用就可以了~
我的語句修改如下:
this.timer=window.setInterval(this.unfold,5,this.divs[index],this); //其中,this.divs[index],this是傳遞的兩個參數(shù)
再次謝謝那位大俠,雖然他不認識我~
目前,在IE中還有點排版的小問題,繼續(xù)學習~全力兔子!
1)動態(tài)綁定事件問題:
需要將onclick事件綁定到對象上,比如列表項。需要用到addEventListener或者attachEvent,用于吧函數(shù)操作添加到事件中去,而不是覆蓋,但是,attachEvent不支持FF,F(xiàn)F只能用addEventListener。so,就需要一個函數(shù),把它們倆給綜合起來,于是乎,這個函數(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ù)問題:
由于我吧函數(shù)和屬性都封裝到了一個類里面,所以在綁定onclick之類的事件是,就會產(chǎn)生一個問題,比如,addEventHandler(this.elems[i],"click",this.Move);,這樣就出錯了,因為在onclick事件發(fā)生的時候,調(diào)用的this就不是指向這個封裝的類了,于是乎,就需要用到apply()了~——應(yīng)用某一對象的一個方法,用另一個對象替換當前對象。具體格式我就不用說了,網(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是我定義的一個成員函數(shù),封裝在類中
//this.elems[i].onclick=this._fnMove;//吧上面那句話換成這句話也是可以的,只不過,onclick事件就被替換為this._fnMove,而不是添加this._fnMove進去
addEventHandler(this.elems[i],"click",this._fnMove);
這樣就OK了~
PS.call()也是基本相同的功能,但具體參數(shù)不一樣
2.setInterval問題
1)與setTimeout的區(qū)別
在一般情況下,setTimeout僅執(zhí)行一次,(當然,如果在一個函數(shù)里反復(fù)調(diào)用setTimeout,就可以重復(fù)執(zhí)行了)而 setInterval是可以重復(fù)執(zhí)行的,直到clearIntercal()
2)在IE下不兼容問題
這個問題折磨了我50%的時間,哦買噶,以后是不是要半生都浪費在跟IE干仗上了。。。
本來,在chrome,ff,safari上都運行的很好,我相當激動,以至于遺忘了IE。。。后來在IE上一試,結(jié)果,完了,修改,google(此處為動詞,嘿嘿),基本上花了大半天時間吧,終于搞定。 之前,語句是這樣的:this.timer=setInterval(this.unfold,5,this.divs[index],this);結(jié)果在IE下完全不好使。最后,在某位大俠的文章里面看到如下描述:在IE下,setTimeout和setInterval是不支持參數(shù)傳遞的.問題很快就解決掉了,果然是我太菜了~
解決問題的函數(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)用就可以了~
我的語句修改如下:
this.timer=window.setInterval(this.unfold,5,this.divs[index],this); //其中,this.divs[index],this是傳遞的兩個參數(shù)
再次謝謝那位大俠,雖然他不認識我~
目前,在IE中還有點排版的小問題,繼續(xù)學習~全力兔子!
您可能感興趣的文章:
- 詳解高性能緩存Caffeine原理及實戰(zhàn)
- SpringBoot集成Caffeine緩存的實現(xiàn)步驟
- SpringBoot+SpringCache實現(xiàn)兩級緩存(Redis+Caffeine)
- Spring Boot 2.x 把 Guava 干掉了選擇本地緩存之王 Caffeine(推薦)
- Springboot Caffeine本地緩存使用示例
- Spring Boot緩存實戰(zhàn) Caffeine示例
- spring boot+spring cache實現(xiàn)兩級緩存(redis+caffeine)
- 詳細介紹高性能Java緩存庫Caffeine
- 輕松了解java中Caffeine高性能緩存庫
相關(guān)文章
javascript的數(shù)組和常用函數(shù)詳解
這篇文章主要介紹了javascript的數(shù)組和常用函數(shù)詳解,非常詳細,適合新手學習,需要的朋友可以參考下2014-05-05javascript中apply、call和bind的使用區(qū)別
下面小編就為大家?guī)硪黄猨avascript中apply、call和bind的使用區(qū)別。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-04-04javascript對象之內(nèi)置對象Math使用方法
Math對象的一些方法能實現(xiàn)我們課本上的某些數(shù)學計算,比較常用的方法有如下幾個2010-04-04actionscript與javascript的區(qū)別
actionscript是flash的腳本語言,目前已經(jīng)由adobe公司升級到3.0版本,成為了真正意義的oop語言,JavaScript是由netscape工程師設(shè)計完成的一門腳本語言,用于web開發(fā)的前端腳本2011-05-05簡單談?wù)凧avascript函數(shù)中的arguments
在JavaScript中,arguments對象是比較特別的一個對象,實際上是當前函數(shù)的一個內(nèi)置屬性。下面這篇文章主要介紹了關(guān)于Javascript函數(shù)中的arguments面貌以及如何轉(zhuǎn)化為數(shù)組的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-02-02