Programs are written for people to read, and only occasionally for computers to execute. When it comes to execution, computers are all about right and wrong, but when it comes to teamwork, consistent and elegant code is a joy to watch. Therefore, it is particularly important to determine the coding style

As far as javascript is concerned, using Eslint or teams have enforced their own styles for frameworks like Vue, just for reference

The indentation

4 Spaces (TAB)

When the editor presses TAB, the default is 4 Spaces. Therefore, the small editor recommends 4 Spaces, at least to look the most comfortable

Recommended Index: 🌟🌟

Statement at the end

In order to; (semicolon) ending

Js code can also omit semicolons, depending on the automatic semicolon insertion mechanism of the analyzer. In the case of JSLint and JSHint, if you omit Spaces, there will be warnings. To make matters worse, js does not automatically append a semicolon ([/ + -) to the previous line if js is one of the following five characters

x = y
(function () {

})()
Copy the code

It’s going to be equivalent to

x = y(function () {

}) ()

Recommended index: 🌟🌟🌟🌟

A blank line

Blank lines are one of the most overlooked aspects of coding specifications. And, as far as programmers are concerned, it’s a matter of opinion. Below, xiaobian will simply elaborate on their own views.

When will you be free?

  1. Method and method
function getName() {// code block}function getAge() {// code block}Copy the code

Recommended Index: 🌟🌟

  1. Empty lines between variables and functions
var name = null

function getName() {}Copy the code

Recommended index: 🌟🌟🌟🌟 3

/* Obtain attribute name */ var name = null /* obtain attribute age */ var age = nullCopy the code

Recommended index: 🌟🌟🌟

A newline

When the length of a line is limited by the maximum characters of a single line, or a line is too long to read the code, we need to manually split into multiple lines. At this point, we need to wrap the operator, which is written at the end of the previous line.

  1. Assignment When assigning a value to a variable, the second line should be aligned with the variable after the assignment operator on the first line
var result = name + age + gender + 
             msg + like; 
Copy the code

Recommended Index: 🌟🌟

  1. Operator, the next line will add 1 or 2 indentation. Small series usually use 1 indent
if (year == '2019' && month == '8' &&
  day == '23') {// code block}Copy the code

Recommended Index: 🌟🌟

Variables and functions

Whenever you write code, you are declaring variables and functions, or you are going to declare variables and functions. Therefore, readability of variable and function declarations is critical.

variable

Declare variables as short as possible, to get to the point, and as close to the data type as possible. For arrays, the plural form of +s is generally used

Var count = 1; var name ='jack'
var status = false 
var names = ['jack'.'john'.'dave'Var getCount = 10 var getName ='jack'
var isUse = false
Copy the code

Recommended index: 🌟🌟🌟

function

For functions, the first word should be a verb, such as get, set, has, is, toggle, can, delete, update, insert, add, etc. Hump is recommended. The length of the function has to be arbitrary, even if it’s a little bit longer, it’s worth it

/* Good practice */function getName () {
    return name
}

function checkPermissionsBySession() {}Copy the code

Recommended index: 🌟🌟🌟🌟

Curly braces

The opening brace follows the keyword. Javascript automatically adds a semicolon at the end of a sentence, leading to some unnoticeable errors. To avoid this type of error, write it as follows

/* Good practice */return {
    name: 'jack'} /* Bad moves are resolved by the parserreturn; The following code does not execute */return 
{
    name: 'jack'
}  
Copy the code

Recommended index: 🌟🌟🌟🌟

parentheses

In general: all syntax elements have a space between the open parenthesis. Except in the following two cases

  1. When calling a function, there is no space between the syntax element and the parenthesis
  2. There is no space between the function name and the argument sequence
/* Good way to write */if (a === b) {}    

for (let i=0; i<10; i++) {}

return (a + b)

function getName(arr) {

}
getName()
Copy the code

Recommended index: 🌟🌟🌟

Null, and undefined

null

The best way to use NULL is as a placeholder. Instead of using NULL to check whether a parameter is passed, or whether a variable is initialized

/* / var name = nullfunction getName () {
    if(! condition) {returnNull}} /* bad practice */ var name;if(name ! = null) { }function getName(arg1, arg2) {
    if(arg3 ! = null) { } }Copy the code

Recommended Index: 🌟🌟

undefined

Variables that are not initialized have an initial value, undefined

var age;
console.log(typeof age) // undefined
Copy the code

Recommended Index: 🌟🌟

‘= =’ and ‘= = =’, ‘! = ‘and’! = = ‘

Js has a casting mechanism that forces some variables to be automatically converted to different types. There may be unexpected results. While using equality may speed up development during development, it takes much longer to troubleshoot problems once they occur. Therefore, the small editor strongly recommends using congruence and incongruence

/* Bad practice */ console.log(1 ==true) / /true
console.log(0 == ' ') / /true
Copy the code

Recommended index: 🌟🌟🌟

The global variable

Making sure that your functions don’t have dependencies on global variables will enhance the testability of your code. Especially for team development, avoid global variables whenever possible

  1. Using namespaces means defining only one variable space (as in JQuery -> $). But when you reference multiple JS files, they all happen to have the same custom variable symbol at the same time. You’re in trouble.
  2. Using anonymous functions
(function() () {});Copy the code

It may cause memory consumption or even memory leakage

Therefore, if possible, do not use global variables, and if you must, use all uppercase letters. Such as:

MAX_SIZE / / recommendations

Recommended index: 🌟🌟🌟🌟

Loose coupling

Separate the JS and CSS

Loose coupling: When you can modify one component without changing the others. Loose coupling is critical to code maintainability, because you don’t want developers to break or change other code as they change it

/* / var el = document.getelementbyid ('div1');
el.classList.add('blue') the document. The body. The appendChild (el) / * bad practice. */ var el = document.getelementbyid ('div2');
el.style.width = '200px';
el.style.height = '200px'
el.style.background = 'blue';
document.body.appendChild(el)
Copy the code

Recommended index: 🌟🌟🌟

Separate HTML from JS

/* Bad practice. */ var ul = document.createElement('ul');
ul.innerHTML = `
    <li>li</li>
    <li>li</li>
    <li>li</li>
`
document.body.appendChild(ul)
Copy the code

Recommended index: 🌟🌟🌟

The configuration data

Dead-write values in applications can change frequently. Therefore, the configuration data is removed from the code and stored in the Config object, so that changes to the configuration data can be completely isolated from the code that uses the data

URL = 'http://xxxxx/index.html? xxx=123Copy the code

Recommended index: 🌟🌟🌟🌟

Componentization and modularization

A standard module should be “with a clear division of labor, single responsibility and no requirement logic”. It’s like a nail. You push it where you need it. Using modularity and componentization eliminates the repetitive work of building a wheel, reduces coupling, avoids logic errors, and makes a qualitative leap in your code

The resources

  1. Write maintainable javascript
  2. Ruan Yifeng’s network log