Οδηγίες στυλ JavaScript

Χρησιμοποιήστε πάντα τις ίδιες συμβάσεις κώδικα για όλα τα έργα σας JavaScript.

Συμβάσεις κώδικα JavaScript

Οι συμβάσεις κώδικα (Coding conventions) αναφέρονται σε:Οδηγίες στυλ προγραμματισμούΑυτές οι αρχές περιλαμβάνουν大致ικά:

  • Οι κανόνες ονόμασης και αναφοράς μεταβλητών και συναρτήσεων
  • Οι κανόνες χρήσης διαστημάτων, εσοχών και σχολίων
  • Πρακτικές και αρχές προγραμματισμού

Συμβάσεις κώδικαΕξασφάλιση ποιότητας:

  • Βελτίωση της αναγνωσιμότητας του κώδικα
  • Αύξηση της διατηρήσιμης του κώδικα

Οι συμβάσεις κώδικα μπορεί να είναι γραπτές規칙 που τηρούνται από την ομάδα σας ή οι προσωπικές σας συνήθειες κώδικα.

Αυτή η σελίδα περιγράφει τις γενικές συμβάσεις κώδικα που χρησιμοποιούνται από το CodeW3C.com.

Πρέπει να συνεχίσετε να διαβάσετε το επόμενο κεφάλαιο "Καλές Πρακτικές" και να μάθετε πώς να αποφύγετε τις παγίδες κώδικα.

变量名

在 CodeW3C.com，我们对标识符名称（变量和函数）使用了驼峰式大小写.

所有名称以字母开头。

在本页的底部，我们会更广泛地讨论命名规则。

firstName = "Bill";
lastName = "Gates";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

运算符周围的空格

请始终在运算符（ = + - * / ）周围以及逗号之后添加空格：

Παράδειγμα

var x = y + z;
var values = ["Volvo", "Saab",  "Fiat"];

代码缩进

请始终使用对代码块缩进使用 4 个空格：

函数

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

请不要对缩进使用制表符。不同的编辑器对 tab 的解释也不尽相同。

语句规则

简单语句的通用规则：

请始终以分号结束单条语句：

Παράδειγμα

