Καλύτερες Πρακτικές JavaScript

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

避免全局变量

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

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

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

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

始终声明局部变量

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

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

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

在顶部声明

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

Η καλή πτυχή αυτού είναι:

  • 获得更整洁的代码
  • 提供了查找局部变量的好位置
  • 更容易避免不需要的全局变量
  • 减少不需要的重新声明的可能性
//在顶部声明
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++)  {

By default, JavaScript moves all declarations to the top (JavaScript hoisting).

初始化变量

Η αρχικοποίηση μεταβλητών σας όταν τις δηλώνετε είναι καλή συνήθεια.

Η καλή πτυχή αυτού είναι:

  • Πιο καθαρός κώδικας
  • Αρχικοποιήστε τις μεταβλητές σε ξεχωριστή θέση
  • Αποφύγετε τιμές μη ορισμένες
// Δήλωση και αρχικοποίηση στο ξεκίνημα
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

Η αρχικοποίηση μεταβλητών μας επιτρέπει να κατανοήσουμε την αναμενόμενη χρήση και τον αναμενόμενο τύπο δεδομένων.

Παρακαλώ μη δήλωση αριθμητικών, συμβολοσειρών ή αληθών αντικειμένων

Παρακαλώ θεωρήστε πάντα τα αριθμητικά, τις συμβολοσειρές ή τις αληθείς τιμές ως βασικές τιμές, όχι αντικείμενα.

Αν δήλωση αυτών των τύπων ως αντικείμενα, μπορεί να μειώσει την ταχύτητα εκτέλεσης και να προκαλέσει δυσάρεστες παρενέργειες:

Παράδειγμα

var x = "Bill";             
var y = new String("Bill");
(x === y) // Το αποτέλεσμα είναι false, επειδή x είναι συμβολοσειρά και y είναι αντικείμενο.

Προσπαθήστε να το δοκιμάσετε προσωπικά

ή ακόμα χειρότερα:

Παράδειγμα

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // Το αποτέλεσμα είναι false, επειδή δεν μπορείτε να συγκρίνετε αντικείμενα.

Προσπαθήστε να το δοκιμάσετε προσωπικά

Παρακαλώ μη χρησιμοποιείτε new Object()

  • Παρακαλώ χρησιμοποιήστε {} αντί για new Object()
  • Παρακαλώ χρησιμοποιήστε "" αντί για new String()
  • Παρακαλώ χρησιμοποιήστε 0 αντί για new Number()
  • Παρακαλώ χρησιμοποιήστε false αντί για new Boolean()
  • Παρακαλώ χρησιμοποιήστε [] αντί για new Array()
  • Παρακαλώ χρησιμοποιήστε /()/ αντί για new RegExp()
  • Παρακαλώ χρησιμοποιήστε function (){} αντί για new Function()

Παράδειγμα

var x1 = {};           // Νέος τύπος αντικειμένου
var x2 = "";           // Νέος τύπος βασικής συμβολοσειράς
var x3 = 0;            // Νέος τύπος βασικού αριθμού
var x4 = false;        // Νέος τύπος βασικής αληθούς
var x5 = [];           // Νέος τύπος πίνακα
var x6 = /()/;         // Νέος τύπος τυχαίας συναρτήσεως
var x7 = function(){}; // Νέος αντικείμενος λειτουργίας

Προσπαθήστε να το δοκιμάσετε προσωπικά

συνειδητοποιήστε την αυτόματη μετατροπή τύπου

Παρακαλώ συνειδητοποιήστε ότι τα αριθμητικά δεδομένα μπορεί να μετατραπούν τυχαία σε συμβολοσειρές ή NaN(Not a Number).

Το JavaScript είναι τύπος χαλαρού τύπου. Οι μεταβλητές μπορούν να περιέχουν διαφορετικούς τύπους δεδομένων και μπορούν να αλλάζουν τον τύπο τους:

Παράδειγμα

var x = "Hello";     // typeof x είναι συμβολοσειρά
x = 5;               // Αλλάξει typeof x σε αριθμητικό

Προσπαθήστε να το δοκιμάσετε προσωπικά

Αν εκτελείτε μαθηματικές πράξεις, το JavaScript μπορεί να μετατρέψει αριθμούς σε συμβολοσειρές:

Παράδειγμα

var x = 5 + 7;       // x.valueOf() είναι 12, typeof x είναι αριθμητικός
var x = 5 + "7";     // x.valueOf() είναι 57, typeof x είναι συμβολοσειρά
var x = "5" + 7;     // x.valueOf() είναι 57, typeof x είναι συμβολοσειρά
var x = 5 - 7;       // x.valueOf() είναι -2, typeof x είναι αριθμητικός
var x = 5 - "7";     // x.valueOf() είναι -2, typeof x είναι αριθμητικός
var x = "5" - 7;     // x.valueOf() είναι -2, typeof x είναι αριθμητικός
var x = 5 - "x";     // x.valueOf() είναι NaN, typeof x είναι αριθμητικός

Προσπαθήστε να το δοκιμάσετε προσωπικά

Η αφαίρεση αριθμητικών συμβολοσειρών δεν προκαλεί σφάλμα αλλά επιστρέφει NaN（Not a Number）：

Παράδειγμα

"Hello" - "Dolly"    // Επιστρέφει NaN

Προσπαθήστε να το δοκιμάσετε προσωπικά

Χρήση === για σύγκριση

== Οι συγκριτικοί οπερατορές κάνουν μετατροπή τύπου πριν από τη σύγκριση (για να ταιριάζουν στον τύπο).

===== Οι οペρατορές συγκρίσεως επιβάλλουν την υποχρεωτική σύγκριση τιμών και τύπων:

Παράδειγμα

0 == "";        // αληθές
1 == "1";       // αληθές
1 == true;      // αληθές
0 === "";       // ψευδές
1 === "1";      // ψευδές
1 === true;     // ψευδές

Προσπαθήστε να το δοκιμάσετε προσωπικά

Χρήση Προεπιλεγμένων Παραμέτρων

Ανλείψει ένας παράμετρος κατά την κλήση της συνάρτησης, η τιμή αυτής της απουσιάζουσας παραμέτρου θα ρυθμιστεί σε undefined。

undefined Η τιμή θα καταστρέψει το κώδικα σας. Η ρύθμιση προεπιλεγμένων τιμών για τα παραμέτρους είναι καλή συνήθεια.

Παράδειγμα

λειτουργία myFunction(x, y) {
    εάν (y === undefined) {
        y = 0;
    }
}

Προσπαθήστε να το δοκιμάσετε προσωπικά

ΣτηΠαράμέτρους συναρτήσεωνΣε αυτό το κεφάλαιο διαβάστε περισσότερα για τις παραμέτρους των συναρτήσεων.

χρησιμοποιήστε το default για να ολοκληρώσετε το switch

χρησιμοποιήστε default να ολοκληρώσετε το 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() Η συνάρτηση χρησιμοποιείται για να επιτρέψει τον κώδικα ως κείμενο. Σε几乎所有 περιπτώσεις, δεν είναι απαραίτητο να τη χρησιμοποιήσετε.

Επειδή επιτρέπεται η εκτέλεση οποιουδήποτε κώδικα, αυτό σημαίνει και ότι υπάρχει κίνδυνος ασφαλείας.