jQuery
Plugins

Plugins - Erste Schritte

Die jQuery-API kann durch Hinzufügen zu ihrem Prototyp erweitert werden. Zum Beispiel stehen für die vorhandene API bereits viele Funktionen zur Verfügung, wie .hide() , .fadeIn() , .hasClass() usw.

Der jQuery-Prototyp wird über $.fn , der Quellcode enthält die Zeile

jQuery.fn = jQuery.prototype

Durch das Hinzufügen von Funktionen zu diesem Prototyp können diese Funktionen von jedem erstellten jQuery-Objekt aufgerufen werden (dies wird implizit bei jedem Aufruf von jQuery oder bei jedem Aufruf von $ ausgeführt, wenn Sie dies vorziehen).

Ein erstelltes jQuery-Objekt enthält ein internes Array mit Elementen, die auf dem an ihn übergebenen Selektor basieren. $('.active') zum Beispiel ein jQuery-Objekt, das zum Zeitpunkt des Aufrufs Elemente mit der aktiven Klasse enthält (wie in, dies ist keine Live-Gruppe von Elementen).

this Wert innerhalb der Plugin-Funktion bezieht sich auf das erstellte jQuery-Objekt. Als Ergebnis wird this verwendet, um die übereinstimmende Menge darzustellen.

Grundlegendes Plugin :

$.fn.highlight = function() {
    this.css({ background: "yellow" });
};

// Use example:
$("span").highlight();

jsFiddle-Beispiel

Kettenfähigkeit & Wiederverwendbarkeit

Im Gegensatz zum obigen Beispiel wird erwartet, dass jQuery-Plugins verkettbar sind .
Dies bedeutet die Möglichkeit, mehrere Methoden zu einer gleichen Elementgruppe wie $(".warn").append("WARNING! ").css({color:"red"}) (wie wir das verwendet haben) .css() -Methode nach dem .append() , beide Methoden gelten für dieselbe .warn Sammlung.)

Die Möglichkeit, dasselbe Plugin für verschiedene Collections zu verwenden, und die Weitergabe verschiedener Anpassungsoptionen spielt eine wichtige Rolle bei der Anpassung / Wiederverwendbarkeit

(function($) {
  $.fn.highlight = function( custom ) {

    // Default settings
    var settings = $.extend({
        color : "",              // Default to current text color
        background : "yellow"    // Default to yellow background
    }, custom);

    return this.css({     // `return this` maintains method chainability
        color : settings.color,
        backgroundColor : settings.background
    });

  };
}( jQuery ));


// Use Default settings
$("span").highlight();    // you can chain other methods

// Use Custom settings
$("span").highlight({
    background: "#f00",
    color: "white"
});

jsFiddle Demo

Freiheit

Die obigen Beispiele dienen zum Verständnis der grundlegenden Plugin-Erstellung. Denken Sie daran, einen Benutzer nicht auf eine begrenzte Anzahl von Anpassungsoptionen zu beschränken.

Nehmen wir zum Beispiel Sie wollen einen bauen .highlight() Plugin , wo Sie einen gewünschten Text String übergeben kann , die hervorgehoben werden und ermöglichen maximale Freiheit in Bezug auf Stile:

//...
// Default settings
var settings = $.extend({
   text : "",          // text to highlight
   class : "highlight" // reference to CSS class
}, custom);

return this.each(function() {
   // your word highlighting logic here
});
//...

Der Benutzer kann nun einen gewünschten Text übergeben und die hinzugefügten Stile mithilfe einer benutzerdefinierten CSS-Klasse vollständig steuern:

$("#content").highlight({
    text : "hello",
    class : "makeYellowBig"
});

jsFiddle-Beispiel

jQuery.fn.extend () -Methode

Diese Methode erweitert das jQuery-Prototypobjekt ($ .fn), um neue benutzerdefinierte Methoden bereitzustellen, die mit der jQuery () - Funktion verkettet werden können.

Zum Beispiel:

<div>Hello</div>
<div>World!</div>
 
<script>
jQuery.fn.extend({
  // returns combination of div texts as a result
  getMessage: function() {
    var result;
    // this keyword corresponds result array of jquery selection
    this.each(function() {
        // $(this) corresponds each div element in this loop
        result = result + " " + $(this).val();
    });
    return result;
  }
});
 
// newly created .getMessage() method
var message = $("div").getMessage();

// message = Hello World!
console.log(message); 
</script>