All JavaScript projects apply the same specification.
JavaScript code specifications
Code specifications usually include the following aspects:
Naming rules for variables and functions
Rules for spaces, indentation, and comments.
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);
Spaces and operators
Usual operators ( = + - * / ) Need to add spaces before and after:
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);
}
The TAB key is not recommended to indent, because different editors interpret the TAB key differently.
Statement rules
General rules for simple statements:
- A statement usually End with a symbol.
var values = ["Volvo", "Saab", "Fiat"];
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
General rules for complex statements:
- Put the opening curly brace at the end of the first line.
- Add a space before the left curly brace.
- Put the closing curly brace on its own 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;
}
Condition Statement:
if (time < 20) { greeting = "Good day";
} else {
greeting = "Good evening" ;
}
Object rules
Object definition rules:
- 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, but 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.
var person = { firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
The short object code can be written directly in one line:
var person = {firstName:" John", lastName:"Doe", age:50, eyeColor:"blue"};
Each line of code characters is less than 80
In order to facilitate reading, it is recommended that the number of characters per line be less than 80.
If a JavaScript statement exceeds 80 characters, it is recommended to break the line after the operator or comma.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>我的 Web 页面</h1>
<p>
建议在运算符或者逗号后换行。
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello php.";
</script>
</body>
</html>Run the program and try it
Naming rules
Generally, the naming rules of many code languages are similar, for example:
Variables and functions are camelCase
Global variables are in upper case (UPPERCASE)
Constants (such as PI) are in upper case (UPPERCASE)
Do you use these rules for naming variables? ：hyp-hens, camelCase, or under_scores ?
The horizontal bar (-) character in HTML and CSS:
HTML5 attributes can be data - (eg: data-quantity, data-price) as a prefix.
CSS uses - to connect property names (font-size).
Note: - is usually considered subtraction in JavaScript, so its use 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:
Camel case is generally recommended in JavaScript, and jQuery and other JavaScript libraries use camel case.
Note: Do not start the variable name 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">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO.";
</script>
</body>
</html>Run the program and try it
Tips: Try to use the same HTML and JavaScript naming rules.
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