Make your JavaScript coding more standardized

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 dare not read any more, and even affects the reader's day. Feeling. 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.

Preface

In actual work, we should often see some codes that have no problems in function, but have very poor coding style and specifications. This often leads to It makes people afraid to read further, and may even affect 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 novices 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.

I have put forward the concept of coding image above. I personally think:

Coding image = coding style + Coding standardsA 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 all huddled together, lacking awareness of standards, and the reading experience is very poor, and 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?

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.

The following lists several casual coding styles and compares them with good coding styles.

1. ReasonableComments

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

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

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

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

2. Reasonable intervals

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

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

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

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

3. Reasonable indentation

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

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

4. Reasonable blank lines

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

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

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

5. Reasonable naming

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

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

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

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

6. Reasonable statement

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

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

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

getName();

7. Reasonable ending

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

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

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

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

For coding specifications, since they are specifications, 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. Compare parameters

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

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

2. Wrap if statement

// 推荐的写法：使用===和!==来进行比较
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);

3. Use eval with caution

// 推荐的写法：if语句用大话号包裹
var num = 123;
if (num === '123') {
 console.log(num);
}

// 不推荐的写法：应避免使用eval，不安全，非常耗性能（一次解析成js语句，一次执行）
var json = '{"name": "劳卜", "func": alert("hello")}';
eval('(' + json + ')'); // 弹出“hello”

4 .Judge the type

// 推荐的写法
var json = '{"name": "劳卜", "func": alert("hello")}';
JSON.parse(json); // 校验报错

// 不推荐的写法：用typeof来判断构造函数创建的对象
var str = new String('劳卜'); 
console.log(typeof str); // 'object'

5.Detect the attribute

// 推荐的写法：用instanceof来判断构造函数创建的对象
var str = new String('劳卜'); 
console.log(str instanceof String); // true

// 不推荐的写法：使用undefined和null来检测一个属性是否存在
if (obj['name'] !== undefined) {
 console.log('name属性存在'); // 若obj.name为undefined时则会导致判断出错
}
if (obj['name'] !== null) {
 console.log('name属性存在'); // 若obj.name为null时则会导致判断出错
}

"Programs are written for humans to read, and they are only occasionally executed by computers." We cannot destroy our own code just for the sake of temporary convenience. image, which can cause unnecessary trouble for others and the entire project.

The above is the detailed content of Make your JavaScript coding more standardized. For more information, please follow other related articles on the PHP Chinese website!