最新的Web開發教程
 

JavaScript最佳實踐


避免全局變量,避免new ,忌== ,避免eval()


避免全局變量

盡量少使用全局變量。

這包括所有的數據類型,對象和功能。

全局變量和函數可以被其他腳本覆蓋。

使用局部變量代替,並學習如何使用閉包


始終聲明局部變量

在函數中使用的所有變量應聲明為局部變量。

局部變量必須在聲明var關鍵字,否則會成為全局變量。

嚴格模式不允許未聲​​明的變量。


在最前的聲明

這是一個很好的編碼習慣把所有的聲明在每個腳本或函數的頂部。

這會:

  • 給予更清晰的代碼
  • 提供一個單一的地方去尋找局部變量
  • 使其更容易避免不必要的(隱含的)全局變量
  • 減少不必要的重新聲明的可能性
// Declare at the beginning
var firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price * 100 / discount;

這還要為循環變量:

// Declare at the beginning
var i;

// Use later
for (i = 0; i < 5; i++) {

默認情況下,JavaScript的移動所有聲明頂端(JavaScript的提升)。


初始化變量

這是一個良好的編碼習慣,當你聲明它們初始化變量。

這會:

  • 給予更清晰的代碼
  • 提供一個地方初始化變量
  • 避免不確定的值
// Declare and initiate at the beginning
var firstName = "",
    lastName = "",
    price = 0,
    discount = 0,
    fullPrice = 0,
    myArray = [],
    myObject = {};

初始化變量提供的預期用途的想法(和預期的數據類型)。


永遠不要聲明數字,字符串或布爾對象

始終將數字,字符串或布爾值作為原始值。 不作為對象。

聲明這些類型為對象,減慢執行速度,並產生討厭的副作用:

var x = "John";             
var y = new String("John");
(x === y) // is false because x is a string and y is an object.
試一試»

或者更糟:

var x = new String("John");             
var y = new String("John");
(x == y) // is false because you cannot compare objects.
試一試»

不要使用new Object()

  • 使用{}而不是new Object()
  • 使用""而不是new String()
  • 使用0 ,而不是new Number()
  • 使用false ,而不是new Boolean()
  • 使用[]而不是new Array()
  • 使用/()/ ,而不是new RegExp()
  • 使用function (){}而不是new Function()

var x1 = {};           // new object
var x2 = "";           // new primitive string
var x3 = 0;            // new primitive number
var x4 = false;        // new primitive boolean
var x5 = [];           // new array object
var x6 = /()/;         // new regexp object
var x7 = function(){}; // new function object
試一試»

謹防自動類型轉換的

要注意的是號碼可以不小心將它轉換為字符串或NaN (不是數字)。

JavaScript是弱類型。 變量可以包含不同的數據類型,和可變可以改變它的數據類型:

var x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number
試一試»

在做數學運算,JavaScript可以數字轉換為字符串:

var x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
var x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
var x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
var x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
var x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
var x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
var x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number
試一試»

減去一個字符串的字符串,不會產生錯誤,但返回NaN (不是數字):

"Hello" - "Dolly"    // returns NaN
試一試»

使用===比較

==比較操作總是比較之前轉換(匹配類型)。

===值和類型的運營商的力量對比:

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false
試一試»

使用默認參數

如果一個函數被調用了失踪的說法,缺少的參數的值設置為undefined

未定義值可以破壞你的代碼。 這是默認值分配給參數的好習慣。

function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }
}
試一試»

了解更多關於函數的參數和參數的功能參數


結束您與默認設置開關

最後總是用默認的switch語句。 即使你認為有沒有必要為它。

switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
        break;
    default:
        day = "Unknown";
}
試一試»

避免使用eval()

eval()函數用來運行文本代碼。 在幾乎所有的情況下,它不應該是必要使用它。

因為它允許運行任意代碼,它也代表一個安全問題。