【前端开发必备小技巧】前端代码规范JavaScript篇

---

🟢 前端代码规范

规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。
引自《阿里规约》的开头片段:
…现代软件架构的复杂性需要协同开发完成，如何高效地协同呢?无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。

🟢 一、前端代码规范JavaScript篇

👉1、JavaScript规范

👉1.1、命名

1. 采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束
   反例:name /name/names
2. 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelcase风格，必须遵从驼峰形式。
   正例:1ocalvalue /getHttpMessage()/inputuserId
   其中 method 方法命名必须是 动词 或者 动词+名词 形式
   正例:saveshopcarData /openshopcarInfoDialog
   反例:save /open/show/go
   特此说明，增制查改，详情统一使用如下5个单词，不得使用其他(目的是为了统一各个端)
   add /update /delete /detail / get

• 附: 函数方法常用的动词:
  • get 获取 / set 设置,
  • add 增加 / remove 删除
  • create 创建 / destory 移除
  • start 启动 / stop 停止
  • open 打开 / close 关闭
  • read 读瑕 / write 写入
  • load 载入 / save 保存
  • create 创建 / destroy 销毁
  • begin 开始 / end 结束
  • backup 备份 / restore 恢复
  • import 导入 / export 导出
  • split 分割 / merge 合并
  • inject 注入 / extract 提取
  • attach 附着 / detach 脱离
  • bind 绑定 / separate 分离
  • view 查看 / browse 浏览
  • edit 编辑 / modify 修改
  • select 选取 / mark 标记
  • copy 复制 / paste 粘贴
  • undo 撤销 / redo 重做
  • insert 插入 / delete 移除
  • add 加入 / append 添加
  • clean 清理 / clear 清除
  • index 索引 /sort 排序
  • find 查找 / search 搜索
  • increase 增加 / decrease 减少
  • play 播放 / pause 暂停
  • launch 启动 / run 运行
  • compile编译 / execute 执行
  • debug 调试 / trace 跟踪
  • observe 观察 / listen 监听
  • build 构建 / publish 发布
  • input 输入 / output 输出
  • encode 编码 / decode 解码
  • encrypt 加密 / decrypt 解密
  • compress 压缩 / decompress解压缩
  • pack 打包 /unpack 解包
  • parse 解析 / emit 生成
  • connect 连接 / disconnect 断开
  • send 发送 / receive 接收
  • download 下载 / upload 上传
  • refresh 刷新 / sychronize 同步
  • update 更新 / revert 复原
  • lock 锁定 / unlock 解锁
  • check out 签出 / check in 签入
  • submit 提交 / commit 交付
  • push 推 / pull 拉
  • expand 展开 / collapse 折叠
  • begin 起始 / end 结束
  • start 开始 / finish 完成
  • enter 进入 / exit 退出
  • abort 放弃 / quit 离开
  • obsolete 废弃 / depreciate 废旧
  • collect 收集 / aggregate 聚集

3. 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要名字长。
   正例:MAX_STOCK_COUNT
   反例: MAX_COUNT

👉1.2、代码格式

使用2个空格进行缩进
正例:

if(x<y){
  x+=10;
}else{
  x+=1;
}

不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性

说明:任何情形，没有必要插入多个空行进行隔开。

👉1.3、字符串

统一使用单引号(')，不使用双引号(")。这在创建 HTML 字符串非常有好处:
正例:

let str='hello world'
let testDiv='<div id="test"></div'

反例

let str='hello world'
let testDiv="<div id='test'></div"

👉1.4、对象声明

1. 使用字面值创建对象
   正例:let user ={};
   反例:let user =new object();
2. 使用字面量来代替对象构造器

正例:

var user ={
  age:0,
  name:1,
  city:3
}

反例

var user =new object();
user.age =0;
user.name =0;
user.city =0;

👉1.5、使用 ES6,7

必须优先使用 ES6,7 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。

必须强制使用 ES6,ES7 的新语法，比如箭头的数、await / async，解构，let， for…of等等

👉1.6、 括号

下列关键字后必须有大括号(即使代码块的内容只有一行):if,else,for,while,do,switch,try,catch,finally,with.

正例:

if(condition){
  d5something();
}

反例

if(condition){d5something();}

👉1.7、 undefined 判断

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

正例:

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

反例

if(person === undefined){
}

👉1.8、 条件判断和循环最多三层

条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释。

👉1.9、 this 的转换命名

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

👉1.10、慎用 console.log

因 çonsole.log大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能

✒️总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见