JavaScript Code Specifications


The same specification applies to all JavaScript projects.


JavaScript code specification

Code specifications usually include the following aspects:

  • Naming rules for variables and functions

  • Rules for using spaces, indentation, and comments.

  • Other common specifications...

Standard code can be easier to read and maintain.

Code specifications are generally stipulated before development, and you can negotiate 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

Usually operators (= +-* /) need to add spaces before and after:

Example:

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

Code indentation

Usually 4 spaces are used to indent code blocks:

Function:

function toCelsius(fahrenheit) {
     return (5 / 9) * (fahrenheit-32);
}
NoteIt is not recommended to use the TAB key to indent, because different editors have different interpretations of the TAB key.

Statement rules

General rules for simple statements:

  • A statement usually ends with a semicolon.

Examples:

var values = ["Volvo", "Saab", "Fiat"];

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

General rules for complex statements:

  • Place the opening brace at the end of the first line.

  • Add a space before the opening brace.

  • Put the closing brace on its own line.

  • Don't end a complex statement with a semicolon.

Function:

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


Cycle:

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


Conditional statements:

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



Object rules

Object definition rules:

  • Put the opening brace on the same line as the class name.

  • There is a space between the colon and the attribute value.

  • Double quotes are used for strings, numbers are not required.

  • Do not add a comma after the last attribute-value pair.

  • Put the closing curly brace on its own line and end it with a semicolon.

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 of code characters is less than 80

In order to make it easier to read, it is recommended that the number of characters in each line is less than 80.

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

Example:

document.getElementById("demo").innerHTML =

     "Hello TutorialFish.com";

Try It! 


Naming rules

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

  • Variables and functions are identified by the little camel case method, that is, except for the first word, the first letter of other words are capitalized ( lowerCamelCase )

  • 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 ?

HTML and CSS horizontal bar (-) character:

HTML5 attributes can be prefixed with data - (eg: data-quantity, data-price).

CSS uses (-) to concatenate the attribute name (font-size).

Note- Usually considered as subtraction in JavaScript, it is not allowed to use it.

Underscore:

Many programmers prefer to use underscores (such as date_of_birth), especially in SQL databases.

The PHP language usually uses underscores.

PascalCase:

PascalCase has more languages in the C language.

Hump method:

The camel case method is generally recommended in JavaScript, and jQuery and other JavaScript libraries all use the camel case method.

NoteDon't start variable names with $ as it will conflict with many JavaScript libraries.

HTML load external JavaScript file

Load the JavaScript file in a concise format (the type attribute is not required):

<script src="myscript.js">

Use JavaScript to access HTML elements

A bad HTML format may cause JavaScript execution errors.

The following two JavaScript statements will output different results:

Example

var obj = getElementById("Demo")

var obj = getElementById("demo")

 Try It! 

HTML and JavaScript try to use the same naming rules.

Access HTML(5) code specifications .


File extension

The HTML file suffix can be .html (or .htm ).

The CSS file suffix is .css .

The 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 through London.jpg or london.jpg.

You must maintain a consistent style, and we recommend uniformly using lowercase file names.