Javascript 如何使用html5数据属性覆盖jquery插件选项

我想做的是像平常一样在插件中设置选项，但也要用html5数据属性覆盖这些选项

，但这有一个小问题

JSIDLE代码：

(function($){
    $.fn.extend({
        test: function(options) {

            var defaults = {
                background: null,
                height: null
            };

            var options = $.extend( defaults, options);

            return this.each(function() {
                  var o = options;
                  var obj = $(this);
                  var objD = obj.data();


                    // background
                    if ( !objD.background) {
                        var cBG = o.background;
                    }
                    else {
                        var cBG = objD.background;
                    }

                    // Opacity
                    if ( !objD.height) {
                        var cH = o.height;
                    }
                    else {
                        var cH = objD.height;
                    }

                    obj.css({
                        background: cBG,
                        height: cH  
                    });

            });
        }
    });
})(jQuery);

$(document).ready(function() {
    $('.test').test({

        background: 'red',
        height: 400

    });
});

我在JSFIDLE中使用的方法使代码膨胀了很多，即使只有两个不同的选项也在使用数据

问题是：我如何用更少的代码实现相同的最终结果，以确定是否应该使用数据

---

---

下面是来自JSFIDLE的代码部分，用于确定是否使用数据

// objD is obj.data();

// background
if ( !objD.background) {
    var cBG = o.background;
}
else {
    var cBG = objD.background;
}

// Opacity
if ( !objD.height) {
    var cH = o.height;
}
else {
    var cH = objD.height;
}

obj.css({
    background: cBG,
    height: cH  
});

---

嗯，一个常见的技巧是在作业中使用双管“或”运算符。如果第一个值为true，则忽略第二个值，因为只有一个true语句足以使整个表达式为true：

var cBG = objD.background || o.background;
var cH = objD.height || o.height;

事实上，如果您不需要这些变量，只需将结果添加到最后一条语句中：

obj.css({
    background: (objD.background || o.background),
    height: (objD.height || o.height)
});

现在，如果

objD.background

是任何“false”值（例如null、undefined、false、zero或空字符串），则将自动使用

o.background

。如果出于某种原因，您不希望这样做，则应使用三元运算符进行适当的测试：

obj.css({
    background: (objD.background!=undefined) ? objD.background : o.background,
    height: (objD.height!=undefined) ? objD.height : o.height
});

---

我有一种感觉，也许有更好的解决办法，但直到现在，我还是没能让它发挥作用

---

当然，我不是专家，但这似乎有效，而且代码更短，因为它的工作方式与插件选项通常的工作方式相同，它只是在其中添加了

数据属性

Default

-最初使用

Default

选项

自定义

-如果已设置，请使用自定义

选项

覆盖

默认值

s

数据

-如果已设置，请使用

数据

覆盖这两个选项

---

---

此选项可在单击时切换每个框的宽度。中间框的数据属性的宽度值大于其他div

---

作为一个额外的例子，在混合中添加了1个选项。

一个简单的方法是使用MarkDalgleish的jQuery。此插件的专业方面是名称空间，因此您的配置不会与其他插件的配置冲突。

比我做的更简单，但我有点担心如果我将值

0

设置为

数据-

它似乎会直接跳到

选项。如果数据具有
false
，则会发生同样的情况，它会直接跳转到
选项。这意味着我不能用这些值覆盖。如果将
objD.background
设置为零，则
！objD.background
将被评估为true，并且您将得到相同的结果。但我会更新我的答案来解决这个问题。。我曾经使用
if（objD.cBG！=null）{options}else{data}
，但我认为使用
稍微短了一点，所以我没怎么考虑就跳到这里：）它也值得测试不同的“假”值。例如，在JavaScript中，
null==undefined
似乎是真的，但
null==undefined
不是真的。小心你泄露的信息。在我之前的评论/if语句中，我想把
数据
放在
选项
之前。我似乎感到困惑。就你的回答而言，谢谢你的帮助。
o = $.extend(true, {}, options, $(this).data() );