Wie man jQuery-Plugin-Optionen mit html5-Datenattributen überschreibt

Question

Was ich tun möchte ist, Optionen wie üblich in Plugin zu setzen, aber diese Optionen auch mit html5-Datenattributen zu überschreiben.

Here I have exactly that (jsfiddle), aber es gibt ein kleines Problem damit.

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 

    }); 
}); 

Die Methode, die ich in der jsfiddle mit bläht den Code so viel, auch mit nur zwei verschiedenen Optionen, die auch Daten verwenden.

Frage ist: Wie könnte ich das gleiche Endergebnis mit weniger Code erreichen, um zu bestimmen, ob oder nicht Daten verwendet werden sollten?

---

---

Hier ist der Teil des Codes aus dem jsfiddle, die ob bestimmt oder nicht Daten zu verwenden.

// 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

Ich hatte das Gefühl, dass es vielleicht eine bessere Lösung sein, aber ich war nicht in der Lage zu bekommen es funktioniert, bis jetzt.

---

Natürlich bin ich kein Experte, aber dies scheint zu funktionieren und verkürzt den Code noch mehr, da es die gleiche Art und Weise die Plugin-Optionen normalerweise tun funktioniert, ist es nur die data-attribute dort hinzufügt.

1. Default - Verwenden Sie zunächst die Optionen default.
2. Custom - Wenn festgelegt, verwenden Sie options, um default s zu überschreiben.
3. Data - Wenn gesetzt, verwenden Sie data, um beide zu überschreiben.

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

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

---

---

Here's another jsfiddle example.

Dieser schaltet die Breite jedes Feld auf Mausklick. Die mittlere Box hat ein Datenattribut mit einem größeren Breitenwert als die anderen Divs.

Als ein zusätzliches Beispiel, here's the same thing mit 1 weitere Option in den Mix hinzugefügt.

Answer 2

Nun, ein üblicher Trick ist das Doppelrohr "oder" Operator in Ihrer Aufgabe. Wenn der erste Wert wahr ist, wird die zweite ignoriert, da nur eine wahre Aussage genug ist, den gesamten Ausdruck machen wahr:

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

In der Tat, wenn Sie diese Variablen nicht anderswo benötigen, fügen Sie einfach die Ergebnisse in der letzten Anweisung:

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

Your fiddle

Simplified example

Nun, wenn objD.background jeder ist "falsey" -Wert (z. B. null, nicht definiert, false, null oder die leere Zeichenfolge), dann wird automatisch verwendet. Wenn aus irgendeinem Grunde, dass Sie nicht wollen, sollten Sie den ternären Operator mit einem geeigneten Test verwenden statt:

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

Answer 3

Ein einfacher Weg wäre die Verwendung der jQuery HTML5data plugin von Mark Dalgleish. Die Pro-Seite dieses Plugins ist Namespace, so dass Ihre Konfiguration niemals mit der Konfiguration eines anderen Plugins kollidiert.