HTML5学堂-码匠:掌握JavaScript代码的你,一定编写封装过函数,为了提升函数的控制性,必不可少的就是参数,必选可选的一大堆参数罗列出来,函数调用貌似变得麻烦起来~~~

Tips:
必选参数指的是必须要传入实参的参数;
可选参数在函数中有默认值,如有传入实参,则取实参的值,如果没有传入实参,则使用默认值。

函数的众多参数问题

当一个函数既有必选参数,又有可选参数,在定义函数时,我们可能采取的方式是:无论参数是可选参数还是必选参数,都将参数罗列下来(通常按照先必选再可选的顺序)
但是这样的罗列方法,会导致一些问题的产生!
举例来说:有一个功能函数h5course,name和domain为其必选参数,而minAPP和book为其可选参数,而我们如此定义函数:

clipboard.png

此时,调用函数,需要传入name、domain、book这三个参数,那么,问题来了!
由于在函数定义当中,book的参数位置位于minApp参数之后,在调用函数时,如果希望为book这个参数传入值,就必须按照如下方式进行书写:

h5course('name参数值', 'domain参数值', '', 'book参数值');

不难发现,当前第三个参数的处理就变得麻烦起来。于是乎,可能很多人会在函数中通过添加if判断,来进行参数控制 ——

clipboard.png

此时仍然存在这样两个问题:
第一,函数的调用者必须要了解函数内部的参数判断方式,才能够正确书写“不需要的可选参数”
第二,在调用多个可选参数的函数时,调用代码会变得很麻烦(当然你可以为函数添加注释,降低使用时的难度)

更好的函数参数书写方法!

面对如上的这些问题,下面这种方法,你值得拥有!

  1. 用对象替代掉原有的单个参数传递方式
  2. 函数内部使用arguments替换原有的形参
  3. 利用for-in循环,修改可选参数的默认值

一起来用此方法调整一下h5course函数

clipboard.png

在此段代码当中,传入了三个参数
for-in循环当中,为defaultValue添加了name和domain的值,并修改了minApp的内容
函数调用时,参数的处理会变得更方便简单,但是也要注意,为了让使用者清晰了解哪些参数是必须的,建议在函数前面添加合理注释!

欢迎沟通交流~HTML5学堂

来个“智力”测试?

生活艰辛,代码不易,但,不要忘记微笑!

clipboard.png

clipboard.png

clipboard.png


懂点君
233 声望27 粉丝

一枚程序员,长期致力于各种小知识的分享。从此让你多懂点,少吃亏!