mirror of
https://github.com/Stone-Red-Code/naming-convention.git
synced 2026-09-04 09:06:19 +02:00
Update JavaScript Name and Coding Conventions.md
some styles fix
This commit is contained in:
@@ -9,7 +9,7 @@
|
|||||||
| Field name | CamelCase | 50 | Yes | No | No | Yes | [A-z][0-9] | No |
|
| Field name | CamelCase | 50 | Yes | No | No | Yes | [A-z][0-9] | No |
|
||||||
|
|
||||||
|
|
||||||
Coding conventions are style guidelines for programming. They typically cover:
|
##Coding conventions are style guidelines for programming. They typically cover:
|
||||||
|
|
||||||
1. Naming and declaration rules for variables and functions.
|
1. Naming and declaration rules for variables and functions.
|
||||||
1. Rules for the use of white space, indentation, and comments.
|
1. Rules for the use of white space, indentation, and comments.
|
||||||
@@ -18,17 +18,16 @@ Coding conventions secure quality:
|
|||||||
|
|
||||||
1. Improves code readability
|
1. Improves code readability
|
||||||
1. Make code maintenance easier
|
1. Make code maintenance easier
|
||||||
***
|
|
||||||
Always use the same naming convention for all your code. For example:
|
Always use the same naming convention for all your code. For example:
|
||||||
***
|
|
||||||
1. Do use camelCasing for variable and function arguments names;
|
1. Do use camelCasing for variable and function arguments names;
|
||||||
2. Do use PascalCasing for function names and global variable;
|
2. Do use PascalCasing for function names and global variable;
|
||||||
3. Constants (like PI) written in UPPERCASE;
|
3. Constants (like PI) written in UPPERCASE;
|
||||||
4. Do not use under_scores in variable, constants, function arguments or function names;
|
4. Do not use under_scores in variable, constants, function arguments or function names;
|
||||||
5. Do not use hyphens in JavaScript names.
|
5. Do not use hyphens in JavaScript names.
|
||||||
***
|
|
||||||
|
|
||||||
## Naming Conventions
|
|
||||||
|
### Naming Conventions
|
||||||
|
|
||||||
Do use PascalCasing for function names:
|
Do use PascalCasing for function names:
|
||||||
|
|
||||||
@@ -40,6 +39,7 @@ Do use PascalCasing for function names:
|
|||||||
|
|
||||||
Do use camelCasing for function arguments and local variables:
|
Do use camelCasing for function arguments and local variables:
|
||||||
|
|
||||||
|
```javascript
|
||||||
function Hello(isShow)
|
function Hello(isShow)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
@@ -51,8 +51,9 @@ Do use camelCasing for function arguments and local variables:
|
|||||||
discount = 0.10;
|
discount = 0.10;
|
||||||
|
|
||||||
fullPrice = price * 100 / discount;
|
fullPrice = price * 100 / discount;
|
||||||
|
```
|
||||||
|
|
||||||
***Note: Don't start names with a $ sign. It will put you in conflict with many JavaScript library names.***
|
*Note: Don't start names with a $ sign. It will put you in conflict with many JavaScript library names.*
|
||||||
|
|
||||||
#### Spaces Around Operators
|
#### Spaces Around Operators
|
||||||
|
|
||||||
@@ -63,25 +64,28 @@ Examples:
|
|||||||
var x = y + z;
|
var x = y + z;
|
||||||
var values = ["Volvo", "Saab", "Fiat"];
|
var values = ["Volvo", "Saab", "Fiat"];
|
||||||
|
|
||||||
#### Code Indentation
|
### Code Indentation
|
||||||
|
|
||||||
Always use 4 spaces for indentation of code blocks:
|
Always use 4 spaces for indentation of code blocks:
|
||||||
|
|
||||||
Functions:
|
Functions:
|
||||||
|
|
||||||
|
```javascript
|
||||||
function ToCelsius(fahrenheit)
|
function ToCelsius(fahrenheit)
|
||||||
{
|
{
|
||||||
return (5/9) * (fahrenheit-32);
|
return (5/9) * (fahrenheit-32);
|
||||||
}
|
}
|
||||||
|
```
|
||||||
|
|
||||||
***Note: Do not use tabs (tabulators) for indentation. Text editors interpret tabs differently.***
|
*Note: Do not use tabs (tabulators) for indentation. Text editors interpret tabs differently.*
|
||||||
|
|
||||||
#### Statement Rules
|
### Statement Rules
|
||||||
|
|
||||||
*General rules for simple statements: Always end simple statement with a semicolon.*
|
*General rules for simple statements: Always end simple statement with a semicolon.*
|
||||||
|
|
||||||
Examples:
|
Examples:
|
||||||
|
|
||||||
|
```javascript
|
||||||
var values = ["Volvo", "Saab", "Fiat"];
|
var values = ["Volvo", "Saab", "Fiat"];
|
||||||
|
|
||||||
var person = {
|
var person = {
|
||||||
@@ -90,86 +94,100 @@ Examples:
|
|||||||
age: 50,
|
age: 50,
|
||||||
eyeColor: "blue"
|
eyeColor: "blue"
|
||||||
};
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### General rules for complex (compound) statements:
|
||||||
|
|
||||||
#### General rules for complex (compound) statements:
|
|
||||||
***
|
|
||||||
1. Put the opening bracket at the end of the first line.
|
1. Put the opening bracket at the end of the first line.
|
||||||
2. Use one space before the opening bracket.
|
2. Use one space before the opening bracket.
|
||||||
3. Put the closing bracket on a new line, without leading spaces.
|
3. Put the closing bracket on a new line, without leading spaces.
|
||||||
4. Do not end complex statement with a semicolon.
|
4. Do not end complex statement with a semicolon.
|
||||||
***
|
|
||||||
|
|
||||||
Functions:
|
Functions:
|
||||||
|
|
||||||
|
```javascript
|
||||||
function toCelsius(fahrenheit) {
|
function toCelsius(fahrenheit) {
|
||||||
return (5/9) * (fahrenheit-32);
|
return (5/9) * (fahrenheit-32);
|
||||||
}
|
}
|
||||||
|
```
|
||||||
|
|
||||||
Loops:
|
Loops:
|
||||||
|
|
||||||
|
```javascript
|
||||||
for (i = 0; i < 5; i++) {
|
for (i = 0; i < 5; i++) {
|
||||||
x += i;
|
x += i;
|
||||||
}
|
}
|
||||||
|
```
|
||||||
|
|
||||||
Conditionals:
|
Conditionals:
|
||||||
|
|
||||||
|
```javascript
|
||||||
if (time < 20) {
|
if (time < 20) {
|
||||||
greeting = "Good day";
|
greeting = "Good day";
|
||||||
} else {
|
} else {
|
||||||
greeting = "Good evening";
|
greeting = "Good evening";
|
||||||
}
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
#### Object Rules
|
### Object Rules
|
||||||
|
|
||||||
General rules for object definitions:
|
General rules for object definitions:
|
||||||
***
|
|
||||||
1. Place the opening bracket on the same line as the object name.
|
1. Place the opening bracket on the same line as the object name.
|
||||||
2. Use colon plus one space between each property and it's value.
|
2. Use colon plus one space between each property and it's value.
|
||||||
3. Use quotes around string values, not around numeric values.
|
3. Use quotes around string values, not around numeric values.
|
||||||
4. Do not add a comma after the last property-value pair.
|
4. Do not add a comma after the last property-value pair.
|
||||||
5. Place the closing bracket, on a new line, without leading spaces.
|
5. Place the closing bracket, on a new line, without leading spaces.
|
||||||
6. Always end an object definition with a semicolon.
|
6. Always end an object definition with a semicolon.
|
||||||
***
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
|
```javascript
|
||||||
var person = {
|
var person = {
|
||||||
firstName: "John",
|
firstName: "John",
|
||||||
lastName: "Doe",
|
lastName: "Doe",
|
||||||
age: 50,
|
age: 50,
|
||||||
eyeColor: "blue"
|
eyeColor: "blue"
|
||||||
};
|
};
|
||||||
|
```
|
||||||
|
|
||||||
Short objects can be written compressed, on one line, like this:
|
Short objects can be written compressed, on one line, like this:
|
||||||
|
|
||||||
|
```javascript
|
||||||
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
|
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
|
||||||
|
```
|
||||||
|
|
||||||
***Line Length < 80***
|
### Line Length < 80
|
||||||
|
|
||||||
For readability, avoid lines longer than 80 characters. If a JavaScript statement does not fit on one line, the best place to break it, is after an operator or a comma.
|
For readability, avoid lines longer than 80 characters. If a JavaScript statement does not fit on one line, the best place to break it, is after an operator or a comma.
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
|
```javascript
|
||||||
document.getElementById("demo").innerHTML = "Hello World.";
|
document.getElementById("demo").innerHTML = "Hello World.";
|
||||||
|
```
|
||||||
|
|
||||||
#### Loading JavaScript in HTML
|
### Loading JavaScript in HTML
|
||||||
|
|
||||||
Use simple syntax for loading external scripts (the type attribute is not necessary):
|
Use simple syntax for loading external scripts (the type attribute is not necessary):
|
||||||
|
|
||||||
|
```html
|
||||||
<script src="myscript.js">
|
<script src="myscript.js">
|
||||||
|
```
|
||||||
|
|
||||||
#### Accessing HTML Elements
|
### Accessing HTML Elements
|
||||||
|
|
||||||
A consequence of using "untidy" HTML styles, might result in JavaScript errors. These two JavaScript statements will produce different results:
|
A consequence of using "untidy" HTML styles, might result in JavaScript errors. These two JavaScript statements will produce different results:
|
||||||
|
|
||||||
|
```javascript
|
||||||
var obj = getElementById("Demo")
|
var obj = getElementById("Demo")
|
||||||
|
|
||||||
var obj = getElementById("demo")
|
var obj = getElementById("demo")
|
||||||
|
```
|
||||||
|
|
||||||
*If possible, use it naming convention (as JavaScript) in HTML.*
|
*If possible, use it naming convention (as JavaScript) in HTML.*
|
||||||
|
|
||||||
#### File Extensions
|
### File Extensions
|
||||||
|
|
||||||
1. HTML files should have a .html extension (not .htm);
|
1. HTML files should have a .html extension (not .htm);
|
||||||
2. CSS files should have a .css extension;
|
2. CSS files should have a .css extension;
|
||||||
|
|||||||
Reference in New Issue
Block a user