var values = ["Volvo", "Saab",  "Fiat"];
var person = {
    firstName: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

针对复杂语句（compound）的通用规则：

  • 请在第一行的结尾处写开括号
  • 请在开括号前使用一个空格
  • 请在新行上写闭括号，不带前导空格
  • 请不要以分号来结束复杂语句

函数：

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

循环：

for (i = 0; i < 5; i++) {
    x += i;
}

条件：

if (time < 20) {
    greeting = "Good day";
} else {
     greeting = "Good evening";
}

对象规则

针对对象定义的通用规则：

  • 把开括号与对象名放在同一行
  • 在每个属性与其值之间使用冒号加一个空格
  • 不要在最后一个属性值对后面写逗号
  • 请在新行上写闭括号，不带前导空格
  • 请始终以分号结束对象定义

Παράδειγμα

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

可以对短对象在一行中进行压缩，只在属性之间使用空格，就像这样：

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

Η διάρκεια της γραμμής είναι μικρότερη από 80

Για να βελτιώσετε την αναγνωσιμότητα, αποφύγετε να ξεπερνάτε τη διάρκεια 80 χαρακτήρων ανά γραμμή.

Αν η πρόταση JavaScript ξεπερνά τη διάρκεια μιας γραμμής, η καλύτερη θέση για τη διακοπή της γραμμής είναι μετά τον τελεστικό ή τον κόμμα.

Παράδειγμα

document.getElementById("demo").innerHTML =
    "Hello Kitty.";

Δοκιμάστε να το κάνετε προσωπικά

Συμβολή ονόματος

Χρησιμοποιήστε πάντα την ίδια συμβολή ονόματος για το κώδικα σας. Για παράδειγμα:

  • οι ονόματα των μεταβλητών και των συναρτήσεων πρέπει να γράφονται μεcamelCaseγια να γράψουμε
  • οι παγκόσμιοι μεταβλητές χρησιμοποιούνταιμε μεγάλα γράμματα（Δεν το κάνουμε αυτό, αλλά είναι πολύ συχνό）
  • οι μόνιμες μεταβλητές (π.χ. PI) χρησιμοποιούνταιμε μεγάλα γράμματα

Εάν πρέπει να χρησιμοποιήσουμε στο όνομα των μεταβλητών μαςενθέσεις、camelCaseήΥπογράμμιοιΝαι;

Αυτό είναι ένα συχνά συζητημένο θέμα από τους προγραμματιστές. Η απάντηση εξαρτάται από τον άνθρωπο που απαντά:

Οι ενθέσεις στο HTML και στο CSS:

Οι ιδιότητες HTML5 μπορούν να ξεκινούν με data- (data-quantity, data-price).

Το CSS χρησιμοποιεί ενθέσεις στο property-names (font-size).

Οι ενθέσεις μπορεί να θεωρούνται λανθασμένα ως μονογράμματα υπολογιστικής αλγεβράς. Οι ονόματα JavaScript δεν επιτρέπονται να χρησιμοποιούν ενθέσεις.

Υπογράμμιοι:

Πολλοί προγραμματιστές προτιμούν τους υπογράμμιοι (date_of_birth), ειδικά στις βάσεις δεδομένων SQL.

Οι υπογράμμιοι χρησιμοποιούνται συχνά στις αναφορές PHP.

PascalCase:

Οι προγραμματιστές C συχνά χρησιμοποιούν το PascalCase.

camelCase:

Το JavaScript, το jQuery και άλλες βιβλιοθήκες JavaScript χρησιμοποιούν το camelCase.

Το JavaScript δεν πρέπει να ξεκινά με το σύμβολο $. Αυτό μπορεί να προκαλέσει σύγκρουση ονομάτων στο JavaScript.

Φόρτωση JavaScript στο HTML

Χρησιμοποιήστε απλό γλωσσικό στυλ για να φορτώσετε εξωτερικό σενάριο (το attribute type δεν είναι απαραίτητο):

<script src="myscript.js"></script>

Πρόσβαση στο στοιχείο HTML

Οι συνέπειες της "καθαράς" στυλ HTML, μπορεί να οδηγήσουν σε σφάλματα JavaScript.

Αυτές οι δύο προτάσεις JavaScript θα παράγουν διαφορετικά αποτελέσματα:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Αν είναι δυνατόν, χρησιμοποιήστε την ίδια συμβολή ονόματος σε HTML (όπως στο JavaScript).

Πρόσβαση στις οδηγίες στυλ HTML.

Εκτάσεις αρχείων

Τα αρχεία HTML πρέπει να χρησιμοποιούν .html Εκτάσεις (όχι .htm)

Τα αρχεία CSS πρέπει να χρησιμοποιούν .css Εκτάσεις.

Τα αρχεία JavaScript πρέπει να χρησιμοποιούν .js Εκτάσεις.

Χρησιμοποιήστε μικρά ονόματα αρχείων

Οι περισσότεροι διακομιστές web (Apache, Unix) είναι ευαίσθητοι στις κεφαλαία και τις πεζές για τα ονόματα αρχείων:

london.jpg δεν μπορεί να προσέγγιστεί ως London.jpg.

Άλλοι διακομιστές web (Microsoft IIS) δεν είναι ευαίσθητοι στις κεφαλαία και τις πεζές:

london.jpg μπορεί να προσέγγιστεί με London.jpg ή london.jpg.

Αν χρησιμοποιείτε μικρές και μεγάλες γραμμές, πρέπει να τηρείτε μια στενή και συνεπή χρήση.

Αν μεταφέρετε τον ιστότοπο από έναν διακομιστή που δεν είναι ευαίσθητος στις κεφαλαία και τις πεζές σε έναν που είναι ευαίσθητος στις κεφαλαία και τις πεζές, حتى αυτές οι μικρές σφάλματα μπορεί να καταστρέψουν τον ιστότοπό σας.

Για να αποφύγετε αυτά τα προβλήματα, χρησιμοποιήστε πάντα μικρούς ονόματα αρχείων (αν είναι δυνατόν).

Απόδοση

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

Ο προσανατολισμός και οι επιπλέον κενά δεν είναι σημαντικοί για μικρούς κώδικες.

Για σενάρια ανάπτυξης, πρέπει να δώσετε προτεραιότητα στην αναγνωσιμότητα. Πρέπει να συνοψίσετε μεγαλύτερους παραγωγικούς κώδικες.