Javascript coding standards (summary)

This article mainly introduces Javascript coding conventions (coding specifications). Friends who need it can refer to it

1. Use strict mode

In a scope (Including function scope and global scope), you can use

"use strict";

to turn on strict mode.

2. Indentation

Use the Tab key to indent the code to save code size. Use a width of 4 spaces for indentation (JSLint recommendation).

3. Symbols

1) Curly braces

are placed on the same line as the statement and at the end; if there is only one statement in a line, use curly braces

Brackets:

if (true) {
  //true
} else {
  //false
}

while (true) {
  //alert(1);
}

2) Spaces

Add spaces after commas, semicolons, and colons;
Add spaces before and after operators;
Before the opening brace;

Between the end of curly braces and else, while or catch;

In each part of for;

For example:

var a = [1, 2, 3];
var obj = {
  name: 'name',
  value: 'value'
};
for (var i = 0; i < 10; i++) {}
function func(a, b, c) {}

c = a + b;
if (a && b || c) {
  //if
} else {
  //else
}

try {
  //try
} catch(err) {
  //catch
}

3) After all statements end, use the ; sign End

4. Naming

objects: use camel case, such as: MyClass

Methods and variables: use mixed methods, such as: getName(), myName

Constant: uppercase and underlined, such as: MY_NAME

5, single var mode

Use only one var to declare the variable at the top of the function, the effect is as follows:

1) Provides a single address to find all local variables needed by the function
2) Prevents logical errors where variables are used before they are defined

3) Helps remember to declare variables whenever possible Use global variables less

4) Less coding

function func() {
  var a = 1,
    b = 2, 
    sum = a + b,
    obj = {
      name: 'name',
      value: 'value'
    },
  $btn = $('#btn');
  //函数体
}

6. Loop

1) for loop

var i, arr = [];
for (i = arr.length; i--;) {
  //arr[i];
}

Note:

for (var i = 0; i < document.getElementsByName().length; i++) {
  //document.getElementsByName()[0];
}

In this way, every time the length comparison of i is used, the document will be queried, and usually DOM operations are very time-consuming.

2) while loop

var arr = [], 
  i = arr.length;
while (i--) {
  //处理
}

3) for-in loop

var i,
  hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
  if (hasOwn.call(man, i)) { //过滤
    console.log(i, ':', man[i]);
  }
}

7, switch selection

switch (num) {
case 0:
  //do something
  break;
case 1:
  //do something
  break;
...
default:
  //do default
}

Recommended use:

var obj = {
  '0': function() {
    //do somethins
  },
  '1': function() {
    // do somethis
  }, ...
}
if (obj.hasOwnProperty(num)) {
  obj[num]();
} else {
  //do default
}

8. Use the numerical convention of parseInt()

1) Specify the base parameter specifically every time:

var month = '09', day = '08';
month = parseInt(month, 10); //不加进制参数便会转换为八进制
day = parseInt(day, 10);

2) Other commonly used methods are to convert strings into Numerical methods:

+'08';
Number('08');

9. Literal mode

It is not recommended to use constructors to define:

// built in constructors (avoid)
var o = new Object();
var a = new Array();
var re = new RegExp('[a-z]', 'g');
var s = new String();
var n = new Number();
var b = new Boolean();
throw new Error('message');

It is recommended to use better literals Pattern:

// literals and primitives (prefer)
var o = {};
var a = [];
var re = /[a-z]/g;
var s = '';
var n = 0;
var b = false;
throw {
  name: 'Error',
  message: 'message'
}

10, others

1) If the abbreviated word in the variable is at the beginning, it will be all lowercase: xmlDocument, if it is not at the beginning, it will be all uppercase: loadXML

2) Variables must be in meaningful English, pinyin is prohibited Summary: The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related tutorials, please visit

JavaScript Video Tutorial

!

Related recommendations:

php public welfare training video tutorial

JavaScript graphic tutorial

JavaScript Online Manual######

The above is the detailed content of Javascript coding standards (summary). For more information, please follow other related articles on the PHP Chinese website!