JavaScript code specifications

All JavaScript The same standards apply to projects.

JavaScript code specifications

Code specifications usually include the following aspects:

Naming rules for variables and functions
Rules for using spaces, indents, 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 camel case for variable names (camelCase):

firstName = " John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Space and operator

Normal operations You need to add spaces before and after the symbols ( = + - * / ):

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 Indentation, 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:

Put the opening curly brace on the first line the end of.
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;
}

Conditional statement:

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

Object rules

Object-defined 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, 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"
};

Short object code can be written directly in one line:

Example:

var person = {firstName:"John" , lastName:"Doe", age:50, eyeColor:"blue"};

each line Code characters should be less than 80

It is recommended that each line of characters be less than 80 for ease of reading.

If a JavaScript statement exceeds 80 characters, it is recommended to break the line after the operator or comma.

Instance

<!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 instance»

Click the "Run instance" button to view the online instance

Naming rules

Generally, the naming rules of many code languages are similar, for example:

##Variables and functions are in camel case (
camelCase)
Global variables are in uppercase (
UPPERCASE )
Constants (such as PI) are in uppercase (
UPPERCASE )

Whether you use these rules for variable naming:

hyp-hens, camelCase, or under_scores ?

Handbar (-) character in HTML and CSS:

HTML5 attributes can start with data- (eg: data-quantity, data -price) as a prefix.

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 in the database.

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 files

Load JavaScript files using a concise format (the type attribute is not required):

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

##Use JavaScript to access HTML Elements

A poorly formatted HTML may cause JavaScript execution errors.

The following two JavaScript statements will output different results:

Instance

<!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 Example»
Click the "Run Example" button to view the online example

Try to use the same naming rules for HTML and JavaScript.

Access HTML(5) code specifications.

File extension