So verwenden Sie JQuery wieder

jQuery ist eine sehr beliebte JavaScript-Bibliothek, die die Arbeit der Web-Frontend-Entwicklung erheblich vereinfachen kann. Bei der tatsächlichen Entwicklungsarbeit werden wir jedoch feststellen, dass viel Code wiederholt verwendet wird. Zu diesem Zeitpunkt ist es sehr wichtig, jQuery-Code wiederzuverwenden, was unsere Arbeitseffizienz erheblich verbessern kann. Wie kann jQuery also wiederverwendet werden?

1. Funktionen definieren

Beim Schreiben von jQuery-Code können wir einen häufig verwendeten Code in eine Funktion kapseln und ihn in einer separaten js-Datei definieren. Wenn Sie diesen Code verwenden müssen, müssen Sie diese Datei nur auf der erforderlichen Seite einführen, um die Wiederverwendung des Codes abzuschließen.

Ein Effekt, den wir beispielsweise häufig verwenden, besteht darin, den Stil eines Elements zu ändern, wenn die Maus darüber fährt. Wir können zuerst eine Funktion schreiben und diese Funktion dann auf der Seite aufrufen, die wir verwenden müssen:

function hoverChangeStyle(element) {
  element.hover(function() {
    $(this).css('color', 'red');
  }, function() {
    $(this).css('color', 'black');
  });
}

hoverChangeStyle($('.my-element'));

Auf diese Weise müssen wir die hoverChangeStyle-Funktion nur aufrufen, nachdem wir diese js-Datei eingeführt haben, um eine Wiederverwendung des Codes zu erreichen.

2. Plug-Ins erstellen

Neben der Definition von Funktionen können wir auch häufig verwendeten Code kapseln, indem wir Plug-Ins für die einfache Verwendung auf anderen Seiten erstellen.

jQuery-Plug-ins sind spezielle Funktionen, die es uns ermöglichen, häufig verwendeten Code zu kapseln. Stellen Sie sich diesen Code als benutzerdefinierte Tags oder Klassen vor, damit er auf jeder Seite wiederverwendet werden kann.

Das Folgende ist ein einfaches jQuery-Plug-In-Beispiel:

(function ($) {
  $.fn.changeColor = function () {
    return this.each(function () {
      $(this).css('color', 'red');
    });
  };
}(jQuery));

Die Methode zur Verwendung dieses Plug-Ins ist sehr einfach:

$('.my-element').changeColor();

Auf diese Weise haben wir einen häufig verwendeten Code erfolgreich in ein Plug-In gekapselt, das Kann problemlos auf anderen Seiten wiederverwendet werden.

3. Vorlagenbibliotheken verwenden

Wenn wir HTML-bezogenen Code wiederverwenden müssen, können wir einige Vorlagenbibliotheken verwenden, wie zum Beispiel: Steering.js, Mustache.js usw. Diese Vorlagenbibliotheken können uns dabei helfen, den Vorlagencode besser zu organisieren und erweiterte Funktionen wie bedingte Anweisungen, Schleifenanweisungen usw. zu unterstützen.

Wenn wir Steering.js verwenden, können wir zuerst die Vorlage definieren und dann den Inhalt dort einfügen, wo wir ihn verwenden müssen. Das Folgende ist ein einfaches Beispiel für Steering.js:

<div id="container"></div>

<script id="user-template" type="text/x-handlebars-template">
  {{#each users}}
    <div class="user">
      <h2>{{ name }}</h2>
      <p>{{ age }} years old</p>
    </div>
  {{/each}}
</script>

Als nächstes müssen wir die Bibliothek von Bicycles.js in die Seite einführen und JavaScript-Code schreiben:

var users = [
  {
    name: '张三',
    age: 20
  },
  {
    name: '李四',
    age: 21
  },
  {
    name: '王五',
    age: 22
  }
];

var userTemplate = Handlebars.compile($('#user-template').html());
$('#container').html(userTemplate({users: users}));

Auf diese Weise haben wir einen häufig verwendeten HTML-Code erfolgreich in Create gekapselt eine Vorlagenbibliothek, die problemlos auf anderen Seiten wiederverwendet werden kann.

Zusammenfassung

Die oben genannten sind einige gängige Methoden zur Wiederverwendung von jQuery-Code. Wir können die Methode auswählen, die unseren tatsächlichen Anforderungen entspricht. Durch die Wiederverwendung von Code können wir die Entwicklungseffizienz verbessern, Doppelarbeit reduzieren und den Code besser pflegen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JQuery wieder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!