Ich verwende jQuery schon seit einiger Zeit und schreibe oft Plugins dafür. Ich habe verschiedene Möglichkeiten ausprobiert, es zu schreiben, und jetzt ist diese Vorlage meine Lieblingsvorlage:
;(function($) {
// Hier können mehrere Plugins untergebracht werden
(function(pluginName) {
var defaults = {
Farbe: 'schwarz',
testFor: function(div) {
return true;
}
};
$.fn[pluginName] = function(options) {
Optionen = $.extend(true, {}, Standardwerte, Optionen);
Geben Sie this.each(function() {
zurück
var elem = dies,
$elem = $(elem);
// hier ist der Kern des Plugins
If (options.testFor(elem)) {
$elem.css({
borderWidth: 1,
borderStyle: 'solid',
borderColor: options.color
});
}
});
};
$.fn[pluginName].defaults = defaults;
})('borderize');
})(jQuery);
//Das Folgende ist die Verwendung
$('div').borderize();
$('div').borderize({color: 'red'});
Hier sind die Gründe, warum mir diese Vorlage gefällt
1. Sie können weiterhin auf die darin enthaltenen Standardoptionen zugreifen, auch wenn diese überschrieben werden (einfacher Zugriff über das übergeordnete Attribut)
2. Sie können den Namen des Plug-Ins ändern, indem Sie den PluginName ändern. (Diese Methode ist auch für die Codekomprimierung sehr vorteilhaft)
Punkt Nr. 1 ist sehr wirkungsvoll. Wenn wir diese Methode beispielsweise überschreiben, aber dennoch die ursprüngliche Methode beibehalten möchten, können wir uns das folgende Beispiel ansehen:
$('.borderize').borderize({
TestFor: function(elem) {
var $elem = $(elem);
If (elem.is('.inactive')) {
return false;
} sonst {
// Aufruf der „übergeordneten“ Funktion
return $.fn.borderize.defaults.testFor.apply(this, arguments);
}
}
});
Wir können dies sogar mit regulären Eigenschaften wie dieser tun
var someVarThatMayBeSet = false;
/* Code ... */
$('.borderize').borderize({
Farbe: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color
});
Freunde, diese jQuery-Plug-in-Vorlage wird Ihnen auch gefallen, sie ist so flexibel.