JavaScript Best Practices

请避免全局变量、new、===、eval()

避免全局变量

请尽量少地使用全局变量。

它包括所有的数据类型、对象和函数。

全局变量和函数可被其他脚本覆盖。

请使用局部变量替代，并学习如何使用闭包.

始终声明局部变量

所有在函数中使用的变量应该被声明为局部变量。

局部变量必须通过 var 关键词来声明，否则它们将变成全局变量。

严格模式不允许未声明的变量。

在顶部声明

一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。

Het voordeel hiervan is dat:

  • 获得更整洁的代码
  • 提供了查找局部变量的好位置
  • 更容易避免不需要的全局变量
  • 减少不需要的重新声明的可能性
// 在顶部声明
var firstName, lastName, price, discount, fullPrice;
// 稍后使用
firstName = "Bill";
lastName = "Gates";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;

也可以用于循环变量：

// 在顶部声明
var i;
// 稍后使用
for (i = 0; i < 5; i++)  {

默认地，JavaScript 会将所有声明移至顶部（JavaScript hoisting）。

初始化变量

Het is een goede gewoonte om variabelen te initialiseren bij hun declaratie.

Het voordeel hiervan is dat:

  • Meer nette code
  • Initialiseer variabelen op een aparte locatie
  • Voorkom ongedefinieerde waarden
// Declareer en initialiseer in het begin
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

Variabele initialisatie helpt ons om de verwachte gebruik en het verwachte datatype te begrijpen.

Meld geen getallen, strings of boolean objecten

Zie altijd getallen, strings of booleans als primitieve waarden, niet als objecten.

Als je deze typen als objecten declareert, kan het de uitvoersnelheid vertragen en vervelende neveneffecten veroorzaken:

Voorbeeld

var x = "Bill";             
var y = new String("Bill");
(x === y) // Resultaat is false, omdat x een string is en y een object.

Probeer het zelf

Of zelfs erger:

Voorbeeld

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // Resultaat is false, omdat je objecten niet kunt vergelijken.

Probeer het zelf

Gebruik geen new Object()

  • Gebruik {} in plaats van new Object()
  • Gebruik "" in plaats van new String()
  • Gebruik 0 in plaats van new Number()
  • Gebruik false in plaats van new Boolean()
  • Gebruik [] in plaats van new Array()
  • Gebruik /()/ in plaats van new RegExp()
  • Gebruik function (){} in plaats van new Function()

Voorbeeld

var x1 = {};           // Nieuw object
var x2 = "";           // Nieuwe primitieve stringwaarde
var x3 = 0;            // Nieuwe primitieve getalwaarde
var x4 = false;        // Nieuwe primitieve booleanwaarde
var x5 = [];           // Nieuwe arrayobject
var x6 = /()/;         // Nieuwe reguliere expressie
var x7 = function(){}; // Nieuwe functieobject

Probeer het zelf

Wees je bewust van de automatische typconversie

Wees je bewust van het feit dat getallen onverwacht kunnen worden omgezet naar strings of NaN(Not a Number).

JavaScript behoort tot de losse typen. Variabelen kunnen verschillende datatypes bevatten en kunnen hun datatype veranderen:

Voorbeeld

var x = "Hello";     // typeof x is string
x = 5;               // wijzig typeof x in numerisch

Probeer het zelf

Bij wiskundige berekeningen kan JavaScript getallen omzetten naar strings:

Voorbeeld

var x = 5 + 7;       // x.valueOf() is 12, typeof x is numerisch
var x = 5 + "7";     // x.valueOf() is 57, typeof x is string
var x = "5" + 7;     // x.valueOf() is 57, typeof x is string
var x = 5 - 7;       // x.valueOf() is -2, typeof x is numerisch
var x = 5 - "7";     // x.valueOf() is -2, typeof x is numerisch
var x = "5" - 7;     // x.valueOf() is -2, typeof x is numerisch
var x = 5 - "x";     // x.valueOf() is NaN, typeof x is numerisch

Probeer het zelf

Bij het aftrekken van strings, ontstaat er geen fout, maar wordt er NaN（Not a Number）：

Voorbeeld

"Hello" - "Dolly"    // retourneert NaN

Probeer het zelf

Gebruik === voor vergelijking

== de vergelijkingsopters hebben altijd een typeconversie voor de vergelijking uitgevoerd (om de typen te matchen).

=== de operator compelt een vergelijking tussen waarde en type af te dwingen:

Voorbeeld

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

Probeer het zelf

Gebruik Parameter Defaults

als een parameter ontbreekt bij het aanroepen van de functie, wordt de waarde van deze ontbrekende parameter ingesteld als undefined.

undefined waarden kunnen uw code beschadigen. Het instellen van standaardwaarden voor parameters is een goede gewoonte.

Voorbeeld

functie myFunction(x, y) {
    als (y === undefined) {
        y = 0;
    }
}

Probeer het zelf

RaadpleegFunctieparametersIn dit hoofdstuk lees je meer over functieparameters.

om met default de switch te beëindigen

Gebruik standaard om je switch Zinnen. Zelfs als je denkt dat het niet nodig is.

Voorbeeld

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;
    standaard:
        day = "Unknown";
}

Probeer het zelf

Gebruik eval() vermijden

eval() Functionen worden gebruikt om tekst als code toe te laten. In bijna alle gevallen is het niet nodig om het te gebruiken.

Omdat het toestaan van het uitvoeren van willekeurige code ook betekent dat er veiligheidsproblemen kunnen zijn.