Doporučené postupy pro JavaScript

Obsah

    Zobrazit obsah

Vyhněte se globálním proměnným, vyhněte se nové, vyhněte se ==, vyhněte se eval()

Vyhněte se globálním proměnným

Minimalizujte používání globálních proměnných.

To zahrnuje všechny datové typy, objekty a funkce.

Globální proměnné a funkce lze přepsat jinými skripty.

Místo toho použijte místní proměnné a naučte se, jak je používat uzávěry.

Vždy deklarujte místní proměnné

Všechny proměnné použité ve funkci by měly být deklarovány jako místní proměnné.

Místní proměnné musí být deklarovány pomocí var, let nebo const klíčové slovo, jinak se stanou globálními proměnnými.

Striktní režim neumožňuje nedeklarované proměnné.

Prohlášení nahoře

Je dobrou praxí kódování umístit všechny deklarace na začátek každého skriptu nebo funkci.

Tohle bude:

  • Zadejte kód čističe

  • Poskytněte jediné místo pro hledání místních proměnných

  • Usnadněte si vyhýbání se nechtěným (implicitním) globálním proměnným

  • Snížit možnost nechtěných opakovaných prohlášení

// 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;

To platí také pro proměnné smyčky:

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

Inicializovat proměnné

Je dobrou praxí kódování inicializovat proměnné, když je deklarujete.

Tohle bude:

  • Zadejte kód čističe

  • Poskytněte jedno místo pro inicializaci proměnných

  • Vyhněte se nedefinovaným hodnotám

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

Inicializace proměnných poskytuje představu o zamýšleném použití (a zamýšleném datovém typu).

Deklarujte objekty pomocí const

Deklarováním objektů pomocí const zabráníte náhodné změně typu:

Příklad

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

Deklarujte pole pomocí const

Deklarace polí pomocí const zabrání jakékoli náhodné změně typu:

Příklad

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

Nepoužívejte nový objekt()

  • Místo new String() použijte ""

  • Místo new Number() použijte 0

  • Použijte false namísto new Boolean()

  • Místo new Object() použijte {}

  • Místo new Array() použijte []

  • Místo nové RegExp() použijte /()/

  • Místo nové funkce() použijte funkci(){}

Příklad

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

Zkuste to sami →

<!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>

Pozor na automatické převody typů

JavaScript je volně napsaný.

Proměnná může obsahovat všechny datové typy.

Proměnná může změnit svůj datový typ:

Příklad

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

Zkuste to sami →

<!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>

Pozor, čísla mohou být náhodně převedena na řetězce nebo NaN (Ne Číslo).

Při provádění matematických operací může JavaScript převádět čísla na řetězce:

Příklad

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

Zkuste to sami →

<!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>

Odečtení řetězce od řetězce ne vygeneruje chybu, ale vrátí NaN (není číslo):

Příklad

"Hello" - "Dolly"    // returns NaN

Zkuste to sami →

<!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>

Použijte === Srovnání

Operátor porovnání == vždy dříve převede (na odpovídající typy). srovnání.

Operátor === vynutí porovnání hodnot a typu:

Příklad

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

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

Zkuste to sami →

<!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>

Použít výchozí nastavení parametrů

Pokud je funkce volána s chybějícím argumentem, hodnota chybějícího argument je nastaven na nedefinováno.

Nedefinované hodnoty mohou narušit váš kód. Je dobrým zvykem přiřadit výchozí hodnoty k argumentům.

Příklad

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

Zkuste to sami →

<!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>

ECMAScript 2015 umožňuje výchozí parametry v definici funkce:

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

Přečtěte si více o parametrech a argumentech funkcí v části Parametry funkcí

Ukončete přepínače s výchozími nastaveními

Příkazy switch vždy ukončete výchozím. I když si myslíte, že existuje není to potřeba.

Příklad

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

Zkuste to sami →

<!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>

Vyvarujte se čísel, řetězců a logických hodnot jako objektů

Vždy zacházejte s čísly, řetězci nebo booleany jako s primitivními hodnotami. Ne jako objektů.

Deklarování těchto typů jako objektů zpomaluje rychlost provádění, a způsobuje nepříjemné vedlejší účinky:

Příklad

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

Zkuste to sami →

<!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>

Nebo ještě hůř:

Příklad

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

Zkuste to sami →

<!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>

Vyhněte se použití eval()

Funkce eval() se používá ke spuštění textu jako kódu. Téměř ve všech případech ano by nemělo být nutné jej používat.

Protože umožňuje spouštění libovolného kódu, představuje také zabezpečení problém.