jQuery - wtyczki

Wtyczka to fragment kodu zapisany w standardowym pliku JavaScript. Te pliki zawierają przydatne metody jQuery, które mogą być używane razem z metodami biblioteki jQuery.

Dostępnych jest wiele wtyczek jQuery, które można pobrać z linku do repozytorium pod adresem https://jquery.com/plugins.

Jak korzystać z wtyczek

Aby udostępnić nam metody wtyczki, dołączamy plik wtyczki bardzo podobny do pliku biblioteki jQuery w <head> dokumentu.

Musimy upewnić się, że pojawia się on po głównym pliku źródłowym jQuery, a przed naszym niestandardowym kodem JavaScript.

Poniższy przykład pokazuje, jak dołączyć jquery.plug-in.js wtyczka -

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script src = "jquery.plug-in.js" type = "text/javascript"></script>
      <script src = "custom.js" type = "text/javascript"></script>
      
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            .......your custom code.....
         });
      </script>
   </head>
	
   <body>
      .............................
   </body>
</html>

Jak opracować wtyczkę

Napisanie własnej wtyczki jest bardzo proste. Poniżej znajduje się składnia tworzenia metody aa -

jQuery.fn.methodName = methodDefinition;

W tym przypadku methodNameM to nazwa nowej metody, a methodDefinition to rzeczywista definicja metody.

Wytyczne zalecane przez zespół jQuery są następujące -

Wszelkie dołączane metody lub funkcje muszą mieć na końcu średnik (;).
Twoja metoda musi zwrócić obiekt jQuery, chyba że wyraźnie zaznaczono inaczej.
Powinieneś użyć this.each do iteracji po bieżącym zestawie dopasowanych elementów - w ten sposób tworzy czysty i kompatybilny kod.
Przed nazwą pliku wpisz jquery, a następnie nazwą wtyczki i zakończ na .js.
Zawsze dołączaj wtyczkę bezpośrednio do jQuery zamiast $, aby użytkownicy mogli używać niestandardowego aliasu za pośrednictwem metody noConflict ().

Na przykład, jeśli napiszemy wtyczkę, którą chcemy nazwać debugowaniem , nasza nazwa pliku JavaScript dla tej wtyczki to -

jquery.debug.js

Korzystanie z jquery. prefiks eliminuje wszelkie możliwe kolizje nazw z plikami przeznaczonymi do użytku z innymi bibliotekami.

Przykład

Poniżej znajduje się mała wtyczka, która ma metodę ostrzegawczą w celu debugowania. Zachowaj ten kod w pliku jquery.debug.js -

jQuery.fn.warning = function() {
   return this.each(function() {
      alert('Tag Name:"' + $(this).prop("tagName") + '".');
   });
};

Oto przykład pokazujący użycie metody warning (). Zakładając, że umieściliśmy plik jquery.debug.js w tym samym katalogu strony html.

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script src = "jquery.debug.js" type = "text/javascript">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").warning();
            $("p").warning();
         });
      </script>	
   </head>
	
   <body>
      <p>This is paragraph</p>
      <div>This is division</div>
   </body>
</html>

To ostrzeże Cię o następującym wyniku -

This is paragraph
This is division