每日十條JavaScript經驗技巧(一)_基礎知識

來源:互聯網
上載者:User

1. 不使用script自閉合標籤

script中使用自閉合標籤,雖然他在XHTML中合法,但是不符合HTML規範,而且得不到某些瀏覽器的正確解析。我曾經就在引入EXT時使用此方式,導致無法正確執行指令碼。

<script src="example.js"/> --> <script src="example.js"></script>

2. 將指令碼放到</body>前面

如果將指令檔放到<head>中去,則在顯示頁面前先得下載執行指令碼,增加了使用者等待的時間。樣式表放在<head>中防止內容顯示不正常。一般方式如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="theme.css" /></head><body> <!-- html代碼 --> <script src="example.js"/></body></html>

3. 在函數內使用strict 模式

如果在函數外部使用strict 模式,則有可能會使第三方類庫,和同事的代碼不能正常工作,在函數內部則只能影響自己的代碼,不至於影響到別人的代碼。

function myfunction(){ "use strict"; //函數代碼}

4. 不要省略語句結尾的分號

代碼結尾處沒有分號容易引起壓縮錯誤,另外在某些情況下可以增進代碼的效能,應為解譯器不比在花時間推測在什麼地方插入分號。還有一種更常見的問題就是,自動插入分號有時會出錯,所以並不建議省略分號。

5. 使用var定義變數

定義變數時使用var關鍵字,並且全部提前至函數的最開始。
這樣做的好處就會避免無意識的建立出全域變數,而且讓你的代碼更容易理解。

function myfunction(){ var result = 10 + value; var value = 10; return result;}

這個函數文法上是沒有問題的,但是不是很直觀,不符合人的邏輯,修改如下會更好:

 funciton myfunction(){  var result;  var value;  result = 10 + value;  value = 10;  return result; }

給大家解釋一下,上面兩個代碼是等價的,result的值都是NAN.JavaScript會把函數內所有的變數聲明提升到函數的最開始,代碼一在代碼執行時會變成代碼二的樣子,當運行到result = 10 + value;時,value的值為undefined,和10相加為NAN,然後value被賦值為10。

關於全域變數帶來的問題,大家想必也比較清楚,不然也不會出現命名空間的概念。

6. 函數先聲明再使用

和變數聲明一樣,函式宣告也會被JavaScript引擎提前,因此在代碼中,函數的調用可以出現在函數的聲明之前。 還有一點值得注意,函式宣告不應該出現在語句塊之內,比如:

if (condition) { function myfunction(){  alert("true"); }}else{ function myfunction(){  alert("false"); }}myfunction();

運行代碼我們發現會輸出會和瀏覽器有關,在Chrome 51和Firefox 46輸出true,IE 10下輸出false。所以盡量避免在語句塊中聲明函數。

7. 慎用typeof underfined null判斷

null是一個特殊值,我們經常和undefined混淆,下列情境應使用null:

  1. 用來初始化一個變數,這個變數可能賦值為一個對象。
  2. 用來和一個已經初始化的變數比較。
  3. 當函數的參數期望傳入對象時,用作參數傳入。
  4. 當函數的傳回值期望是對象時,用作傳回值傳出。

下面一些情況不應該使用null:

  1. 不要使用null來檢查是否傳入了某個參數。
  2. 不要用null來檢查一個變數是不是初始化。

理解null最好的方式是將他當做對象的預留位置。我們經常將null和undefined搞混的原因是我們認為null和undefined都是變數未初始化,但是只有undefin代表一個變數還沒有被初始化,null代表初始化為對象。看如下代碼:

var person;console.log(typeof person);  //undefinedconsole.log(typeof foo);   //undefinedvar house = null;console.log(typeof house);  //object

所以盡量不要用typeof判斷變數是否初始化,你並不能確定是變數不存在還是變數未初始化,返回null是你也不能確定變數有沒有被正確的賦值,所以小心使用typeof。

8. 小心使用Number類型

想必大家也知道JavaScript整數支援十進位,八進位,和十六進位的字面值。八進位中如果字面值中的數值超過了範圍,那麼前置字元為零將會被忽略,後面的數值當做十進位解析。

console.log(012);    //10
console.lgo(082);    //82

如果將八進位和十六進位用於小數則會語法錯誤。還有一點,八進位字面量在strict 模式下是無效的。 關於浮點數計算誤差的問題大家也都清楚,凡是基於IEEE754數值的浮點計算都是這樣,所以永遠不要測試某個特定的浮點數值。
在數實值型別中有一個比較特殊的值,NaN(Not a Number),這個數值用於表示本來應該返回數值但是返回的不是數實值型別。NaN和任何值都不相等,包括NaN本身。我們可以用isNaN()函數測試。

9. 使用邏輯運算動態賦值

大家比較喜歡的操作

var person={  age:10}var condition;var myVar = condition && person;alert(myVar)

如果condition轉為boolean類型為false,則myVar = condition,若為true,則myVar = person。

var person={    age:10  }var condition;var myVar = condition || person;  alert(myVar)

如果condition轉換為boolean為true,則myVar = condition,若為false,則myVar = person。

10. 不使用with語句

不使用with的一個重要原因是,在strict 模式下文法本身就是禁用with語句的,這也表明ECMAScript委員會確信不應使用with。我們看如下例子:

var book = { title : "Maintainable JavaScript", author: "Nicholas C. Zakas"};var message = "The book is ";with(book) { message += title; message += "by " + author;}

上述代碼的問題在於我們很難分辨title和author出現的位置,也難分辨出message到地址一個局部變數還是book的一個屬性,而且JavaScript引擎和壓縮公用程式無法對這段代碼進行最佳化,應為它們無法猜出代碼的正確含義。

好了,已經十條了,我們下一個十條再見。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.