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

Question

我想要做的是像往常一样将选项设置为插件，但也使用html5数据属性覆盖这些选项。

我在这里（jsfiddle） ，但是有一个小问题。

JSFiddle代码：

(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

    });
});

我在jsfiddle中使用的方法使代码膨胀得非常多，即使只有2个不同的选项也在使用数据。

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

---

---

以下是来自jsfiddle的代码的一部分，它确定是否使用数据。

// 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  
});

Answer 1

我有一种感觉，可能有更好的解决方案，但直到现在我都无法使其正常工作。

---

当然我不是专家，但这似乎更有效，并且更多地缩短了代码，因为它的工作方式与插件选项通常的方式相同，只是在那里添加了data-attribute 。

1. Default - 最初使用default选项。
2. Custom - 如果设置，请使用自定义options覆盖default 。
3. Data - 如果设置，则使用data覆盖两者。

http://jsfiddle.net/lollero/HvbdL/5/

o = $.extend(true, {}, options, $(this).data() );

---

---

这是另一个jsfiddle例子。

这一个在点击时切换每个框的宽度。 中间框的数据属性的宽度值大于其他div。

作为一个额外的例子， 这里有一个相同的东西 ，另外还有一个选项添加到混音中。

Answer 2

好吧，一个常见的技巧是你的任务中的双管“或”操作符。 如果第一个值为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是任何“falsey”值（例如null，undefined，false，zero或空字符串），那么将自动使用o.background 。 如果由于某种原因你不想这样做，你应该使用三元运算符进行适当的测试：

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

Answer 3

一种简单的方法是使用Mark Dalgleish的jQuery HTML5data插件 。 这个插件的专业方面是命名空间，所以你的配置永远不会与其他插件的配置冲突。