JavaScript - 使用options objects构建函数

在JavaScript语言中，options object 是一种常见的向一个函数传递参数的方式。这篇文章将会想你解释怎么使用它以及为什么使用它会提高你的代码的可读性。

本文翻译并改编自 Codereadability 上的一篇文章 - 查看原文

Options object 到底是个啥？

一个options object只是一个普通的Javascript对象，它包含了你要传递给某个函数的参数（key/value pairs）。

比如，jQuery.ajax函数就用了options object。这个函数最多可以接收34个参数，并且它们全都是可选的（非必须的）。

$.ajax({
    url: "http://date.jsontest.com/",
    success: function (data) {console.log(data);},
    cache: true,
    timeout: 500
});

如果不用options objects，将会使我们在理解每个参数的作用时变得非常困难。

$.ajax(
    "http://date.jsontest.com/",
    function (data) {console.log(data);},
    true,
    500
);

很多别的编程语言有一个特性叫做 "named arguments"（有名字的参数） 来达到和options objects相同的效果。

什么时候应该使用options objects呢？

当你写的某个函数有两个及以上参数时，你就应当考虑使用options object了。通常来说，在一个接收四个及以上参数的函数身上使用options object是一个好主意！

如果一个函数目前只需要一个参数，但将来会添加更多的参数，那么我建议你从一开始就使用option object而不是之后重写/重构代码。

决定了options objects比参数数组（argument list, 每个js函数都默认有一个arguments类数组对象，包含了传入这个函数的参数）好的最重要的原因是，options objects可以明确的表明每个参数的作用。比如，sum(4, 2)可以表明这个函数是干嘛的，而showDialog(true, false)不行。

Options objects是一个未被充分利用的JavaScript的一个特性，所以多多使用它并无坏处。

写一个使用options object来传递参数的函数

下面是一个传统的写js函数的方法，单独地传递每个参数。

function showDialog (showAlertIcon, showBackdrop) {
    if (showAlertIcon) {
        alertIcon.show();
    }
    if (showDarkBackdrop) {
        backdrop.show();
    }
    dialog.show();
}

这行代码是你将如何调用它：

showDialog(true, false);

上面这行调用方式并不能明确的表明每个参数的作用。相反，使用options object可以很好地解决这个问题。

function showDialog (options) {
    if (options.showAlertIcon) {
        alertIcon.show();
    }
    if (options.showDarkBackdrop) {
        backdrop.show();
    }
    dialog.show();
}

现在，showDialog这个函数被调用时，将会传入一个对象，对象里包含了每个key/value参数：

showDialog({
    showAlertIcon: true,
    showDarkBackdrop: false
});

通过这种方式，我们可以很明显的看出来这两个参数的作用，再也不用在每次调用时为了理解并正确使用这个函数，去看函数定义或源码了，简洁高效。

设置默认值

（原文里介绍了使用一个叫underscore的js库来设定默认值，我在这里不做推荐，因为如果只是为了这一个功能来引入一个库，得不偿失。相反，使用ES6的新语法可以完美解决。说句题外话，如果你还未听说或接触过ES6，也就是ECMAScript2015，那应该去做一些了解并使用起来了！）

ES6语法里的参数默认值，类似于C++里的参数缺省值的用法。

还以上面的showDialog函数为例：

function showDialog (
  options = {
    showAlertIcon = true,
    showDarkBackdrop = false
  }
) {
    if (options.showAlertIcon) {
        alertIcon.show();
    }
    if (options.showDarkBackdrop) {
        backdrop.show();
    }
    dialog.show();
}

上述的这种写法就给options里的参数设置了默认值，当函数被调用并且没有参数传入时，showAlertIcon为true，showDarkBackdrop为false。

这样定义函数的话，下面这两种调用函数的方式达到的效果是一样的：

/* 这两行的作用是一样的，所以为何不使用第一行这种呢？ */
showDialog({ showDarkBackdrop: true }); 
showDialog({ showAlertIcon: true, showDarkBackdrop: true });

总结

总之啊，options object 是一个很好的特性，特别是在参数较多的时候（参考jQuery.ajax），可以提高你的开发效率，降低出bug的几率，赶紧用起来吧！

PS: 如果文章里出现了错误或不当之处，请在下方评论给我留言，谢谢！