Comment réutiliser jquery

jQuery est une bibliothèque JavaScript très populaire qui peut grandement simplifier le travail de développement web front-end. Cependant, dans le travail de développement réel, nous constaterons qu’une grande partie du code sera utilisée de manière répétée. À l'heure actuelle, il est indispensable de réutiliser le code jQuery, ce qui peut grandement améliorer l'efficacité de notre travail. Alors, comment jQuery peut-il être réutilisé ?

1. Définir des fonctions

Lors de l'écriture de code jQuery, nous pouvons encapsuler un code couramment utilisé dans une fonction et le définir dans un fichier js séparé. De cette façon, lorsque vous avez besoin d'utiliser ce code, il vous suffit d'introduire ce fichier dans la page requise pour terminer la réutilisation du code.

Par exemple, un effet que nous utilisons souvent consiste à changer le style d'un élément lorsque la souris le survole. Nous pouvons d'abord écrire une fonction puis appeler cette fonction dans la page que nous devons utiliser :

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

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

De cette façon, il suffit d'appeler la fonction hoverChangeStyle après avoir introduit ce fichier js pour réaliser la réutilisation du code.

2. Créer des plug-ins

En plus de définir des fonctions, nous pouvons également encapsuler du code couramment utilisé en créant des plug-ins pour une utilisation facile dans d'autres pages.

Les plug-ins jQuery sont des fonctions spéciales qui nous permettent d'encapsuler du code couramment utilisé. Considérez ce code comme des balises ou des classes personnalisées afin qu'il puisse être réutilisé dans n'importe quelle page.

Ce qui suit est un exemple simple de plug-in jQuery :

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

La méthode d'utilisation de ce plug-in est très simple :

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

De cette façon, nous avons réussi à encapsuler un code couramment utilisé dans un plug-in, qui peut être facilement utilisé dans d’autres pages Réutilisation.

3. Utiliser des bibliothèques de modèles

Lorsque nous devons réutiliser du code lié au HTML, nous pouvons utiliser certaines bibliothèques de modèles, telles que : Handles.js, Moustache.js, etc. Ces bibliothèques de modèles peuvent nous aider à mieux organiser le code des modèles et à prendre en charge des fonctions plus avancées, telles que les instructions conditionnelles, les instructions de boucle, etc.

Lors de l'utilisation de guidons.js, nous pouvons d'abord définir le modèle, puis remplir le contenu là où nous devons l'utiliser. Voici un exemple simple de Handles.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>

Ensuite, nous devons introduire la bibliothèque Handles.js dans la page et écrire du code JavaScript :

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

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

De cette façon, nous avons réussi à encapsuler un code HTML couramment utilisé dans Create une bibliothèque de modèles qui peut être facilement réutilisée dans d’autres pages.

Résumé

Ci-dessus sont plusieurs méthodes courantes de réutilisation du code jQuery. Nous pouvons choisir la méthode qui nous convient en fonction des besoins réels. Grâce à la réutilisation du code, nous pouvons améliorer l’efficacité du développement, réduire la duplication du travail et mieux maintenir le code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!