通过实践编写优雅的JavaScript代码

你见过似曾相识的感觉吗

如果你关心的是代码，不仅仅是它能否准确执行业务逻辑，还有代码本身怎么写，是否易读，那么你就要注意如何写出干净优雅的代码。作为一名专业的工程师，除了保证你的代码没有bug，能够正确完成业务逻辑之外，还应该保证你或者其他工程师能够在几个月后维护你的代码。您编写的每一段代码通常都不是一次性的工作，通常伴随着后续的迭代。如果代码不够优雅，将来维护这个代码的人(甚至你自己)都会非常痛苦。祈祷未来，面对这些不良代码的人不是自己，而是别人。

好了，我们来简单定义一下什么是干净优雅的代码：干净优雅的代码应该是不言自明的，容易理解的，并且容易修改或扩展一些功能。

现在，静下心来回想一下，当你接手前任留下的坏代码时，你有多少次默默说‘我*’:

我*，那到底是什么？''我*，这是什么代码？''我*，这个变量是什么？'

下图完美地展示了这种情况：

引用罗伯特马丁的名言来说明这种情况：

丑陋的代码也能实现功能。然而，不够优雅的代码往往会让整个开发团队跪在地上哭泣。

在本文中，我主要讲述如何用JavaScript编写干净优雅的代码，但原理与其他编程语言类似。

优雅的JavaScript代码的最佳实践

1.强类型验证

请使用====而不是==。

//如果处理不当，会极大地影响程序逻辑。就像，你期望向左走，但由于某种原因，你向右走了。0==false//true 0===false//false 2==' 2 '/true 2==' 2 '/false///example const value=' 500 '；if(值===500) {console.log(值)；//如果(值=='500') {console.log(值)，将无法到达它}；//将到达}2。变量命名

变量和字段的命名应该包含它们相应的真实含义。这使得在代码中搜索变得更容易，其他人也可以看到这些变量并更容易理解它们。

错误示范

让daysSLV=10让y=新日期()。getFullYear()；让ok；if(user . age 30){ ok=true；}正确示范

const MAX _ AGE=30让daysSinceLastVisit=10让currentYear=新日期()。getFullYear()；const isusserolderstanallowed=user . AGE MAX _ AGE；不要在变量名中添加不必要的单词。

错误示范

let nameValue让产品；正确示范

让名；让产品；不要强迫开发人员记住变量名的上下文。

错误示范

