Как переопределить параметры плагина jquery с помощью атрибутов данных html5

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, так сильно раздувает код, даже всего с двумя различными опциямикоторые также используют данные.

Вопрос: Как можно достичь того же конечного результата с меньшим количеством кода, чтобы определить, следует ли использовать данные или нет?

---

---

Вот часть кода из 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 s.
3. Data - Если установлено, используйте data, чтобы переопределить оба.

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

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

---

---

Вот еще один пример jsfiddle.

Этот параметр переключает ширину каждого поля при нажатии. В среднем поле есть атрибут данных с большим значением ширины, чем у других элементов div.

В качестве дополнительного примера, здесь то же самое с добавлением еще 1 опции в микс.

Answer 2

Хорошо, один из распространенных приемов - оператор двойной трубы "или" в вашем назначении.Если первое значение истинно, второе игнорируется, так как только одно истинное утверждение достаточно, чтобы сделать все выражение истинным:

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

Самый простой способ - использовать плагин jQuery HTML5data от Марка Далглиша. Плюсом к этому плагину является пространство имен, поэтому ваш конфиг никогда не будет конфликтовать с конфигом какого-либо другого плагина.