JavaScript一些基礎技巧和註意事項,你瞭解這些嗎?

JavaScript一些基礎技巧和註意事項,你瞭解這些嗎?總結瞭一些JavaScript在開發編碼中的使用技巧。

一、JavaScript在HTML和XHTML的使用

  使用

上面的這段代碼在HTML中是有效的,但是在XHML則是無效的。因為XHTML是將HTML作為XML的應用而重新定義的一個標準。編寫XHTML代碼的規則規范要比編寫HTML嚴格多,從而也會直接影響到嵌入式的JavaScript的使用。所以上面的代碼中的比較語句 a < b 中的 < 號在XHTML中會被當做一個新的標簽來解析。

解決方法如下:


在XHTML(XML)中,CDATA塊是文檔中的一個特殊區域,它包含瞭不需要解析的任意格式的文本內容,將javascript包裹在CDATA中可以解決在XHTML中無法使用問題,但是若是碰到瞭不兼容的XHTML的瀏覽器,不支持CDATA片段怎麼辦?再使用JavaScript註釋將CDATA標記註釋即可。這種格式在現代的瀏覽器中都可以正常使用瞭。

2. 關於引用外部JavaScript文件的使用


<script type="text/javascript" src="myjs.js" />上面兩種方式,第一種方式在HTML和XHTML中都可以正確解析,但是第二種在HTML中就不能保證可以正確解析瞭,因為第二種語法不符合HTML的規范。(本人之前在做HTML5開發時,確實碰到過這個問題,找瞭好久又對比瞭一下別的頁面,發現就是引用JavaScript的規范不符合導致頁面不可用)所以,規范編寫代碼還是很重要瞭,雖然某些代碼支持多種寫法,比如邏輯判斷 IF 語句的執行語句隻有一行,可以不用花括號{}將執行邏輯包含起來也可以達到我們要的效果,但是為瞭我們能夠更好的理解它的作用范圍和更符合編碼規范,最好還是不要省略花括號。

 

二、JavaScript基礎註意事項和使用技巧

  1.關於分號" ; "的使用說明

var sum=a + b
var diff = a-b;

上面的兩條語句都是可以被正確解析執行的,但是不推薦第一種寫法,我們推薦每條語句的結尾都不要省略分號。

好處有一下三點:

  (1).加上分號可以避免很多錯誤(比如不完整的輸入)

  (2). 方便壓縮代碼(代碼行結尾處沒有分號會導致壓縮錯誤)

  (3). 提升代碼性能,因為這樣解析器就不必要花時間推測應該在哪裡插入分號瞭

 

2.最好不要測試某個特定的浮點數值

var a=0.1;
var b=0.2;
console.log(a+b);    //0.30000000000000004

如上圖,並不是我們期望的0.3。關於浮點值計算產生誤差,是使用基於IEEE754數值的浮點計算的通病(本人沒有看IEEE754是什麼,感興趣的朋友自己查閱一下)。我們隻要記住,在判定浮點數值計算上,千萬不要輕易相信它。

  3. 關於邏輯運算符或者||

或邏輯運算符,兩者有一個是真就會執行代碼塊。我們都知道程序執行時是有順序的。下面的代碼 if 語句中如果 a 是真就不會再次判斷 b 瞭,如果 a 不是真則在接著判斷 b。所以關於使用邏輯運算符或 || ,某些情況下,將我們有把握的條件放在第一個位置,能夠提升代碼的執行效率。

if(a || b){
   .......  
}

另外它還有一種我們常用的賦值模式

var myObj=currentObj || backupObj;

上面代碼的意思是如果currentObj不為null或undefined,則將currentObj賦值給myObj,否則將backupObj賦值給myObj。

 

  4.相等操作符

  相等操作符可以分為兩種,一種是相等(== 和 != ),一種是全等(=== 和 !== )。

  兩者的區別在於相等(==)操作符會先轉換操作數(也就是類型轉換),然後再比較它們的相等性。而全等(===)操作符則不會進行類型轉換,直接比較。參照下面代碼可以看出等於和全等的區別,在實際開發中,為瞭保證數據類型的完整性,推薦使用全等操作符。

var result1=("55"==55);    //true,因為轉換後相等
var resutl2=("55" === 55);  //false,因為不同的數據類型

  5.利用函數的 arguments 參數實現函數重載

由於ECMAScript並沒有函數簽名的特性,所以函數不能重載,不過我們可以利用arguments參數實現函數偽重載

function doAdd(){
    if(arguments.length==1){
        console.log(arguments[0]+10);
    }
    if(arguments.length==2){
        console.log(arguments[0]+arguments[1]);
    }
}

doAdd(10);    //20
doAdd(10,20);  //30

上面的代碼是我們利用arguments參數個數實現瞭對同一函數不同參數列表的重載。當然,我們也可以通過檢查傳入參數的類型來實現不同的操作(這個可以大傢自己練習一下)。

好瞭,上面就是在開發過程中我們經常遇到的一些問題和技巧,相信大傢也是一樣,或者已經從其它的地方有所瞭解。隻要我們保持書寫規范,瞭解部分邏輯的運行機制就可以利用它來優化我們的代碼。

發佈留言