const users=['John '，' Marco '，' Peter ']；users . foreach(u={ dosometing()；dosomesingelse()；//.//.//.//.//这里有WTF的情况： WTF是' u '的意思？登记册(u)；});正确示范

const users=['John '，' Marco '，' Peter ']；users . foreach(user={ dosometing()；dosomesingelse()；//.//.//.//.注册(用户)；});不要向变量名添加冗余的上下文信息。

错误示范

const user={userName: 'John '，username : ' Doe '，userage : ' 28 ' }；user.userName正确示范

const user={name: 'John '，surname: 'Doe '，age : ' 28 ' }；user.name3.功能相关性

尽量使用足够长的名称来描述函数。通常一个函数会执行一个确定的动作或者意图，所以函数的名字应该是一个能够描述这个意图的动词或者表达式语句，包含函数的参数的命名也应该明确表达具体参数的含义。

错误示范

函数notif(user){//实现}演示正确

函数notify user(电子邮件地址){//implementation}防止函数参数过多。理想情况下，函数应该有两个参数。函数的参数越少，测试就越容易。

错误示范

函数get users(field，fromdate，todate) {//implementation}正确地演示了

函数getUsers({ field，fromDate，today }){//implementation } getUsers({ field s :[' name '，'姓氏，' email']，fromDate: '2019-01-01 '，today te : ' 2019-01-18 ' })；如果函数的某个参数有默认值，那么应该使用新的参数默认值语法，而不是在函数里使用|| 来判断。

错误的示范

函数创建形状(类型){ const shape type=type | | ' cube//.}正确的示范

函数创建形状(类型='cube') {//.}一个函数应该做一件事情。避免在一个函数里，实现多个动作。

错误的示范

函数notifyUsers(user){ users。foreach(用户={ const用户记录=数据库。查找(用户)；if(用户记录。is verified()){ notify(user)；}});}正确的示范

函数notifyVerifiedUsers(用户){ users。过滤器(isuserverised ).forEach(通知);}函数isUserVerified(用户){ const用户记录=数据库。查找(用户);返回用户记录。is verified()；}使用对象。分配来给对象设置默认值。

错误的示范

const Shapeconfig={ type : ' cube '，width: 200，height : null }；函数创建形状(配置){ config。type=config。类型| |“多维数据集”；配置。宽度=配置。宽度| | 250；配置。高度=配置。宽度| | 250；}创建形状(形状配置)；正确的示范

const shape config={ type : ' cube '，width: 200//排除'高度'键};函数创建形状(配置){ config=对象。赋值({ type : ' cube '，width: 250，height: 250}，config)；}创建形状(形状配置)；不要在函数参数中，包括某些标记参数，通常这意味着你的函数实现了过多的逻辑。

错误的示范

函数createFile(name，isPublic){ if(isPublic){ fs。create(` ./public/$ { name } `)；} else { fs。创建(名称)；}}正确的示范

函数创建文件(名称){ fs。创建(名称)；}函数创建公共文件(名称){创建文件(` ./public/$ { name } `)；}不要污染全局变量、函数、原生对象的原型。如果你需要扩展一个原生提供的对象，那么应该使用萨尔瓦多新的类和继承语法来创造新的对象，而不是去修改原生对象的原型。

错误的示范

数组。原型。my func=function my func(){//实现}；正确的示范

类超级阵列扩展了数组{myFunc() {//实现}}4。条件分支

不要用函数来实现否定的判断。比如判断用户是否合法，应该提供函数isUserValid()，而不是实现函数isUserNotValid()。

错误的示范

函数isUserNotBlocked(用户){//实现}if(！isUserNotBlocked(用户)){//实现}正确的示范

函数isUserBlocked(用户){//实现}if (isUserBlocked(用户)){//实现}在你明确知道一个变量类型是布尔的情况下，条件判断使用简写。这确实是显而易见的，前提是你能明确这个变量是布尔类型，而不是空或者未定义。

错误的示范

if (isValid===true) {//做点什么.}if (isValid===false) {//做点什么.}正确的示范

如果(isValid) {//做某事.}if(！isValid) {//做点什么.}在可能的情况下，尽量避免使用条件分支。优先使用多态和继承来实现代替条件分支。

错误的示范

汽车等级{//.getMaximumSpeed(){ switch(this。type){ case ' Ford ' :返回此。某些因素()。这个。其他因素()；案例'马自达：还这个。某些因素()；案例'迈凯伦' :返回这个。某个因素()-这个。其他因素()；}}}正确的示范

汽车等级{//.}福特级扩展汽车{//.getMaximumSpeed(){返回这个。某些因素()。这个。其他因素()；} }级马自达扩展汽车{//.getMaximumSpeed(){返回这个。某些因素()；} }级迈凯伦扩展汽车{//.getMaximumSpeed(){返回这个。某个因素()-这个。其他因素()；}}5.萨尔瓦多的类

在萨尔瓦多里，类是新规范引入的语法糖。类的实现和以前ES5里使用原型的实现完全一样，只是它看上去更简洁，你应该优先使用新的类的语法。

错误的示范

const Person=function(name) {if(！(Person的这个实例){抛出新错误('用' new '关键字实例化Person ')；} this.name=name};Person.prototype.sayHello=函数SayHello(){/* */}；const Student=函数(名称，学校){if(！(学生的此实例){抛出新错误('用' new '关键字实例化学生')；}Person.call(this，name)；这所学校=学校；};学生.原型=对象.创造(人.原型)；学生.原型.构造者=学生；student . prototype . printstrunk name=function printstrunk name(){/* */}；正确示范

类Person { constructor(name){ this . name=name；}sayHello() {/*.*/} }类Student扩展Person {构造函数(名称，学校){super(名称)；这所学校=学校；}printSchoolName() {/*.*/}}使用方法的链式调用。很多开源JS库都引入了函数的链式调用，比如jQuery和Lodash。链式调用将使代码更加简洁。在类的实现中，可以通过在每个方法的末尾简单地返回这个来实现链调用。

错误示范

类Person { constructor(name){ this . name=name；}set姓氏(姓氏){this .姓氏=姓氏；} SetAge(age){ this . age=age；}save() {console.log(this.name，this .姓氏，this . age)；} } const Person=new Person(' John ')；person.setSurname姓氏(' Doe ')；person . setage(29)；person . save()；正确示范

类Person { constructor(name){ this . name=name；}set姓氏(姓氏){this .姓氏=姓氏；//返回此链接返回此链接；} SetAge(age){ this . age=age；//返回此链接返回此链接；}save() {console.log(this.name，this .姓氏，this . age)；//返回此链接返回此链接；}}const person=new Person('John ')。设置姓氏(' Doe ')。setAge(29)。save()；6.避免冗余代码

一般来说，我们应该避免重复编写相同的代码，不应该有未使用的函数或死代码(永远不会执行的代码)。对于我们来说，编写冗余代码太容易了。例如，有两个组件，其中大多数具有相同的逻辑。但是，由于微小的差异或接近交付时间，您选择复制代码来修改它。在这种情况下，要去掉多余的代码，我们只能进一步提高组织的抽象性。

至于死代码，正如它的名字所表示的。这些代码的存在可能是在你开发的某个阶段，当你发现某个代码完全没有用的时候，你就把它们放在那里，而不是删除它们。您应该在代码中找到这样的代码，并删除这些永远不会执行的函数或代码块。我唯一能给你的建议是，当你决定再也不用一段代码时，立即删除它，否则你可能会忘记这段代码是干什么用的。

当您面对这些死代码时，可能如下图所示：

结论

以上建议只是可以改进代码实践的一部分。我在这里列出这几点，工程师经常违反。他们可能试图遵守这些做法，但有时由于各种原因，他们没有这样做。也许当我们处于项目的初始阶段时，我们确实遵守了这些做法，并保持了干净优雅的代码，但随着项目上线时间的临近，许多标准被忽略了，尽管我们会在被忽略的地方注明TODO或改革者(但如您所知，后来通常意味着永远不会)。

好了，就这样。我希望我们都能实践这些最佳实践，写出干净优雅的代码

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。