JavaScript中DOM詳解
為了達(dá)到平穩(wěn)退化,向后兼容,標(biāo)記分離的思想,每次寫js代碼時(shí)做的第一件事應(yīng)該是必要的測(cè)試和檢查工作:
在js文件里首先添加以下代碼進(jìn)行檢查:
window.onload = function(){ if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; if(!document.getElementsByClassName) return false; if(!document.getElementById("selector")) return false; if(!document.getElementsByTagName("tag")) return false; if(!document.getElementsByClassName("selector")) return false; };
通用封裝函數(shù):
var $ = function(id){ return document.getElementBy Id (id); } var addEvent = function(obj,event,fn){ //obj:元素對(duì)象名字,event:綁定事件,fn:觸發(fā)的回調(diào)函數(shù) if(obj.addEventListener){ obj.addEventListener(event,fn,false); } else if(obj.attachEvent){ obj.attachEvent("on"+event,fn); } }
對(duì)于很多函數(shù)需要頁面加載即運(yùn)行,window.onload封裝方法如下:
function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != "function") { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } addLoadEvent(firstFunction); addLoadEvent(secondFunction);
火狐和IE之間的JavaScript差異:
1、在大多數(shù)情況下,為事件處理函數(shù)返回false,可以防止默認(rèn)的事件行為.例如,默認(rèn)情況下點(diǎn)擊一個(gè)a元素,頁面會(huì)跳轉(zhuǎn)到該元素href屬性指定的頁。
return false 就相當(dāng)于終止符,return true 就相當(dāng)于執(zhí)行符。
在js中對(duì)于return用法的三種景象的總結(jié)如下:
retrun true; 返回正確的處理懲罰成果。
return false;返回錯(cuò)誤的處理懲罰成果;終止處理懲罰;阻攔提交表單;阻攔履行默認(rèn)的行動(dòng)。
return;把把握權(quán)返回給頁面。
2、在絕大多數(shù)時(shí)候,把一個(gè)函數(shù)調(diào)用賦值給一個(gè)變量將是一個(gè)好主意。
3、noscript標(biāo)簽可被用于可識(shí)別 script標(biāo)簽但無法支持其中的腳本的瀏覽器。如果瀏覽器支持腳本,那么它不會(huì)顯示出 noscript 標(biāo)簽中的文本。
4、在動(dòng)態(tài)設(shè)置樣式時(shí),只要有可能,最好選用CSS,最簡單的就是選擇最容易實(shí)現(xiàn)的方法。
5、在一個(gè)函數(shù)中會(huì)用到全局對(duì)象存儲(chǔ)為局部變量來減少全局查找,因?yàn)樵L問局部變量的速度要比訪問全局變量的速度更快些。
6、如果針對(duì)的是不斷運(yùn)行的代碼,不應(yīng)該使用setTimeout,而應(yīng)該是用setInterval,因?yàn)閟etTimeout每一次都會(huì)初始化一個(gè)定時(shí)器,而setInterval只會(huì)在開始的時(shí)候初始化一個(gè)定時(shí)器。
7、如果要連接多個(gè)字符串,應(yīng)該少使用+= ,條件分支時(shí)盡量使用三目運(yùn)算符替代條件分支。
8、很多人喜歡使用parseInt(),其實(shí)parseInt()是用于將字符串轉(zhuǎn)換成數(shù)字,而不是浮點(diǎn)數(shù)和整型之間的轉(zhuǎn)換,我們應(yīng)該使用Math.floor()或者M(jìn)ath.round()。
9、在JavaScript中所有變量都可以使用單個(gè)var語句來聲明,這樣就是組合在一起的語句,以減少整個(gè)腳本的執(zhí)行時(shí)間。
10、對(duì)于大的DOM更改,使用innerHTML要比使用標(biāo)準(zhǔn)的DOM方法創(chuàng)建同樣的DOM結(jié)構(gòu)快得多。
11、當(dāng)同一個(gè)對(duì)象使用.onclick的寫法觸發(fā)多個(gè)方法的時(shí)候,后一個(gè)方法會(huì)把前一個(gè)方法覆蓋掉,也就是說,在對(duì)象的onclick事件發(fā)生時(shí),只會(huì)執(zhí)行最后綁定的方法。而用事件監(jiān)聽則不會(huì)有覆蓋的現(xiàn)象,每個(gè)綁定的事件都會(huì)被執(zhí)行。
12、如果定義了toString()方法來進(jìn)行類型轉(zhuǎn)換的話,推薦顯式調(diào)用toString(),因?yàn)閮?nèi)部的操作在嘗試所有可能性之后,會(huì)嘗試對(duì)象的toString()方法嘗試能否轉(zhuǎn)化為String,所以直接調(diào)用這個(gè)方法效率會(huì)更高。
13、因?yàn)閑lemet.style只能獲取內(nèi)聯(lián)樣式,而element.currentStyle.width是IE瀏覽器專有屬性,getComputedStyle(element, null).width是火狐和Chrome瀏覽器的特有屬性,所以為了兼容,獲取內(nèi)外樣式方法如下(不可取復(fù)合樣式,如background,border,而是應(yīng)該寫成backgroundColor,borderWidth):
function getStyle(obj,name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj,null)[name]; } }
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
javascript實(shí)現(xiàn)的圖片預(yù)覽和上傳功能示例【兼容IE 9】
這篇文章主要介紹了javascript實(shí)現(xiàn)的圖片預(yù)覽和上傳功能,結(jié)合實(shí)例形式分析了javascrpt圖片預(yù)覽和上傳功能相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05Mint-UI時(shí)間組件起始時(shí)間問題及時(shí)間插件使用
這篇文章主要介紹了Mint-UI時(shí)間組件起始時(shí)間問題的解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08BootstrapTable+KnockoutJS自定義T4模板快速生成增刪改查頁面
這篇文章主要介紹了BootstrapTable+KnockoutJS自定義T4模板快速生成增刪改查頁面 的相關(guān)資料,需要的朋友可以參考下2016-08-0830分鐘快速實(shí)現(xiàn)小程序語音識(shí)別功能
最近需要在小程序上實(shí)現(xiàn)語音識(shí)別,將需要用到的功能都總結(jié)下,供大家參考。語音識(shí)別用的是科大訊飛,文中給出了詳細(xì)的實(shí)現(xiàn)方法介紹,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11JS實(shí)現(xiàn)判斷移動(dòng)端PC端功能
這篇文章主要介紹了JS實(shí)現(xiàn)判斷移動(dòng)端PC端功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02JavaScript前端靜態(tài)資源預(yù)加載實(shí)現(xiàn)示例
這篇文章主要為大家介紹了JavaScript前端靜態(tài)資源預(yù)加載實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11js循環(huán)map 獲取所有的key和value的實(shí)現(xiàn)代碼(json)
這篇文章主要介紹了js循環(huán)map 獲取所有的key和value的實(shí)現(xiàn)代碼(json),需要的朋友可以參考下2018-05-05