如何编写高质量的前端代码(快手电商前端前端代码规范)

1.引言

1.1 为什么要写高质量的代码

在业务开发中，我们经常出现的一种情形，在项目初期高效地实现业务需求，但随着时间推移，添加新功能的速度逐渐减慢。我们需要花费更多的事件去思考如何将新功能塞进现有的代码库，不断蹦出来的bug修复起来也变得越来越难。代码库看起来就像在补丁上打补丁，最终需要进行繁琐的考古工作才能理解系统的运行方式。

高质量的代码通常更易于理解和修改，这可以减少在维护和更新代码时所需的时间和精力。高质量的代码通常更易于重用和扩展，这可以帮助开发者更快地开发新的功能和应用。高质量的前端代码通常意味着更少的错误，更快的加载速度，更好的响应性，这些都可以直接影响用户的体验。

好文章的标准有三条：思想、逻辑和修辞。思想是根本，是内容。逻辑与修辞则是形式，是工具。逻辑是理性的形式与工具，修辞是感性的形式与工具。写代码和写文章一样，首先保证的根本是功能可用，准确表达出业务含义；其次也要追求形式上的优雅，编码规范就是对代码的组织形式与风格的一种约束。好的代码不仅逻辑清晰，风格一致，而且无论多少人参与，都如同是一个人在编码。

1.2 什么是高质量的代码

• 有良好的可读性，代码应易于理解。如使用清晰的命名、保持函数和方法简短、使用注释来解释复杂的代码段等。应该尽可能地简洁，避免不必要的复杂性和冗余。在一个项目中，代码应该有一致的风格和模式。这使得代码更易于阅读和理解。

• 可为维护性高，应该易于修改和扩展。这通常意味着代码应该遵循某种设计模式，避免过度复杂的依赖关系，并且有良好的模块化。好的代码应该是直观的，当有人需要进行修改时，他们应能迅速找到需要修改的部分，能够快速进行更改，而且不容易引入新的错误。

• 健壮性有考量，对于边界场景有覆盖和处理。应该能够处理各种预期和未预期的输入情况，并在出现问题时优雅地失败。遵循最佳的安全实践，避免可能的安全漏洞。

• 高效运行，提供优异的用户体验。较少的资源文件数量和大小；地理位置更近的CDN资源请求，资源懒加载；合理的数据结构和算法，减少CPU时间、内存使用和磁盘I/O。

1.3 如何编写高质量的代码

• 工程师的编码素养

编程不仅仅是关于如何编写出能够运行的代码，它更是关于如何编写出优雅高效、易于维护的代码。这种艺术涉及到的不仅仅是技术层面的问题，更是关于思维方式、解决问题的策略、以及对于质量和细节的追求。优秀的编程艺术，就像一座建筑的设计，既要考虑到功能和效率，也要考虑到美感和人性化。

前端开发涉及到许多不同的技术和工具，如果开发者对这些技术和工具的理解不够深入，或者缺乏必要的编程技能，可能会难以编写高质量的代码。在工作协同上，我们也常常需要在项目里程碑节点和有限的资源中寻找平衡。因此，是对我们软性素质和专业技能的双重考验。

• 电商前端研发规范

前端开发已经成为了软件工程的重要组成部分。它是用户与应用程序之间的桥梁，直接影响着用户体验和满意度。然而，前端开发的复杂性和挑战性也在不断增加，涉及到多种技术、工具、框架，以及不断变化的业务需求和用户期望。因此，建立一套有效的前端团队研发规范，对于提高开发效率、保证代码质量、促进团队协作，以及满足业务和用户需求，具有至关重要的意义。

前端团队研发规范不仅包括编码规范，也包括研发流程规范、代码审查规范、安全与性能规范等等。这些规范应该反映出对质量、效率、协作和持续改进的追求。大家应对规范活学活用，使我们能够更好地应对挑战，提供优秀的产品和服务，以满足业务和用户的期望。

2.工程师的编码素养

先从形成良好的编码习惯开始，注重编程的基本素养和要求。先写出可读性、可维护性高的代码。再逐步提升专业技能，写出健壮、高效、交互优异的代码，对业务工程的全声明周期进行把控，负责其功能迭代、架构设计、甚至项目重构。

2.1 有意义的命名

