JavaScript legjobb gyakorlatok

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Kerülje a globális változókat, kerülje az új, a ==, a elkerülése eval()

Kerülje a globális változókat

Minimalizálja a globális változók használatát.

Ez magában foglalja az összes adattípust, objektumot és függvényt.

A globális változókat és függvényeket más szkriptek felülírhatják.

Használjon helyette helyi változókat, és tanulja meg a használatát lezárások.

Mindig deklarálja a helyi változókat

A függvényben használt összes változót lokális változóként kell deklarálni.

A helyi változókat kell deklarálni a var paraméterrel, a let vagy a const kulcsszó, különben globális változókká válnak.

A szigorú mód nem engedélyezi a nem deklarált változókat.

Nyilatkozatok a tetején

Jó kódolási gyakorlat az összes deklarációt minden szkript tetejére tenni vagy funkciót.

Ez:

  • Adj tisztább kódot

  • Adjon meg egyetlen helyet a helyi változók kereséséhez

  • Könnyítse meg a nem kívánt (implikált) globális változók elkerülését

  • Csökkentse a nem kívánt újbóli nyilatkozatok lehetőségét

// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;
 
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;

Ez vonatkozik a ciklusváltozókra is:

for (let i = 0; i < 5; i++) 
 {

Változók inicializálása

Jó kódolási gyakorlat a változók inicializálása, amikor deklarálja őket.

Ez:

  • Adj tisztább kódot

  • Biztosítson egyetlen helyet a változók inicializálásához

  • Kerülje a meghatározatlan értékeket

// Declare and initiate at the beginning
let firstName = "";
let lastName = "";
let price = 0;
let discount = 0;
let fullPrice = 0,
const myArray = [];
const myObject = {};

A változók inicializálása képet ad a tervezett felhasználásról (és a tervezett adattípusról).

Az objektumok deklarálása a const segítségével

Az objektumok const-tal történő deklarálása megakadályozza a véletlen típusváltozásokat:

Példa

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Changes object to string
const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Not possible

Tömbök deklarálása a const segítségével

A tömbök const-tal történő deklarálása megakadályozza a véletlen típusváltozásokat:

Példa

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number
const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

Ne használjon új objektumot()

  • A "" használata a new String() helyett

  • Használja a 0-t a new Number() helyett

  • Használja a false-ot az new Boolean() helyett

  • Használja a {}-t a new Object() helyett

  • A [] használata a new Array() helyett

  • Használja a /()/ jelet az új RegExp() helyett

  • Használja a függvényt(){} az new Function() helyett

Példa

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

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Literal Constructors</h2>
<p id="demo"></p>

<script>
let x1 = "";
let x2 = 0;
let x3 = false;
const x4 = {};
const x5 = [];
const x6 = /()/;
const x7 = function(){};

document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>

</body>
</html>

Vigyázzon az automatikus típuskonverziókra

A JavaScript lazán van beírva.

Egy változó minden adattípust tartalmazhat.

Egy változó megváltoztathatja az adattípusát:

Példa

let x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>A variable can chang its type. In this example x is first a string then a number:</p>

<p id="demo"></p>

<script>
let x = "Hello";
x = 5;
document.getElementById("demo").innerHTML = typeof x;
</script>

</body>
</html>

Ügyeljen arra, hogy a számok véletlenül karakterláncokká vagy NaN-okká alakíthatók (nem Szám).

Matematikai műveletek végrehajtásakor a JavaScript képes számokat karakterláncokká alakítani:

Példa

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

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>Remove the comment (at the beginning of the lines) to test each case:</p>

<p id="demo"></p>

<script>
let x = 5;
//x = 5 + 7;    // x.valueOf() is 12, typeof x is a number
//x = 5 + "7";  // x.valueOf() is 57, typeof x is a string
//x = "5" + 7;  // x.valueOf() is 57, typeof x is a string
//x = 5 - 7;    // x.valueOf() is -2, typeof x is a number
//x = 5 - "7";  // x.valueOf() is -2, typeof x is a number
//x = "5" - 7;  // x.valueOf() is -2, typeof x is a number
//x = 5 - "x";  // x.valueOf() is NaN, typeof x is a number

document.getElementById("demo").innerHTML = x.valueOf() + " " + typeof x;
</script>

</body>
</html>

Ha kivonunk egy karakterláncot egy karakterláncból, nem hibát generál, de NaN-t ad vissza (nem szám):

Példa

"Hello" - "Dolly"    // returns NaN

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>Subtracting a string from a string, does not generate an error but returns NaN (Not a Number):</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello" - "Dolly";
</script>

</body>
</html>

Használja === Összehasonlítás

A == összehasonlító operátor mindig konvertál (egyező típusokká), mielőtt összehasonlítás.

A === operátor kényszeríti az értékek és a típus összehasonlítását:

Példa

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

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

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparisons</h2>

<p>Remove the comment (at the beginning of each line) to test each case:</p>

<p id="demo"></p>

<script>
let x;
//x = (0 == "");   // true
//x = (1 == "1");  // true
//x = (1 == true);   // true
//x = (0 === "");  // false
//x = (1 === "1");   // false
//x = (1 === true);  // false
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Használja az alapértelmezett paramétereket

Ha egy függvényt hiányzó argumentummal hívunk meg, akkor a hiányzó értéke argumentum értékre van állítva meghatározatlan.

A meghatározatlan értékek feltörhetik a kódot. Jó szokás az alapértelmezett hozzárendelés értékeket érvekre.

Példa

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

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>Setting a default value to a function parameter.</p>
<p id="demo"></p>

<script>
function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }  
  return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
</script>

</body>
</html>

Az ECMAScript 2015 engedélyezi az alapértelmezett paramétereket a függvénydefinícióban:

function (a=1, b=1) { /*function code*/  }

További információ a függvényparaméterekről és argumentumokról a Funkcióparaméterek részben

Fejezze be a kapcsolóit az alapértelmezett értékekkel

A kapcsoló utasításokat mindig alapértelmezett-re fejezze be. Még akkor is, ha szerinted van nincs rá szükség.

Példa

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";
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
let day;
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";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>

Kerülje a számot, karakterláncot és logikai értéket objektumként

A számokat, karakterláncokat vagy logikai értékeket mindig primitív értékként kezelje. Nem mint tárgyakat.

Ezen típusok objektumként való deklarálása lelassítja a végrehajtási sebességet, és kellemetlen mellékhatásokat okoz:

Példa

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

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Objects</h2>
<p>Never create strings as objects.</p>
<p>Strings and objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x === y);
</script>

</body>
</html>

Vagy még rosszabb:

Példa

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Objects</h2>
<p>Never create strings as objects.</p>
<p>JavaScript cannot compare objects.</p>

<p id="demo"></p>

<script>
let x = new String("John"); 
let y = new String("John");
document.getElementById("demo").innerHTML = (x == y);
</script>

</body>
</html>

Kerülje az eval() használatát

Az eval() függvény a szöveg kódként történő futtatására szolgál. Szinte minden esetben azt használata nem szükséges.

Mivel tetszőleges kód futtatását teszi lehetővé, egyben biztonságot is képvisel probléma.