《JavaScript应用程序设计》一一2.10 参数命名

简介:

本节书摘来华章计算机出版社《JavaScript应用程序设计》一书中的第2章,第2.10节,作者:Eric Elliott 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.10 参数命名

函数被传入的参数数量称为元数 (arity),一般来说函数的元数应该尽可能的精简,但还是避免不了出现极多个元数的调用场景。多元数的问题在于每个参数都必须按照先后顺序被传入,即使个别参数是可选的。要记住这些顺序本身就是一个令人头疼的问题,而且给函数传入无用的参数,对功能本身而言也没有意义。
在下面的示例中,createUser()是一个用于创建用户账户的函数,userProto是用户账户的默认配置,可以用createUser()中传入的参数将之覆盖。

var userProto = {
    name: '',
    email: '',
    alias: '',
    showInSearch: true,
    colorScheme: 'light'
  };

function createUser(name, email, alias, showInSearch, 
  colorScheme) {

  return {
    name: name || userProto.name,
    name: email || userProto.email,
    alias: alias || userProto.alias,
    showInSearch: showInSearch,
    colorScheme: colorScheme || userProto.colorScheme
  };
}

test('User account creation', function () {
  var newUser = createUser('Tonya', '', '', '', 'dark');

  equal(newUser.colorScheme, 'dark',
    'colorScheme stored correctly.');
});

在上述示例中,createUser()函数拥有5个可选参数,而UserProto是一个原型对象,这里存在一个问题,先看函数调用:
var newUser = createUser('Tonya', '', '', '', 'dark');
首先,如果不了解createUser()函数的具体实现,很难知晓每个参数的具体含义。其次,若想设置最后一位参数的值,必须将前面4位参数全部补全。再者,如果这个函数被其他模块依赖,那么后期对其所进行参数调整的成本非常昂贵。
正确的参数传入方式是:

var newUser = createUser({
  name: 'Mike',
  showInSearch: false
});

你可以使用extend()方法来处理这类参数的传入,市面上大部分JavaScript类库中都拥有类似的方法(包括jQuery与Underscore),来看看使用jQuery的版本:

function createUser(options) {
  return $.extend({}, userProto, options);
}

$.extend()将对象作为参数传入,所传入的第一个参数是需要进行扩展的对象。在这个例子中,我们需要在不改变userProto或options值的前提下,创建用户账户对象,所有对象的方法与属性都是通过扩展而来,这是一种简单且优雅的代码复用方式。

相关文章
|
1月前
egg.js 24.18参数验证
egg.js 24.18参数验证
29 0
egg.js 24.18参数验证
|
3月前
|
JavaScript
如何在JS中实现修改URL参数而不刷新页面
如何在JS中实现修改URL参数而不刷新页面
63 1
|
7月前
|
JavaScript 前端开发
JavaScript 获取地址栏指定参数(整理)
JavaScript 获取地址栏指定参数(整理)
|
1月前
|
JavaScript 前端开发 API
js截取图片地址后面的参数和在路径中截取文件名或后缀名
在处理网页上的图片资源或者其他类型的文件资源时,你可能会遇到需要使用这些技巧的情况。以下是一些具体的使用场景:
20 0
|
4月前
|
JavaScript
如何在JS中实现修改URL参数而不刷新页面
如何在JS中实现修改URL参数而不刷新页面
|
20天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
25天前
|
JavaScript 前端开发
为 setTimeout 或 setInterval 提供一个字符串作为第一个参数(js的问题)
为 setTimeout 或 setInterval 提供一个字符串作为第一个参数(js的问题)
10 0
|
1月前
|
JavaScript
js开发:请解释什么是ES6的默认参数(default parameters),并给出一个示例。
ES6允许在函数参数中设置默认值,如`function greet(name = 'World') {...}`。当调用函数不传入`name`参数时,它将默认为'World',提升代码简洁性和可读性。例如:`greet()`输出"Hello, World!",`greet('Alice')`输出"Hello, Alice!"。
16 4
|
1月前
|
前端开发 JavaScript
|
1月前
|
JavaScript
JS动态参数arguments与剩余参数
JS动态参数arguments与剩余参数