首頁 > web前端 > js教程 > javascript學習總結之js使用技巧_javascript技巧

javascript學習總結之js使用技巧_javascript技巧

WBOY
發布: 2016-05-16 15:41:00
原創
1106 人瀏覽過

1 假如瀏覽器不支援JavaScript怎麼辦?

a.為什麼瀏覽器會不支援?大部分瀏覽器都有停用腳本的功能,例如chrome。

b.在js被停用的情況下要確保網頁仍能實現它的核心功能(關鍵的使用者需求)

範例:在一個新視窗裡開啟鏈接,可以使用BOM的open()方法

 function popUp(winURL) {
   window.open(winURL, "popup", "width=,height=");
 }
登入後複製

具體的js實作有以下幾個方案:

    方案一:使用javascript偽協定:

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

    方案二:使用內嵌的事件處理函數:

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

以上兩種種實作方案,在js被停用時,「在一個新視窗裡開啟連結」這個需求就無法滿足了。所以,不能為了單純使用js而濫用js。下面這個實作方案就為js預留出了退路,也就是所謂平穩退化(留好js被禁後的退路)

   方案三:平穩退化http://www.example.com" onclick="popUp(this.href;return false;)">

2 如何將網頁的架構、內容與JavaScript腳本的動作分開?為什麼要分離開?

a.分工明確,各幹各的,然後才是協作:

網頁結構、內容-由html來做、網頁的樣式-由CSS來做、網頁的行為-由JavaScript來做

b.分離js程式碼其實很簡單,js程式碼不要求事件必須在html中處理,可以在外部js檔案裡將一個事件加入到html文檔中的某個元素上。例如:

 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 瀏覽器的相容性問題

    新舊要全拿,特別要注意舊的,即向後相容。不同的瀏覽器對js的支援程度不一樣,例如

document.getElementsByClassName(classname)IE6就不支持,加上一個檢查語句就可以檢查相容性問題:if(!document.getElementsByClassName) return false;

4 效能考量

為什麼要考慮腳本執行的效能?效能是永遠要考慮的問題,這涉及到你編寫的網頁能否順利的載入。

如何保證腳本執行的效能是最優的?

a.盡量少訪問dom和少使用標記,例如:少用循環遍歷
 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程式碼),減少頁面載入時發送的請求數量;將<script>標籤放置於文件結尾,在</script>
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板