怎么编写js函数来提高代码的质量

魁首哥

作者

怎么编写js函数来提高代码的质量

这篇文章主要介绍了怎么编写js函数来提高代码的质量的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么编写js函数来提高代码的质量文章都会有所收获，下面我们一起来看看吧。

函数是实现程序功能的最基本单位，每一个程序都是由一个个最基本的函数构成的。写好一个函数是提高程序代码质量最关键的一步。本文就函数的编写，从函数命名，代码分布，技巧等方面入手，谈谈如何写好一个可读性高、易维护，易测试的函数。

怎么编写js函数来提高代码的质量

命名

首先从命名说起，命名是提高可读性的***步。如何为变量和函数命名一直是开发者心中的痛点之一，对于母语非英语的我们来说，更是难上加难。下面我来说说如何为函数命名的一些想法和感受：

采用统一的命名规则

在谈及如何为函数取一个准确而优雅的名字之前，首先最重要的是要有统一的命名规则。这是提高代码可读性的最基础的准则。
帕斯卡命名法和驼峰命名法是目前比较流行的两种规则，不同语言采用的规则可能不一样，但是要记住一点：保持团队和个人风格一致。

1、帕斯卡命名法

帕斯卡命名法简单地说就是：多个单词组成一个名称时，每个单词的首字母大写。比如：

publicvoidSendMessage();publicvoidCalculatePrice();

在C#中，这种命名法常用于类、属性，函数等等，在JS中，构造函数也推荐采用这种方式命名。

2、驼峰命名法

驼峰命名法和帕斯卡命名法很类似，多个单词组成一个名称时，***个单词全部小写，后面单词首字母大写。比如：

varsendMessage=unction(){};varcalculatePrice=function(){};

驼峰命名法一般用于字段、局部变量、函数参数等等。，在JS中，函数也常用此方法命名。

采用哪种命名规则并不绝对，最重要的是要遵守团队约定，语言规范。

尽可能完整地描述函数所做的所有事情

有的开发者可能觉得相较于长函数名来说，短函数名看起来可能更简洁，看起来也更舒服。但是通常来说，函数名称越短其描述的意思越抽象。函数使用者对函数的***印象就是函数名称，进而了解函数的功能，我们应该尽可能地描述到函数所做的所有事情，防止使用者不知道或误解造成潜在的错误。

举个例子，假设我们做一个添加评论的功能，添加完毕后并返回评论总数量，如何命名比较合适呢？

//描述不够完整的函数名varcount=functionaddComment(){}//描述完整的函数名varcount=functionaddCommentAndReturnCount(){};

这只是简单的一个例子，实际开发中可能会遇到得更多复杂的情况，单一职责原则是我们开发函数要遵守的准则，但是有时候无法做到函数单一职责时，请记得函数名应该尽可能地描述所有事情。当你无法命名一个函数时，应该分析一下，这个函数的编写是否科学，有什么办法可以去优化它。

采用准确的描述动词

这一点对母语非英语的开发者来说应该是比较难的一点，想要提高这方面的能力，最主要的还是要提高词汇量，多阅读优秀代码积累经验。

这里简单说说我自己的一些感想和看法：

1、不要采用太抽象广泛的单词

很多开发人员会采用一个比较宽泛的动词来为函数命名，最典型的一个例子就是get这个单词。我们平时开发中经常会通过各种不同的方式拿到数据，但是每一种方式都用get就有点太抽象了。具体如何命名，要具体分析：

（1）简单的返回数据

Person.prototype.getFullName=function(){returnthis.firstName=this.lastName;}

（2）从远程获取数据

varfetchPersons=function(){...$.ajax({})}

（3）从本地存储加载数据

varloadPersons=function(){};

（4）通过计算获取数据

varcalculateTotal=function(){};

（5）从数组中查找数据

varfindSth=function(arr){};

（6）从一些数据生成或得到

varcreateSth=function(data){};varbuildSth=function(data){};varparseSth=function(data){};

这是一个简单的例子，我们平时开发中遇到的情况肯定会复杂得多，关键还是靠单词的积累，多阅读优秀源码

下面是整理的一些常用的对仗词，大家可以参考使用

add/removeincrement/decrementopen/closebegin/endinsert/deleteshow/hidecreate/destorylock/unlocksource/targetfirst/lastmin/maxstar/stopget/putnext/previousup/downget/setold/new

根据不同项目和需求制定好命名规则

这一点也是很重要的，尤其是在团队合作中，不同的项目和需求可能导致的不同的命名规则。
比如我们通常采用的命名规则是动宾结构，也就是动词在前，名词灾后。但是有一些项目，比如数据接口等项目中，有的团队会采用名字在前，动词在后的形式，例如：

publicstaticProduct[]ProductsGet(){};publicstaticProduct[]ProductsDel(){};publicstaticCustomer[]CustomerDel(){};publicstaticCustomer[]CustomerDel(){};

这种的好处是看到前面的名词，比如ProductsGet，就能很快的知道这是产品相关的数据接口。
当然这个并不是绝对的，关键还是要团队共同制定和遵守同一套命名规则。

函数参数

函数使用者在调用函数时，必须严格遵守函数定义的参数，这对函数的易用性，可测试性等方面都是至关重要的。下面我从几个方面来谈谈关于如何优化好函数参数的一些想法。

参数数量

毫无疑问，函数参数越多，函数的易用性就越差，因为使用者需要严格眼中参数列表依次输入参数，如果某个参数输错，将导致不可意料的结果。

但是，函数参数就一定越少越好吗？我们来看看下面的例子：

varcount=0;varunitPrice=1.5;.......varcalculatePrice=function(){returncount*unitPrice;}

