javascript學(xué)習(xí)總結(jié)之js使用技巧

更新時(shí)間：2015年09月02日 09:53:55 投稿：mrr

本篇文章給大家分享javascript學(xué)習(xí)總結(jié)之js使用技巧，都是精華喔～小伙伴快來(lái)學(xué)習(xí)吧。

1 假如瀏覽器不支持JavaScript怎么辦？

a.為什么瀏覽器會(huì)不支持？大部分瀏覽器都有禁用腳本的功能，例如chrome。

b.在js被禁用的情況下要保證網(wǎng)頁(yè)仍能實(shí)現(xiàn)它的核心功能（關(guān)鍵的用戶需求）

例子：在一個(gè)新窗口里打開鏈接，可以使用BOM的open()方法

 function popUp(winURL) {
   window.open(winURL, "popup", "width=,height=");
 }

具體的js實(shí)現(xiàn)有以下幾個(gè)方案：

方案一：使用javascript偽協(xié)議：

<a href="javascript:popUp('http://www.example.com');return false;">Example</a>

方案二：使用內(nèi)嵌的事件處理函數(shù)：

<a href="#" onclick="popUp('http://www.example.com');return false;"></a>

以上兩種種實(shí)現(xiàn)方案，在js被禁用時(shí)，“在一個(gè)新窗口里打開鏈接”這個(gè)需求就無(wú)法滿足了。所以，不能為了單純使用js而濫用js。下面這個(gè)實(shí)現(xiàn)方案就為js預(yù)留出了退路，即所謂平穩(wěn)退化（留好js被禁后的退路）

方案三：平穩(wěn)退化<a href="

2 如何將網(wǎng)頁(yè)的結(jié)構(gòu)、內(nèi)容與JavaScript腳本的動(dòng)作分離開？為什么要分離開？

a.分工明確，各干各的，然后才是協(xié)作：

網(wǎng)頁(yè)結(jié)構(gòu)、內(nèi)容-由html來(lái)做、網(wǎng)頁(yè)的樣式-由CSS來(lái)做、網(wǎng)頁(yè)的行為-由JavaScript來(lái)做

b.分離js代碼其實(shí)很簡(jiǎn)單，js代碼不要求事件必須在html中處理，可以在外部js文件里將一個(gè)事件添加到html文檔中的某個(gè)元素上。例如：

 window.onload = paperLinks
   function paperLinks() {
   var links = document.getElementsByTagName("a");
     for (var i=; i<links.length;i++){
     if (links[i].getAttribute == "popup") {
       linnks[i].onclick = function() {
         popUp(this.getAttribute("href"));
         return false;
       }
     }
    }
  }

3 瀏覽器的兼容性問(wèn)題

新老要通吃，尤其要注意老的，即向后兼容。不同的瀏覽器對(duì)js的支持程度不一樣，比如

document.getElementsByClassName(classname)IE6就不支持，加一個(gè)檢查語(yǔ)句就可以檢查兼容性問(wèn)題：if(!document.getElementsByClassName) return false;

4 性能考慮

為什么要考慮腳本執(zhí)行的性能？性能是永遠(yuǎn)要考慮的問(wèn)題，這涉及到你編寫的網(wǎng)頁(yè)能否順利的加載。

如何保證腳本執(zhí)行的性能是最優(yōu)的？

a.盡量少訪問(wèn)dom和少使用標(biāo)記，例如：少用循環(huán)遍歷

 var links = document.getElementsByTagName("a");
   if (links.length > ) {
     for (var i=; i<links.length; i++) {
     //......
   }
 }

就要比下面的代碼性能要好

 if (document.getElementsByTagName("a").length > ) {
   var links = document.getElementsByTagName("a");
   for (var i=; i<links.length; i++) {
   //......
   }
 }

b.合并腳本(js代碼)，減少頁(yè)面加載時(shí)發(fā)送的請(qǐng)求數(shù)量；將<script>標(biāo)簽放置于文檔末尾，在</body>結(jié)束之前，這樣可以讓頁(yè)面加載的快些，且不影響js的加載。

c.壓縮腳本，將js代碼中不必要的空格、注釋刪除，甚至可以將變量名簡(jiǎn)化。可以準(zhǔn)備兩個(gè)版本的js：一個(gè)是工作版本，用于修改代碼和注釋，另一個(gè)為精簡(jiǎn)版本，則用于發(fā)布。

javascript對(duì)象