Empfehlen Sie ein jQuery-Plug-in template_jquery

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:

Code kopieren Der Code lautet wie folgt:

;(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:

Code kopieren Der Code lautet wie folgt:

$('.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.