• JS特效 http://www.it165.net/js/
  • 128彩票官网

    發布日期︰2020-02-20 06:58:00


      今天又到了(liao)分(fen)享時(shi)刻,我相信各位忠實的(de)網友朋友們(men)已經(jing)大概(gai)了(liao)解我們(men)網站的(de)日常運作(zuo)了(liao),我們(men)網站會時(shi)不時(shi)地將(jiang)一些集(ji)合和匯總總體的(de)分(fen)析以後然後分(fen)享給(gei)各位小伙伴們(men),這是非常的(de)珍貴的(de)資訊哦,今天的(de)內(na)容是關于JS特效代碼日常技(ji)巧(qiao)的(de)集(ji)合。

      1. 避(bi)免鏈(lian)式(shi)聲明

      後果︰可能引入全局zhi)淞/p>

      //錯誤的(de)寫法(fa) var a = b = 0;

      這段(duan)代碼中(zhong),b實際上被聲明為(wei)全局zhi)淞俊Ryin)為(wei)操作(zuo)符優先級是是從右往(wang)左,所以該語句相當于:

      var a = (b = 0)

      此時(shi)b未聲明就被直(zhi)接賦值,所以b成了(liao)全局zhi)淞/p>

      2. 單一var原則

      這條規則的(de)意思是,把(ba)函數內(na)部的(de)所有(you)變量,放到頂部聲明。比如(ru)︰

      //示例 function A(){ var a = 1, b = 2, c = a + b ; }

      優點(dian)︰

      便于查找函數內(na)部使用的(de)局部變量

      防止變量未定義時(shi)就被使用

      防止變量聲明提升後引發的(de)誤解

      關于第三點(dian),這里舉個例子說明︰

      var x = 1; function A(){ console.log(x);//第一處輸出 ,注意結(jie)果 var x = 2; console.log(x);//第二處輸出 2,沒(mei)問(wen)題 }

      從代碼上看,第二處輸出肯定沒(mei)問(wen)題,可能會有(you)人認為(wei)第一處輸出的(de)是1,因(yin)為(wei)此時(shi)在函數內(na)部還(huai)沒(mei)聲明變量x,根據(ju)作(zuo)用域(yu)鏈(lian),向外層(ceng)查找的(de)話,x值為(wei)1。但(dan)是實際輸出的(de)值應該是undefined,因(yin)為(wei)js允許在函數任(ren)何地方聲明變量,並且無(wu)論在哪里聲明都等(deng)同于在頂部聲明,這就是qiao)魈嶸K隕廈mian)的(de)代碼相當于:

      var x = 1; function A(){ var x;//提升到頂部 console.log(x);//此時(shi)已聲明 未賦值 x = 2;//賦值 console.log(x); }

      3. 使用for循(xun)環時(shi),緩存長度值

    技(ji)巧(qiao)

      通常用使用for循(xun)環遍(bian)歷(li)數組時(shi),會采用以下寫法(fa)︰

      for(var i = 0;i

      這段(duan)代碼存在的(de)問(wen)題在于,在循(xun)環fan)拿mei)個迭代步驟,都必須(xu)訪問(wen)一次arr的(de)長度。如(ru)果arr是靜態數值還(huai)好,但(dan)是我們(men)在使用js時(shi)可能會踫(peng)到arr是dom元素對象,由于dom對象載頁面(mian)下是活動的(de)查詢(xun),這個長度查詢(xun)就相當耗(hao)時(shi),

      //用len緩存長度值for(var i = 0,len = arr.length;i

      按照(zhao)上面(mian)的(de)代碼,我們(men)在第一次獲(huo)取長度值時(shi)就緩存這個長度值,就可以避(bi)免上述問(wen)題。

      4. 使用for-in時(shi),增加hasOwnProperty()判斷

      for-in通常用來枚舉對象的(de)屬性和tou)椒fa),但(dan)是這個方法(fa)會枚舉範duan)? 韻蠛投韻蟺de)nao) 投韻對原型對象不了(liao)解的(de)可以看看我之前寫的(de)文(wen)章傳送門)此時(shi),利用hasOwnProperty()方法(fa)可以幫我們(men)過濾(lv)出只(zhi)在對象本身上的(de)屬性和tou)椒fa),或者(zhe)只(zhi)在原型鏈(lian)的(de)屬性和tou)椒fa)

      for(var key in obj){ if(obj.hasOwnProperty(key)){ // 對象本身的(de)屬性或者(zhe)方法(fa) } else{ // 原型鏈(lian)的(de)屬性和tou)椒fa) }}/* 下面(mian)是一個具(ju)體的(de)例子 */ function A(name){ this.type = 'A類'; this.name = name '未命(ming)名'}var a = new A('a');function B(name){ this.subtype = 'B類';}// 建立原型鏈(lian)B.prototype = a;B.prototype.sayHello = function(){}var b = new B();// 遍(bian)歷(li)屬性for(var key in b){ //對象自身屬性 if(b.hasOwnProperty(key)){ console.log('對象自身的(de)屬性或方法(fa):'+key) } //上述表達式(shi)的(de)另一種zhong)捶fa) if(B.prototype.hasOwnProperty.call(b,key)){ console.log('對象自身的(de)屬性或方法(fa):'+key) } else { console.log('原型鏈(lian)的(de)屬性或方法(fa):'+key) }}

      5. 使用===代替==

      這個算是比較常見的(de)了(liao),因(yin)為(wei)js在做(zuo)比較判斷時(shi),會執行(xing)強制類型轉換,比如(ru)false == 0返(fan)回true這樣的(de)情況,使用===可以執行(xing)嚴格(ge)的(de)等(deng)價(jia)比較,更(geng)易于閱讀(du)代碼(後來閱讀(du)的(de)人就不需要判斷這個是遺漏還(huai)是故意使用men)恐評嘈妥 患jian)寫)

      6. 使用parseInt()時(shi),帶(dai)上第二個參wen)/p>

      parseInt()用于從字(zi)符串中(zhong)獲(huo)取數值,第二個參wen)斫默認是10。我們(men)在使用的(de)時(shi)候可能習慣性忽略這個參wen) dan)是在一些情況下會有(you)問(wen)題︰當字(zi)符串的(de)開頭(tou)為(wei)0時(shi),在es3里會被當做(zuo)是八進制,es5里面(mian)仍然當做(zuo)10進制,為(wei)了(liao)代碼的(de)一致性以及(ji)避(bi)免不必要的(de)失誤,應該每(mei)次wen)褂檬shi)都帶(dai)上參wen)

      var x = parseInt('089',10);//使用時(shi)都帶(dai)上進制參wen)/p>

      7. 大括號(hao)的(de)使用

      大括號(hao)的(de)使用主要是2個方面(mian)︰

      第1,不要省略大括號(hao),即使可以忽略,比如(ru)︰

      for(var i =1;i<10 ;i++) console.log(i) //此處原則上可以忽略大括號(hao)

      上述語句並沒(mei)有(you)問(wen)題,但(dan)是如(ru)果後期函數體內(na)增加了(liao)其他(ta)語句的(de)時(shi)候,很容易忘(wang)記補上大括號(hao),因(yin)此建議(yi)都帶(dai)上大括號(hao);

      第2,大括號(hao)的(de)必須(xu)跟在前一個語句的(de)同一行(xing)

      這個地方為(wei)什麼加粗了(liao)si)因(yin)為(wei)這個問(wen)題非常容易被忽略,通常我們(men)都覺得大括號(hao)是跟在語句的(de)同一行(xing)還(huai)是下一行(xing)只(zhi)是習慣問(wen)題,但(dan)是實際上不是的(de)!看下面(mian)這個例子︰

      function func(){ return { name:'xxx' }}var res = func()console.log(res)//輸出undefined

      是不是覺得很奇(qi)怪,看代碼第一感覺應該是輸出一個包含name屬性的(de)對象。請注意,由于js的(de)分(fen)號(hao)插入機制︰如(ru)果語句沒(mei)有(you)使用分(fen)號(hao)結(jie)束,會自動補充分(fen)號(hao),因(yin)此上面(mian)的(de)代碼實際相當于如(ru)下寫法(fa)︰

      function func(){ return undefined;//自動插入分(fen)號(hao) { name:'xxx' }}

      正確fan)男捶fa)應該是︰

      function func(){ return { name:'xxx' }}var res = func()console.log(res)//輸出{name:'xxx'}

      不知道(dao)你看完本篇(pian)文(wen)章以後還(huai)有(you)什麼疑(yi)難之處,如(ru)果你還(huai)有(you)任(ren)何的(de)問(wen)題你可以來資訊duan)頤men)的(de)工(gong)作(zuo)人員,他(ta)們(men)會親力親為(wei)的(de)幫你解決並且分(fen)享給(gei)各位同樣是這種問(wen)題的(de)小伙伴們(men),所以請大家多多支持我們(men)哦。

    • 128彩票官网

    • 128彩票官网

    • 128彩票官网

    • 128彩票官网

    • 128彩票官网

    次元立方 -廣告(gao)服務 -隱私聲明 -版權申明 -免責條款 -網站地圖 -網友投稿 -聯系方式(shi)
    本站內(na)容來自于互聯網,僅供用于網絡技(ji)術學習,學習中(zhong)請遵循(xun)相關法(fa)律法(fa)規
    128彩票官网 | 下一页