命名是开发过程中至关重要的技能，有一个易于理解的名字可以承载很信息，某种程度上是一种更好的注释，一个糟糕的命名，可能会引起别人的误解，对开发效率和项目质量影响很大；相反，遵循一套严格的命名规范，无论是对自己还是接手项目的人，都会大大降低代码的维护成本。命名规范涵盖的面比较广，一般包括变量或常量名、函数或类名、文件或工程目录名、工程名以及空间名等。

把信息装到名字里，从字面含义可以关联其代码中的用途。名字应该尽量精确、专业、不要有多余。不会误解的名字，阅读你代码的人应该理解你的本意，并且不会有其他的理解。

2.1.1 基本要求

• 选择专业的单词。比如分发事件时 send 可以用 dispatch 替代。

• 避免空泛的名字。如在定义变量时使用temp、arr、obj。

• 用具体的名字代替抽象的名字。比如我们定义一个订单状态，应使用orderState，而不是写成thisState。

• 使用前缀或后缀来给名字附带更多信息。比如用setPageSize来描述设置列表的分页条目数。

• 合理的名字长度。为作用域大的名字采用更长的名字。

• 利用名字的格式来表达含义。有目的的使用命名方式、大小写、下划线等。比如用全大写下划线命（MY_CONSTANT_NAME）方式表达常亮。

• 使用行业/团队范式命名。加上像is、has、can 或should这样的词，让布尔值变得更明确。类或者构造函数首字母大写。

以下列举的不规范的命名方式，在任何情况下，你都不应该考虑使用它们：

• 单词拼写错误

提交表单中，把 Form 写成了 From，如submitFrom

• 中英文混用

let chanpinList；这个变量名混用中英文，很不容易理解。除非是一些被创造出来但已经被广泛接受了的名词，如淘宝-taobao，微博-weibo，其他的情况都建议用英文;

• 中文词汇缩写

  比如表达服务市场时，直接使用fwsc，对于第一次接触的人完全不理解含义

• 以1-9或a-z命名

比如页面上有几个按钮，直接命名成 btn1，btn2，btn3，...或者 btnA，btnB，btnC，...，这样看似简单，实际上从这些命名里面读取不到任何信息，时间久了就加无法与业务对应

• 混用命名格式

比如表示评论列表，有地方叫 comments，另一个地方叫 comment-list，还有的地方叫 commentList，几种规范混在一起，就感觉很不规范

• 单复数不分

比如有两个操作，一个是下载全部订单数据，一个是下载当前订单数据，结果分别命名为 downloadOrderData 与 downloadOrder，如果没有单复数，是不能很好地表达出业务含义的

• 正反义词错用

比如有两个操作，一个是显示弹窗，一个是关闭弹窗，结果分别命名为 showEditDialog 与 closeEditDialog。show 和 close ，一个是显示，一个是关闭，显然不是一组正反义词

• 容易被过滤的单词

ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名

2.1.3 团队规范

• 变量命名规范

变量名【应该】使用小驼峰式命名法，且前缀应当是名词，尽量在名字中体现类型，如 length、count 表示数字，而name、title表示字符串；

// 好的变量命名方式
var maxCount = 10;
var tableTitle = 'LoginTable';
 
// 不好的变量命名方式
var setCount = 10;
var getTitle = 'LoginTable';

• 函数命名规范

函数名【应该】使用小驼峰式命名法，且前缀应当是动词，常用的动词前缀如下表所示；

// 好的函数命名方式
function queryProductList() {
  // ...
}

// 不好的函数命名方式
function productList() {
  // ...
}

• 常量命名规范

常量名【应该】使用全部使用大写字母和下划线来组合来命名，下划线用以分割单词；

// 好的常量命名方式
const MAX_IMAGE_SIZE = 10 * 1024 * 1024;

// 不好的常量命名方式
const MaxImageSize = 10 * 1024 * 1024;
const maximagesize = 10 * 1024 * 1024;
const maxImageSize = 10 * 1024 * 1024;

• 类或构造函数命名规范

类名或构造函数【应该】使用大驼峰式命名法，即首字母大写。类的成员属性和方法的命名跟变量和函数保持一致，只是私有属性和方法名应该以下划线开头；

// 构造函数名
function Student(name) {
  var _name = name; // 私有成员
 
  // 公共方法
  this.getName = function () {
    return _name;
  }
 
  // 公共方法
  this.setName = function (value) {
    _name = value;
  }
}