How to write good JavaScript

Preface

In actual work, we should often see some code that has no problem in function, but has very poor coding style and specifications. This often makes people afraid to read further, and even affects the reader's mood for the day. These codes are not only difficult to read, but also difficult to maintain. They are usually written by novice programmers who have just started programming, or by experienced programmers who have been working for several years. Therefore, the purpose of this article is to help JavaScript learners who have not developed a good coding style and lack awareness of corresponding coding standards to improve their coding image.

Coding image

Above I proposed the concept of coded image. I personally think:

编码形象 = 编码风格 +　编码规范

A good coding image is equivalent to a well-dressed young man. For programmers, this is the most direct and simple way for peers to understand your excellent abilities.

Let’s take a look at a bad coding image:

//打个招呼
function func(){
    var age=18,sex='man';
    var greeting='hello';
    if(age<=18&&sex==&#39;man&#39;){
        console.log(greeting+&#39;little boy&#39;)
    }

    ...
}
func()

The code above is huddled together, lacking awareness of standards, and the reading experience is very poor. It’s hard to bear to look at it.

Let’s look at a good code image:

// 打个招呼
function greetFn() {
    var age = 18,
        sex = 'man',
        greeting = 'hello';

    if (age <= 18 && sex === &#39;man&#39;) {
        console.log(greeting + &#39;little boy&#39;);
    }

    ...
};

greetFn();

Does the code above feel more comfortable?

It can be seen that it is crucial to develop a good coding image, and this article mainly explains the coding image based on JavaScript, that is, JavaScript-based coding style and coding specifications.

So what is coding style, what is coding specification, and what is the difference between the two?

Coding style

First of all, since coding style is a style, there is no right or wrong. Just like everyone dresses differently, some people dress more appropriately, and some people dress more casually.

In JavaScript coding style, there is also a relatively decent style. Especially in team development, we cannot write our own style at will.

Here are some random coding styles and compare them with good coding styles.

1. Reasonable comments

// 不推荐的写法
var name = '劳卜';//代码和注释之间没有间隔

if (name) {
    /*
     *注释之前无空行
     *星号后面无空格
     */
}

// 推荐的写法
var name = '劳卜'; // 代码和注释之间有间隔

if (name) {

    /*
     * 注释之前有空行
     * 星号后面有空格
     */
}

2. Reasonable intervals

// 不推荐的写法
var name='劳卜'; // 等号和两侧之间没有间隔

// if块级语句间没有间隔
if(name){
    console.log('hello');
}

rrree

3. Reasonable indentation

// 推荐的写法
var name = '劳卜'; // 等号和两侧之间有间隔

// if块级语句间有间隔
if (name) {
    console.log('hello');
}

rrree

4. Reasonable blank lines

// 不推荐的写法：没有合理缩进
function getName() {
console.log('劳卜'); 
}

rrree

5. Reasonable naming

// 推荐的写法：合理缩进
function getName() {
    console.log('劳卜');
}

rrree

6. Reasonable statement

// 不推荐的写法: 代码功能块之间没有空行
function getName() {
    var name = '劳卜';
    if (name) {
        console.log('hello');
    }
}

rrree

7. Reasonable ending

// 推荐的写法：代码功能块之间有空行
function getName() {
    var name = '劳卜';

    if (name) {
        console.log('hello');
    }
}

// 不推荐的写法
var getName = '劳卜'; // 变量命名前缀为动词

// 函数命名前缀为名词
function name() {
   console.log('hello');
}

The above mainly lists 7 examples of more common coding styles for comparison. There is no right or wrong between the recommended writing method and the not recommended writing method. It is just that the recommended writing method is easier to read and maintain. It is more suitable for team development and is also the embodiment of a good coding image.

Coding Standards

Regarding coding standards, since they are standards, we should write them according to certain rules. Randomly writing code that violates coding standards may lead to program errors and potential bugs, so it should be more rigorous than coding style, and some people will include coding style in coding standards.

Here are a few common example codes:

1. Comparison parameters

// 推荐的写法
var name = '劳卜'; // 变量命名前缀为名词

// 函数命名前缀为动词
function getName() {
   console.log('hello');
}

rrree

2. Wrap if statement

// 不推荐的写法：函数在声明之前使用
getName(); 

function getName() {
    console.log('hello');
}

// 推荐的写法：函数在声明之后使用
function getName() {
    console.log('hello');
}

getName();

3. Use eval with caution

// 不推荐的写法：没有使用分号结尾
var name = '劳卜' 

var getName = function() {
    console.log('hello')
}

// 推荐的写法：使用分号结尾
var name = '劳卜'; 

var getName = function() {
    console.log('hello');
};

4. Determine the type

// 不推荐的写法：==和!=比较时会进行类型转换，应尽量避免使用
var num = 123;

if (num == '123') {
    console.log(num);
} else if (num != '321') {
    console.log('321');
}

rrree

5. Detection attributes

// 推荐的写法：使用===和!==来进行比较
var num = 123;

if (num === '123') {
    console.log(num);
} else if (num !== '321') {
    console.log('321');
}

// 不推荐的写法：if语句不用大话号包裹会出现潜在bug
var num = 123;

if (num === '123')
    console.log(num);

The above mainly lists 5 examples of common coding standards. Reasonably standardizing your own code can greatly reduce unnecessary maintenance costs and potential bug risks. JavaScript learners should keep it in mind.

Conclusion

"Programs are written for people to read, and they are only occasionally executed by computers." We cannot destroy our own code image just for temporary convenience. This will bring unnecessary trouble to others and the entire project.

The content of this article is referenced from the book "Writing Maintainable JavaScript".

The above is the detailed content of How to write good JavaScript. For more information, please follow other related articles on the PHP Chinese website!