网站首页 > 技术文章 正文
作者：刘小夕
转发链接：https://mp.weixin.qq.com/s/-peybRskICsppajeFR5_LQ
前言
关于程序员开发规范，小编之前也整理了不少的优质文章：
你需要的 React + TypeScript 50 条规范和经验
大厂Code Review总结Vue开发规范经验「值得学习」
今天有整理一篇编码标准可以帮助以下方面：
- 保持代码一致
- 易于阅读和理解
- 易于维护
下面的编码标准是我对上述几点有帮助的看法。
1. 比较时使用 === 代替 ==
这很重要，因为JavaScript是一种动态语言，因此使用==可能会给您带来意想不到的结果，因为它允许类型不同。
Fail：
if (val == 2)Pass：
if (val === 2)2. 永远不要使用 var，使用 let 来代替
使用 let 将有助于避免 JavaScript 中各种 var 引起的作用域问题。
Fail：
var myVar = 10;Pass：
let myVar = 10;3. 使用 const 代替 let
这阻止了开发人员尝试更改不应该做的事情，并且确实有助于提高可读性。
Fail：
let VAT_PERCENT = 20;Pass：
const VAT_PERCENT = 20;4. 始终使用分号（;）
尽管这在 JavaScript 中是可选的，并不像其它语言一样需要分号作为语句终止符。但是使用 ; 有助于使代码保持一致。
Fail：
const VAT_PERCENT = 20;
let amount = 10
return addVat(amount, vatPercent)Pass：
const vatPercent = 20;
let amount = 10;
return addVat(amount, vatPercent);5. JavaScript中的命名约定
- let 应该使用驼峰命名。
- const 如果在文件的顶部使用大写的蛇形命名法。如果不在文件顶部，请使用驼峰命名。
- class 应该是帕斯卡命名法:MyClass
- functions 函数应该是驼峰命名法:myFunction
6. 拼接字符串时使用模板字符串
模板字符串中允许嵌入表达式。
Fail：
let fullName = firstName + " " + lastName;Pass：
let fullName = `${firstName} ${lastName}`;7. 尽可能使用ES6箭头函数
箭头函数是编写函数表达式的更简洁的语法。
Fail：
var multiply = function(a, b) {
return a* b;
};Pass：
const multiply = (a, b) => { return a * b};8. 始终在控制结构周围使用大括号
所有控制结构都必须使用花括号（例如，if，else，for，do，while等），这样后期维护时，不容易出错。
Fail：
if (valid)
doSomething();
if (amount > 100)
doSomething();
else if(amount > 200)
doSomethingElse();Pass：
if (valid) {
doSomething();
}
if (amount > 100) {
doSomething();
}
else if(amount > 200) {
doSomethingElse();
}9. 确保大括号从同一行开始，中间有空格
Fail：
if (myNumber === 0)
{
doSomething();
}Pass：
if (myNumber === 0) {
doSomething();
}10. 尝试减少嵌套
if 中嵌套if 会变得混乱并且很难阅读。有时你可能无法解决问题，但是可以好好查看代码，看看是否可以改进。
Fail：
if (myNumber > 0) {
if (myNumber > 100) {
if (!hasDiscountAlready) {
return addDiscountPercent(0);
} else {
return addDiscountPercent(10);
}
} else if (myNumber > 50) {
if (hasDiscountAlready) {
return addDiscountPercent(5);
}
} else {
if (!hasDiscountAlready) {
return addDiscountPercent(0);
} else {
return addDiscountPercent(1);
}
}
} else {
error();
}Pass：
if (myNumber <= 0) {
return error;
}
if (!hasDiscountAlready) {
return addDiscountPercent(0);
}
if (myNumber > 100) {
return addDiscountPercent(10);
}
if (myNumber > 50) {
return addDiscountPercent(5);
}
return addDiscountPercent(1);通过上面的示例可以看出，减少嵌套之后，会变得容易阅读。
11. 尽可能使用默认参数
在 JavaScript 中，如果你在调用函数时没有传递参数，则它的值就是 undefined
Fail：
myFunction(a, b) {
return a + b;
}Pass：
myFunction(a = 0, b = 0) {
return a + b;
}12. `Switch` 语句应使用 `break` 并具有 `default`
我通常会尝试不使用 switch 语句，但是你确实想使用它，请确保每个条件都break ，并写了 defalut。
Fail：
switch (myNumber)
{
case 10:
addDiscountPercent(0);
case 20:
addDiscountPercent(2);
case 30:
addDiscountPercent(3);
}Pass：
switch (myNumber)
{
case 10:
addDiscountPercent(0);
break;
case 20:
addDiscountPercent(2);
break;
case 30:
addDiscountPercent(3);
break;
default:
addDiscountPercent(0);
break;
}13. 不要使用通配符导入
Fail：
import * as Foo from './Foo';Pass：
import Foo from './Foo';14. 使用布尔值的快捷方式
Fail：
if (isValid === true)
if (isValid === false)Pass：
if (isValid)
if (!isValid)15. 尝试避免不必要的三元语句
Fail：
const boo = a ? a : b;Pass：
const boo = a || b;总结
任何语言的编码标准都可以真正帮助提高应用程序的可读性和可维护性。如果你在团队中工作，那么一件很难的事情就是强制执行编码标准。这里有一些建议可以帮助你：
- 代码审查，逐行Pass代码。
- 整理或使用某种代码分析器
- 创建新内容时，让你们的一位高级开发人员初始化，其他开发人员可以使用该代码作为指导。
推荐JavaScript学习相关文章
《手写一个Promise/A+ 完美通过官方872个测试用例》
《Node.js 实现抢票小工具&短信通知提醒（上）「干货」》
《Node.js 实现抢票小工具&短信通知提醒（下）「干货」》
《学习 jQuery 源码整体架构，打造属于自己的 js 类库》
《Angular v10.0.0 正式发布，不再支持 IE9/10》
《「实践」浏览器中的画中画（Picture-in-Picture）模式及其 API》
《「多图」一文带你彻底搞懂 Web Workers （上）》
《「多图」一文带你彻底搞懂 Web Workers （中）》
《webpack4主流程源码解说以及动手实现一个简单的webpack（上）》
《webpack4主流程源码解说以及动手实现一个简单的webpack（下）》
《前后端全部用 JS 开发是什么体验（Hybrid + Egg.js经验分享）上》
《前后端全部用 JS 开发是什么体验（Hybrid + Egg.js经验分享）中》
《前后端全部用 JS 开发是什么体验（Hybrid + Egg.js经验分享）下》
《一文带你搞懂 babel-plugin-import 插件（上）「源码解析」》
《一文带你搞懂 babel-plugin-import 插件（下）「源码解析」》
《教你如何使用内联框架元素 IFrames 的沙箱属性提高安全性？》
《细说DOM API中append和appendChild的三个不同点》
《NodeX Component - 滴滴集团 Node.js 生态组件体系「实践」》
《浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务》
《了不起的 Webpack HMR 学习指南（上）「含源码讲解」》
《了不起的 Webpack HMR 学习指南（下）「含源码讲解」》
《图解 Promise 实现原理（二）：Promise 链式调用》
《图解 Promise 实现原理（三）：Promise 原型方法实现》
《图解 Promise 实现原理（四）：Promise 静态方法实现》
《使用Service Worker让你的 Web 应用如虎添翼（上）「干货」》
《使用Service Worker让你的 Web 应用如虎添翼（中）「干货」》
《使用Service Worker让你的 Web 应用如虎添翼（下）「干货」》
《一个轻量级 JavaScript 全文搜索库，轻松实现站内离线搜索》
《细品269个JavaScript小函数，让你少加班熬夜（一）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（二）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（三）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（四）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（五）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（六）「值得收藏」》
《手把手教你7个有趣的JavaScript 项目-上「附源码」》
《手把手教你7个有趣的JavaScript 项目-下「附源码」》
《JavaScript 使用 mediaDevices API 访问摄像头自拍》
《一文彻底搞懂JavaScript 中Object.freeze与Object.seal的用法》
《可视化的 JS：动态图演示 - 事件循环 Event Loop的过程》
《可视化的 js：动态图演示 Promises & Async/Await 的过程》
《Pug 3.0.0正式发布，不再支持 Node.js 6/8》
《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》
《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》
《JavaScript 已进入第三个时代，未来将何去何从？》
《前端上传前预览文件 image、text、json、video、audio「实践」》
《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端开发规范：命名规范、html规范、css规范、js规范》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《面试中教你绕过关于 JavaScript 作用域的 5 个坑》
作者：刘小夕
转发链接：https://mp.weixin.qq.com/s/-peybRskICsppajeFR5_LQ
- 上一篇： 前端必须搜藏Vue版的团队代码规范
- 下一篇： 前端中常见的几种js代码规范工具
猜你喜欢
- 2024-09-22 重学前端基础:HTML有哪些语法?需要注意的书写规范
- 2024-09-22 硬核!!!web前端开发规范手册，建议白嫖，拿走不谢
- 2024-09-22 前端开发要遵守什么规范 如何成为企业急需人才
- 2024-09-22 前端项目工程化之规范化代码风格
- 2024-09-22 硬核!web前端开发规范手册，建议白嫖，拿走不谢
- 2024-09-22 前端项目工程化之git提交规范
- 2024-09-22 前端编写规范，这样写兼容性最好，最易读懂和维护
- 2024-09-22 团队 React 代码规范制定
- 2024-09-22 前端中常见的几种js代码规范工具
- 2024-09-22 前端必须搜藏Vue版的团队代码规范
欢迎 你 发表评论:
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论，来添加一个吧(●'◡'●)