前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >知识点归纳笔记:JavaScript编码规范你都了解多少?

知识点归纳笔记:JavaScript编码规范你都了解多少?

作者头像
用户1272076
发布2019-03-26 17:44:27
3570
发布2019-03-26 17:44:27
举报
文章被收录于专栏:张培跃张培跃

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

一、驼峰式命名法

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


二、变量(小驼峰式命名)
1、变量禁止滥用。当你的数据只使用一次或不使用时,没有将其放到变量的必要。
代码语言:javascript
复制
// 定义好了之后再也没使用过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;}

建议调整为:

代码语言:javascript
复制
function fn() {    let w = 1;    let h = 2;    return (w + h) * 2;}
2、变量尽量体现语意及所属类型
代码语言:javascript
复制
// 好的命名方式var minLength = 10;var userName = 'zhangpeiyue';
// 不好的命名方式var length = 10;var user = 'zhangpeiyue';

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

3、指定特定变量

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

代码语言:javascript
复制
// 无特定变量if (userName.length > 7) {// 7是个什么鬼?    //您的代码}
// 拥有特定变量const Max_Name_Length = 8;// 十分清晰,表示名字最大的长度if (userName.length > Max_Name_Length) {    //您的代码}
4、尽可能少使用全局变量

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

代码语言:javascript
复制
// home.jslet userName = "zhangSan";
// hello.jslet userName = "liSi";
// my.jslet userName = "wangWu";

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

5、变量赋值
代码语言:javascript
复制
const Max_Name_Length = 8;let userName = nameArr[0];if (userName.length > Max_Name_Length) {    //您的代码}

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

代码语言:javascript
复制
const Max_Name_Length = 8;let userName = fullName[0] || "";if (userName.length > Max_Name_Length) {    //您的代码}
6、变量比较

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

代码语言:javascript
复制
// 不建议:let userAge = 8;if(userAge == 8){    // 你的代码}
// 建议:let userAge = 8;if(userAge === 8){    // 你的代码}

三、函数(小驼峰式命名)

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

动词

解释

返回值类型

can

是否可执行

布尔值

has

是否有某值

布尔值

is

是否为某值

布尔值

get

获取某值

返回获得的值

set

设置某值

无或返回是否成功

load

加载数据

无返回是否完成

例如:

代码语言:javascript
复制
// 是否可写入function canWrite() {    return true;}
// 获取用户名称function getUserName() {    return this.userName;}
2、优先使用函数式编程
代码语言:javascript
复制
for(let i =0;i<ageArr.length;i++){    ageArr[i]+=1;}

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

代码语言:javascript
复制
ageArr.map(item => ++item);
3、函数中不要过多的采用if else ..
代码语言:javascript
复制
if (userAge === 1) {    // 你的代码} else if (userAge === 2) {    // 你的代码} else if (userAge === 3) {    // 你的代码} else {    // 你的代码 }

以上代码if else过多,建议采用:

代码语言:javascript
复制
switch (userAge){    case 1:        // 你的代码    case 2:        // 你的代码    case 3:        // 你的代码    default:        // 你的代码}

或者:

代码语言:javascript
复制
let handler={    1:()=>{        //你的代码    },    2:()=>{        //你的代码    },    3:()=>{        //你的代码    },    default:()=>{        //你的代码    }}handler[ageArr]() || handler["default"]()
4、尽量使用箭头函数(不解释)

四、构造函数(大驼峰式命名)

代码语言:javascript
复制
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、私有成员属性或方法需要加上前缀 _(下划线)

五、常量(名称全部大写)

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

代码语言:javascript
复制
var MAX_COUNT = 10;var SITE_URL = 'http://www.zhangpeiyue.com';

六、注释

1、单行注释

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

代码语言:javascript
复制
// 设置站点地址var SITE_URL = 'http://www.zhangpeiyue.com';

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

代码语言:javascript
复制
var SITE_URL = 'http://www.zhangpeiyue.com'; // 设置站点地址
2、多行注释

若开始( /*)和结束( */)都在一行,建议采用单行注释。

若至少三行注释时,第一行为 /*,最后行为 */,其他行以 *开始,并且注释文字与 *保留一个空格。

代码语言:javascript
复制
/** 代码执行到这里后会调用setTitle()函数* setTitle():设置title的值*/setTitle();

—————END—————

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-03-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 张培跃 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、驼峰式命名法
  • 二、变量(小驼峰式命名)
  • 三、函数(小驼峰式命名)
  • 四、构造函数(大驼峰式命名)
  • 五、常量(名称全部大写)
  • 六、注释
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档