JavaScript编程风格、代码规范

清疚 2021-12-15 01:41 312阅读 0赞

也写了挺长时间的js代码了，回过头来看看很多基础的问题都没有注意到，重新认真学习了一下代码规范，还是很有必要学习的，好的开始是成功的一半，如果连基本的规范都没有达到，那写出来的代码必然是漏洞百出的。正好这两天的工作很清闲，整理一波js的编程风格和代码规范。

一、基本的格式化

缩进层级：使用4个空格作为一个缩进层级

语句结尾：JS语句要以分号结尾

行的长度：建议将行的长度限制在80个字符

换行：通常会在运算符后换行，下一行会增加两个层级的缩进。

当给变量赋值时，第二行的位置应当和赋值运算符的位置保持对齐。

空行：在方法之间。

在方法中的局部变量（local variable）和第一条语句之间。

在多行或单行注释之前。

在方法内的逻辑片段之间插入空行，提高可读性。

命名：**“计算机科学只存在两个难题：缓存失效和命名。”——Phil Karlton**

变量和函数：**变量名**应当总是遵守**驼峰**（Camel Case）命名法，并且命名前缀应当是**名词**

**函数名**应当总是遵守**驼峰**（Camel Case）命名法，并且命名前缀应当是**动词****。**

用以下约定作为切入点可以让代码可读性更佳

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>动词</td> 
   <td>含义</td> 
  </tr> 
  <tr> 
   <td>can</td> 
   <td>函数返回一个布尔值</td> 
  </tr> 
  <tr> 
   <td>has</td> 
   <td>函数返回一个布尔值</td> 
  </tr> 
  <tr> 
   <td>is</td> 
   <td>函数返回一个布尔值</td> 
  </tr> 
  <tr> 
   <td>get</td> 
   <td>函数返回一个非布尔值</td> 
  </tr> 
  <tr> 
   <td>set</td> 
   <td>函数用来保存一个值</td> 
  </tr> 
 </tbody> 
</table>

常量：使用大写字母和下划线来命名 var MAX\_COUNT = 10;

构造函数：构造函数的命名遵照大驼峰命名法（Pascal Case），命名前缀常常是名词。

> ***Pascal Case和Camel Case都表示驼峰命名，二者的区别是Pascal Case以大写字母开始，而Camel Case以小写字母开始***

直接量：字符串：单引号和双引号均可，推荐使用双引号（Java只允许使用双引号）。多行字符使用字符串链接符（+）将字符串分成多份。

数字：不要省略小数点之前或之后的数字，禁止八进制直接量。

//不推荐写法
    var price = .1;
    var price = 10.;
    var num = 010;    //八进制写法已经被弃用
    
    //推荐写法
    var price = 10.00;
    var count = 10;
    var num = 0xA2;    //十六进制写法
    var num = 1e23;    //科学计数法

null：应当使用null的场景：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>用来初始化一个变量，这个变量可能被赋值成一个对象；&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>用来和一个已经初始化的变量比较，无论这个变量是否为一个对象；</p> </td> 
  </tr> 
  <tr> 
   <td> <p>当函数的参数期望是对象时，用作参数传入；</p> </td> 
  </tr> 
  <tr> 
   <td> <p>当函数的返回值期望是对象时，用作返回值传入；</p> </td> 
  </tr> 
 </tbody> 
</table>

不应当使用null的场景 ：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>不要使用null来检测是否传入了某个参数；</td> 
  </tr> 
  <tr> 
   <td>不要使用null来检测一个未初始化的变量；</td> 
  </tr> 
 </tbody> 
</table>

undefined：避免在代码中使用undefined，可以有效的确保只有在一种情况下typeof才会返回"undefined"：当变量未声明时。如果可以，则将其赋值为null。

当变量初始赋值为null，则表明这个变量最终很可能赋值为对象，typeof null返回"object"，这样就可以和undefined区分开了

对象直接量：避免使用构造函数创建对象。

二、注释

单行注释：独占一行的注释，用来解释下一行的代码。这个注释之前总有一个空行，且缩进层级与下一行代码一致。

