JavaScript编码规范你都了解多少？

2019-03-18 本文已影响22人张培跃

"当我写这段代码的时候，只有上帝和我看得懂，现在...只有上帝看得懂。"这是一个调侃程序员代码的段子。
作为一名JS开发者，不规范的代码不仅极不利于团队的沟通合作，而且将来代码维护的成本也会增加，往往还会带来执行效率甚至安全方面的问题。所以代码质量的好坏有可能作为评判你技术高低以及是否拥有严谨代码风格的一个重要依据！
本文将针对Javascript的各种规范进行介绍，希望对各位有所益处！

一、驼峰式命名法

驼峰式命名法大家应该都比较熟悉了：驼峰式命名法又被称为骆驼命名法，它是由小(大)写字母开始，后续每个单词首字母都大写。其中首字母大写的命名称为大驼峰命名法（Pascal命名法），首字母小写的命名称为小驼峰命名法（Camel Case）。

二、变量（小驼峰式命名）

1、变量禁止滥用。当你的数据只使用一次或不使用时，没有将其放到变量的必要。

// 定义好了之后再也没使用过
let siteName = "zhangpeiyue.com";
// 变量太啰嗦
function fn() {
    let w = 1;
    let h = 2;
    let num = 2;
    let z = w + h;
    var e = z * num;
    return e;
}

建议调整为：

function fn() {
    let w = 1;
    let h = 2;
    return (w + h) * 2;
}

2、变量尽量体现语意及所属类型

// 好的命名方式
var minLength = 10;
var userName = 'zhangpeiyue';

// 不好的命名方式
var length = 10;
var user = 'zhangpeiyue';

注：变量的前缀一般为名词。length、count等一般表示数字类型，name、title等一般表示为字符串类型，arr表示数组。

3、指定特定变量

指定特定的变量往往会很大程度的提升你代码的可读性：

// 无特定变量
if (userName.length > 7) {// 7是个什么鬼？
    //您的代码
}

// 拥有特定变量
const Max_Name_Length = 8;
// 十分清晰，表示名字最大的长度
if (userName.length > Max_Name_Length) {
    //您的代码
}

4、尽可能少使用全局变量

一般在多个函数使用相同数据时，我们一般会将该数据设为全局变量。但全局变量过多，极有可能会造成命名冲突：

// home.js
let userName = "zhangSan";

// hello.js
let userName = "liSi";

// my.js
let userName = "wangWu";

以上代码会根据加载顺序让其具有不同含义。所以尽量将你的代码模块化，或使用局部变量（通过(){}的方法）。如果你的全局变量需要共享，你可以根据所处环境使用vuex或redux等。

5、变量赋值

const Max_Name_Length = 8;
let userName = nameArr[0];
if (userName.length > Max_Name_Length) {
    //您的代码
}

以上代码明显不够严谨，倘若nameArr是一个空数组，nameArr[0]得到的值就是undefined，而undefined是没有length属性的，此时程序定会报错！无疑以上代码成功埋下了一个定时炸弹。所以我们需要将代码进行优化：

const Max_Name_Length = 8;
let userName = fullName[0] || "";
if (userName.length > Max_Name_Length) {
    //您的代码
}

6、变量比较

变量比较请养成使用===运算符的习惯，因为它不需要对类型进行转换，比较严谨！

// 不建议：
let userAge = 8;
if(userAge == 8){
    // 你的代码
}

// 建议:
let userAge = 8;
if(userAge === 8){
    // 你的代码
}

三、函数（小驼峰式命名）

1、函数的前缀一般为动词

动词	解释	返回值类型
can	是否可执行某个动作（权限）	布尔值
has	是否含有某个值	布尔值
is	是否为某个值	布尔值
get	获取某个值	返回获得的值
set	设置某个值	无返回值或返回是否设置成功或返回链式对象
load	加载某些数据	无返回值或返回是否加载完成的结果

例如：

// 是否可写入
function canWrite() {
    return true;
}

// 获取用户名称
function getUserName() {
    return this.userName;
}

2、优先使用函数式编程

for(let i =0;i<ageArr.length;i++){
    ageArr[i]+=1;
}

以上代码实现了将数组ageArr的所有元素分别加1，但一看到for循环是不是很头疼？以上代码可以优化为：

ageArr.map(item => ++item);

3、函数中不要过多的采用if else ..

if (userAge === 1) {
    // 你的代码
} else if (userAge === 2) {
    // 你的代码
} else if (userAge === 3) {
    // 你的代码
} else {
    // 你的代码 
}

以上代码if else过多，建议采用：

switch (userAge){
    case 1:
        // 你的代码
    case 2:
        // 你的代码
    case 3:
        // 你的代码
    default:
        // 你的代码
}

或者：

let handler={
    1:()=>{
        //你的代码
    },
    2:()=>{
        //你的代码
    },
    3:()=>{
        //你的代码
    },
    default:()=>{
        //你的代码
    }
}
handler[ageArr]() || handler["default"]()

4、尽量使用箭头函数（不解释）

四、构造函数（大驼峰式命名）

function Student(name) {
    var _name = name; // 私有成员
    
    // 公共方法
    this.getName = function () {
        return _name;
    }

    // 公共方式
    this.setName = function (value) {
        _name = value;
    }
}
var st = new Student('tom');
st.setName('jerry');
console.log(st.getName()); // => jerry：输出_name私有变量的值

需要注意：1、构造函数首字母大写。2、私有成员属性或方法需要加上前缀_(下划线)

五、常量（名称全部大写）

全部使用大写字母和下划线来组合命名，下划线用以分割单词：

var MAX_COUNT = 10;
var SITE_URL = 'http://www.zhangpeiyue.com';

六、注释

1、单行注释

单独一行：//(双斜线)与注释文字之间保留一个空格。

// 设置站点地址
var SITE_URL = 'http://www.zhangpeiyue.com';

在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。

var SITE_URL = 'http://www.zhangpeiyue.com'; // 设置站点地址

2、多行注释

若开始(/*)和结束(*/)都在一行，建议采用单行注释。
若至少三行注释时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。

/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/
setTitle();

—————END—————

喜欢本文的朋友们，欢迎关注微信公众号张培跃，收看更多精彩内容