jQuery
Wtyczki

Wtyczki - pierwsze kroki

Interfejs API jQuery można rozszerzyć, dodając do jego prototypu. Na przykład istniejący interfejs API ma już wiele dostępnych funkcji, takich jak .hide() , .fadeIn() , .hasClass() itp.

Prototyp jQuery jest $.fn przez $.fn , kod źródłowy zawiera wiersz

jQuery.fn = jQuery.prototype

Dodanie funkcji do tego prototypu umożliwi wywoływanie tych funkcji z dowolnego skonstruowanego obiektu jQuery (co jest wykonywane domyślnie z każdym wywołaniem jQuery lub każdym wywołaniem $, jeśli wolisz).

Skonstruowany obiekt jQuery będzie przechowywał wewnętrzną tablicę elementów na podstawie przekazanego do niego selektora. Na przykład $('.active') zbuduje obiekt jQuery, który przechowuje elementy z klasą aktywną w momencie wywołania (jak w, nie jest to aktywny zestaw elementów).

this wartość wewnątrz funkcji wtyczki będzie odnosić się do wybudowanego obiektu jQuery. W rezultacie this jest używany do reprezentowania dopasowany zestaw.

Podstawowa wtyczka :

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

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

Przykład jsFiddle

Możliwość połączenia i wielokrotnego użytku

W przeciwieństwie do powyższego przykładu , oczekuje się, że wtyczki jQuery będą łańcuchowe .
Oznacza to możliwość połączenia wielu Metod do tej samej Kolekcji Elementów, takich jak $(".warn").append("WARNING! ").css({color:"red"}) (zobacz, jak to zrobiliśmy .css() Metoda .css() po .append() obie metody mają zastosowanie do tej samej kolekcji .warn )

Zezwolenie na używanie tej samej wtyczki w różnych kolekcjach z różnymi opcjami dostosowywania odgrywa ważną rolę w dostosowywaniu / możliwości ponownego użycia

(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"
});

Demo jsFiddle

Wolność

Powyższe przykłady są w zakresie zrozumienia podstawowego tworzenia wtyczek. Pamiętaj, aby nie ograniczać użytkownika do ograniczonego zestawu opcji dostosowywania.

Powiedzmy na przykład, że chcesz zbudować wtyczkę .highlight() której możesz przekazać pożądany ciąg tekstowy, który zostanie podświetlony i zapewni maksymalną swobodę w zakresie stylów:

//...
// 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
});
//...

użytkownik może teraz przekazać żądany tekst i mieć pełną kontrolę nad dodanymi stylami za pomocą niestandardowej klasy CSS:

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

Przykład jsFiddle

Metoda jQuery.fn.extend ()

Ta metoda rozszerza prototypowy obiekt jQuery ($ .fn) o nowe niestandardowe metody, które można powiązać z funkcją jQuery ().

Na przykład:

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