在代码行的尾部注释。代码结束到注释之间至少有一个缩进。注释（包括之前的代码部分）不应当超过单行最大字符限制，如果超过了，就将这行注释放在当前代码行的上方。

被注释掉的大段代码。

多行注释：推荐Java的多行注释风格

/*
     *多行注释
     *这段注释包含两行文本
     */

使用注释：难以理解的代码；可能被误认为错误的代码；浏览器特性hack

文档注释：推荐使用文档生成工具来为JavaScript生成文档。JavaScript代码注释必须符合你所用的工具支持的格式。

需要注释的内容：所有的方法——应当对方法、期望的参数及可能的返回值添加注释描述；

所有的构造函数——应当对自定义类型和期望的参数添加注释描述；

所有包含文档化方法的对象——如果一个对象包含一个或多个附带文档注释的方法，那么对这个对象也应该适当的针对文档生成工具添加文档注释。

三、语句和表达式

### **所有的块语句都应当使用花括号** ###

花括号的对齐方式：

//Java风格，推荐使用
    if (codeition) {
        doSomething();
    } else {
        doSomethingElse();
    }
    
    //C#风格，不推荐使用，以免产生错误的分号自动插入
    if (codeition)
    {
        doSomething();
    }
    else
    {
        doSomethingElse();
    }

块语句间隔：

// 在语句名、圆括号和左花括号之间没有空格
    if(codeition){
        doSomething();
    }
    
    //在左圆括号之前和右圆括号之后各添加一个空格（推荐，是其他两种风格的折中）
    if (codeition) {
        doSomething();
    }
    
    // 在左圆括号前后和右圆括号前后各添加一个空格
    if ( codeition ) {
        doSomething();
    }

switch语句：case语句的“连续执行”：只要是有意为之并且添加了注释，就可以使用case语句的连续执行

switch (condition) {
        case "first":
        case "second":
            //代码
            break;
    
        case "third":
            //代码
    
            /* fall through */
        default:
            //代码
    }

default：从语法结构的角度考虑，即使default中什么也不做，也不应当省略default。

with语句：避免使用with语句；在严格模式下('use strict'),with语句是被明确禁止的，如果使用则报语法错误。

for循环：尽可能避免十一年continue，但也没有理由完全禁止使用，应该根据代码可读性来决定。

for-in循环：for-in循环是用来遍历对象属性的，避免用它来遍历数组。

所有的for-in循环都必须使用哈是OwnProperty()方法来过滤出实例属性。

for (var prop in object) {
        if (object.hasOwnProperty(prop)) {
            console.log("Property name is" + prop);
            console.log("Property value is" + object[prop]);
        }
    }

四、变量、函数和运算符

变量声明：注意变量声明提升

函数声明：注意函数声明提升：函数不应该出现在语句块之内；函数声明应该在条件语句的外部使用。

推荐先声明函数，然后再使用。

函数调用间隔：推荐风格：在函数名和左括号之间没有空格；doSomthing(item)

立即调用函数：将函数用一对圆括号包裹起来。

// 将函数用一对圆括号包裹起来
    var value = (function () {
        //函数体
    
        return {
            message: "Hi"
        }
    })();

严格模式：'use strict'；推荐尽量使用严格模式；尽量不要在全局作用域中使用严格模式；

如果希望在多个函数中应用严格模式可以使用立即执行函数。

(function(){
        'use strict';
    
        function doSomething() {
            // 代码
        }
    
        function doSomethingElse() {
            // 代码
        }
    })();

相等：==和!=比较会发生强制类型转换；推荐尽量使用===和!==进行比较；尽量避免使用eval()函数；

尽量避免使用原始包装类型创建对象。

// 不好的做法，应该尽量避免
    eval("alert('Hi!')");
    var myFunc = new Function("alert('Hi!')");
    setTimeout("document.body.style.background='red'",50);
    setInterval("document.title = 'It is now '" + (new Date()),1000);
    var name = new String("Nicholas");
    var author = new Boolean(true);
    var count = new Number(10);