javascript - 将多个选项传递给 JavaScript 中的函数

Question

我的页面中有两个共享相同选项的 slider :

var options1 = {
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 310,
    itemMargin: 5
}

var options2 = {
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false
}

然后我有这样的东西:

$('#carousel').flexslider(options1);
$('#slider').flexslider(options2);

$('#carousel2').flexslider(options1);
$('#slider2').flexslider(options2);

问题是我需要在选项末尾添加一个每个选项都不同的选项，即: asNavFor: '#slider' for options1 和 sync: “#carousel” 用于选项二。我尝试过，但没有成功:

$('#carousel').flexslider(options1, {asNavFor: '#slider'});
$('#slider').flexslider(options2, {sync: "#carousel"});

$('#carousel2').flexslider(options1, {asNavFor: '#slider2'});
$('#slider2').flexslider(options2, {sync: "#carousel2"});

我想避免重复这些选项，因为每个 slider 的选项都是相同的。提前致谢!

Answer 1

您可以使用Object.assign使用您的选项作为模板创建一个新对象:

$('#carousel').flexslider(Object.assign({}, options1, {asNavFor: '#slider'}));
$('#slider').flexslider(Object.assign({}, options2, {sync: "#carousel"}));

$('#carousel2').flexslider(Object.assign({}, options1, {asNavFor: '#slider2'}));
$('#slider2').flexslider(Object.assign({}, options2, {sync: "#carousel2"}));

如果您需要支持旧浏览器，您可以使用 jQuery 的 $.extend或 polyfill相反。