Question

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

Here I have exactly that (jsfiddle)，但这有点问题。

JSFiddle Code：

(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。

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

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

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

Here's another jsfiddle example.

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

作为一个额外的例子，here's the same thing添加了1个选项。

Answer 2

嗯，一个常见的技巧是你的作业中的双管“或”操作符。如果第一个值为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)
});

Your fiddle

Simplified example

现在，如果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 plugin。这个插件的专业方面是命名空间，所以你的配置永远不会与其他插件的配置冲突。

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

3 个答案: