前端代码规范(阿里) --- Javascript

程序员写好看的代码,不亚于写一行好看的字
好看的代码总是让人心旷神怡,
不好,不规范的代码,让人看了想说mmp,
那我们就来学习一下规范的代码怎么写的吧

以下来自B站的学习视频:前端必备-阿里大厂前端开发规范!

五、Javascript规范

(一) 命名

  • 采用小写驼峰命名 lowerCameCase,代码命名均不能以下划线开头,也不能以下划线或美元符号结尾

反例:_name / name_ / name$

  • 方法名、参数名、成员变量、局部变量统一采用驼峰命名风格

正确命名:localValue / getHttpMessage()

错误命名:localvalue / gethttpmessage()

  • 方法名 必须是 动词 或者 动词+名词 形式
  • 增删查改,统一使用如下 5 个单词
add  /  update  /  delete  /  get  /  detail

附:函数常用方法的动词:

get 获取       / set 设置
add 增加       / remove 删除
create 创建    / destory 移除
start 启动     / stop 停止
open 打开      / close 关闭
read 读取      / write写入
load 载入      / save 保存
begin 开始     / end 结束
backup 备份    / restore 恢复
import 导入    / export 导出
split 分割     / merge 合并
inject 注入    / extract 提取
  • 常量全部大写,单词之间用下划线隔开,力求语义表达完整清楚,不要嫌名字长

(二) 代码格式

  • 使用两个空格进行缩进
if (x < y) { 
	x += 10;
} else { 
	x += 1;
}
  • 不同逻辑,不同语义,不同业务之间插入一个空行分隔

(三) 字符串

统一使用单引号'',不使用双引号"",这对创建HTML字符串非常有好处

let str = 'foo';
let testDiv = '<div id="test"></div>'

(四) 对象声明

  • 使用字面量创建对象

推荐:

let user = [];

不推荐:

let user = new Object();
  • 使用字面量来代替对象构建器

推荐:

let user = { 
	age: 0
}

不推荐:

let user = new Object();
user.age = 0;

(五) 优先使用ES6、ES7、ES8的语法

简化程序,使代码更加灵活和可复用

如:箭头函数、await/async、解构、let、for…of 等

(六) 括号

下列关键词必须有大括号(即使代码只有一行):if / else / for / while / try / catch / finally / with

推荐:

if (isTrue) { 
	doSomeThing();
}

不推荐:

if (isTrue) doSomeThing();

(七) undefined判断

永远不要直接使用undefined进行变量判断;使用typeof 和字符串 'undefined'对变量进行判断

推荐:

if (typeof person === 'undefined') { 
	...
}

不推荐

if (person === undefined) { 
	...
}

(八) 条件判断和循环最多三层

条件判断能使用 三目运算符 和 逻辑运算符的,就不要使用条件判断。

如果超过三层的 ,抽成函数,并写清楚注释

(九) this的转换命名

对上下文 this的引用只能使用 self来命名

let self = this;

(十) 慎用 console.log

console.log会有性能问题,生产环境下请清除console.log

    原文作者:独坐空山后
    原文地址: https://blog.csdn.net/pig_is_duck/article/details/106180125
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