在这个例子中，我们通过calculatePrice这个函数来计算价格，函数不接收任何参数，直接通过两个全局变量unitPrice和 count进行计算。这种函数的定义对使用者来说非常方便，直接调用即可，不用输入任何参数。但是这里可能会有潜在的bug：全局变量可能在其他地方被修改成其他值了，难以进行单元测试等等问题。所以，这个函数可以传入数量和价格信息：

varcalculatePrice=function(count,unitPrice){returncount*unitPrice;}

这种方式下，函数使用者在使用时，要传入参数进行调用，避免了全局变量可能存在的问题。另外也降低了耦合，提高了可测试性，在测试的时候就不必依赖于全局变量。

当然，在保证函数不依赖于全局变量和测试性的情况下，函数参数还是越少越好。《代码大全》中提出将函数的参数限制在7个以内，这个可以作为我们的参考。
有的时候，我们不可避免地要使用超过10个以上函数，在这中情况下，我们可以考虑将类似的参数构造成一个类，我们来看看一个典型的例子。

我相信大家平时一定做过这样的功能，列表筛选，其中涉及到各种条件的筛选，排序，分页等等功能，如果将参数一个一个地列出来必定会很长，例如：

varfilterHotel=function(city,checkIn,checkOut,price,star,position,wifi,meal,sort,pageIndex){}

这是一个筛选酒店的函数，其中的参数分别是城市，入住和退房时间，价格，***，位置，是否有wifi，是否有早餐，排序，页码等等，实际的情况可能会更多。在这种参数特别多的情况下，我们可以考虑将一些相似的参数提取成类出来：

functionDatePlace(city,checkIn,checkOut){this.city=city;this.checkIn=checkIn;this.checkOut=checkOut}functionHotelFeature(price,star,position,wifi,meal){this.price=price;this.star=star;this.position=position;this.wifi=wifi;this.meal=meal;}varfilterHotel=function(datePlce,hotelFeature,sort,pageIndex){};

将多个参数提取成对象了，虽然对象数量增多了，但是函数参数更清晰了，调用起来也更方便了。

尽量不要使用bool类型作为参数

有的时候，我们会写出使用bool作为参数的情况，比如：

vargetProduct=function(finished){if(finished){}else{}}//调用getProduct(true);

如果没有注释，使用者看到这样的代码：getProduct(true)，他肯定搞不清楚true是代表什么意思，还要去查看函数定义才能明白这个函数是如何使用的。这就意味着这个函数不够清晰，就应该考虑去优化它。通常有两种方式去优化它：

（1）将函数一分为二，分成两个函数getFinishedProduct和getUnFinishedProduct
（2）将bool转换成有意义的枚举getProduct(ProductStatus)

不要修改输入参数

如果输入参数在函数内被修改了，很有可能造成潜在的bug，而且使用者不知道调用函数后居然会修改函数参数。
正确使用输入参数的做法应该是只传入参数用于函数调用。

如果不可避免地要修改，一定要在注释中说明。

尽量不要使用输出参数

使用输出参数说明这个函数不只做了一件事情，而且使用者使用的时候可能还会感到困惑。正确的方式应该是分解函数，让函数只做一件事。

编写函数体

函数体就是实现函数功能的整个逻辑，是一个函数最关键的地方。下面我谈谈关于函数代码编写的一些个人想法。

相关操作放在一起

有的时候，我们会在一个函数内进行一系列的操作来完成一个功能，比如：

varcalculateTotalPrice=function(){varroomCount=getRoomCount();varmealCount=getMealCount();varroomPrice=getRoomPrice(roomCount);varmealPrice=getMealPrice(mealCount);returnroomPrice+mealPrice;}

这段代码计算了房间价格和早餐价格，然后将两者相加返回总价格。

这段代码乍一看，没有什么问题，但是我们分析代码，我们先是分别获取了房间数量和早餐数量，然后再通过房间数量和早餐数量分别计算两者的价格。这种情况下，房间数量和计算房间价格的代码分散在了两个位置，早餐价格的计算也是分散到了两个位置。也就是两部分相关的代码分散在了各处，这样阅读起代码来逻辑会略显不通，代码组织不够好。我们应该让相关的语句和操作放在一起，也有利于重构代码。我们修改如下：

varcalculateTotalPrice=function(){varroomCount=getRoomCount();varroomPrice=getRoomPrice(roomCount);varmealCount=getMealCount();varmealPrice=getMealPrice(mealCount);returnroomPrice+mealPrice;}

我们将相关的操作放在一起，这样代码看起来更清晰了，而且也更容易重构了。

尽量减少代码嵌套

我们平时写if，switch或for语句是常有的事儿，也一定写过多层if或for语句嵌套的情况，如果代码里的嵌套超过3层，阅读起来就会非常困难了。我们应该尽量避免代码嵌套多层，***不要超过2层。下面我来说说我平时一些减少嵌套的技巧或方法。

if语句嵌套的问题

多层if语句嵌套是常有的事情，有什么好的方法可以减少嵌套呢？

1、尽早终止函数或返回数据

如果符合某个条件下可以直接终止函数，则应该将这个条件放在***位。我们来看看下面的例子。

if(condition1){if(condition2){if(condition3){}else{return;}}else{return;}}else{return;}

这段代码中if语句嵌套了3层，看起来已经很复杂了，我们可以将***面的return提取到最前面去。

if(!condition1){return;}if(!condition2){return;}if(!condition3){return;}//doSth

这段代码中，我们把condition1等于false的语句提取到前面，直接终止函数，将多层嵌套的if语句重构成只有一层if语句，代码也更清晰了。

注意：一般情况下，我们写if语句会将条件为true的情况写在前面，这也比较符合我们的思维习惯。如果是多层嵌套的情况，应该优先减少if语句的嵌套