JavaScript code specifications
All JavaScript projects apply the same specifications.
JavaScript code specifications
Code specifications usually include the following aspects:
Naming rules for variables and functions
Spaces, indentation, and the use of comments rule.
Other commonly used specifications...
Standard code can be easier to read and maintain.
Code specifications are generally stipulated before development and can be negotiated and set with your team members.
Variable name
It is recommended to use camelCase for variable names:
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Space and operator
Usual operator ( = + - * / ) You need to add spaces before and after:
Example:
var x = y + z;
var values = ["Volvo", "Saab", "Fiat" ];
Code indentation
Usually use 4 space symbols to indent code blocks:
Function:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
##It is not recommended to use the TAB key to abbreviate Because different editors interpret the TAB key differently.
Statement rules
General rules for simple statements:
A statement usually ends with a symbol.
Example:
var values = ["Volvo", "Saab", "Fiat"];
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
General rules for complex statements:
Change the left flower Parentheses are placed at the end of the first line.
Add a space before the left curly brace.
Put the right curly brace on a separate line.
Don't end a complex statement with a semicolon.
Function:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Loop:
for (i = 0; i < 5; i++) {
x += i;
}
##Conditional statement:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Object rules
Rules for object definitions:
Put the opening curly brace on the same line as the class name.
There is a space between the colon and the attribute value.
Use double quotes for strings, not for numbers.
Do not add a comma after the last attribute-value pair.
Put the right curly brace on a separate line and end it with a symbol.
Example:
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue "
};
The short object code can be written directly in one line:
Example:
var person = {firstName:"John", lastName:"Doe" , age:50, eyeColor:"blue"};
Each line of code characters should be less than 80
It is recommended that each line of code be less than 80 characters for ease of reading.
If a JavaScript statement exceeds 80 characters, it is recommended to break the line after the operator or comma.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>我的 Web 页面</h1>
<p>
建议在运算符或者逗号后换行。
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello php.";
</script>
</body>
</html>Naming rules
Generally, the naming rules of many code languages are similar, for example:
Variables and functions are camelCase
Global variables are uppercase (UPPERCASE)
Constants (such as PI) are uppercase (UPPERCASE)
Do you use these rules for variable naming: hyp-hens, camelCase , or under_scores ?
The crossbar (-) character in HTML and CSS:
HTML5 attributes can be prefixed with data- (eg: data-quantity, data-price).
CSS uses - to connect property names (font-size).
- is generally considered subtraction in JavaScript, so is not allowed.
Underscore:
Many programmers prefer to use underscores (such as: date_of_birth), especially in SQL databases.
PHP language usually uses underscores.
PascalCase:
PascalCase is more common in C language.
Camel case:
It is generally recommended to use camel case in JavaScript. jQuery and other JavaScript libraries use camel case.
Do not start variable names with $ as it will conflict with many JavaScript libraries.
HTML Load external JavaScript file
Load JavaScript file using concise format (type attribute is not required):
< ;script src="myscript.js">
Using JavaScript to access HTML elements
A poorly formatted HTML may cause JavaScript execution errors.
The following two JavaScript statements will output different results:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO.";
</script>
</body>
</html>File extension
HTML file suffix can be .html (or r .htm).
CSS file suffix is .css.
JavaScript file suffix is .js.
Use lowercase file names
Most web servers (Apache, Unix) are case-sensitive: london.jpg cannot be accessed through London.jpg.
Other web servers (Microsoft, IIS) are not case sensitive: london.jpg can be accessed as London.jpg or london.jpg.
You must maintain a consistent style. We recommend using lowercase file names uniformly.
Next Section