conflit de méthode de chargement initial jquery

Pour les développeurs front-end, jQuery est devenu un outil indispensable. Je pense que chacun a son propre ensemble d'habitudes et de méthodes d'utilisation. Cependant, vous pouvez également rencontrer des problèmes au travail. Aujourd'hui, je vais vous expliquer comment résoudre les conflits de méthode de chargement initial de jQuery.

Description du problème

Lorsque nous utilisons jQuery pour créer un site Web, nous introduisons généralement le fichier de bibliothèque jQuery lorsque la page est chargée et effectuons les opérations initiales de familiarisation avec jQuery. Cependant, dans certains cas, nous constaterons que certains composants ou plug-ins de la page ne peuvent pas fonctionner correctement, et la console signale une erreur comme suit :

Uncaught TypeError: $(...).methodName is not a function

C'est parce qu'il y a un conflit dans le méthode d'initialisation du fichier de bibliothèque jQuery, ce qui entraîne l'impossibilité de résoudre le problème de l'appel correct de la méthode.

Solution

1. Utilisez jQuery.noConflict()

jQuery.noConflict() est une méthode fournie par jQuery qui peut être utilisée pour éliminer En cas de conflit, deux versions différentes de la bibliothèque jQuery sont utilisées. Il suffit d'introduire la première bibliothèque jQuery dans la page, puis d'appeler la méthode noConflict() pour l'affecter à une variable et référencer le composant, comme suit :

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
  $j('#example').datepicker();
});
</script>

Cette méthode convient à deux jQuery scripts Il doit être appelé en même temps, mais vous devez faire attention au fait que plusieurs composants sont référencés dans différents fichiers js, et le problème de l'utilisation de la méthode noConflict() plusieurs fois peut survenir.

2. Fonction auto-exécutable

L'utilisation de fonctions auto-exécutables peut isoler le code dans une portée distincte afin que le code ne puisse pas affecter un autre code. En utilisant une fonction auto-exécutable, nous pouvons limiter les méthodes du fichier de bibliothèque jQuery à la portée de la fonction, par exemple :

(function($){
  $(document).ready(function(){
    $('#example').datepicker();
  });
})(jQuery);

De cette façon, vous pouvez vous assurer que le $ dans le fichier de bibliothèque jQuery n'existe que dans la fonction auto-exécutable et n'entrera pas en conflit avec d'autres fichiers de bibliothèque.

3. Utilisez jQuery() au lieu de $()

Dans le fichier de la bibliothèque jQuery, $() est un raccourci pour jQuery, qui est également à l'origine de problèmes de conflits . Afin d'éviter les conflits, nous pouvons utiliser jQuery() au lieu de $(), par exemple :

jQuery(document).ready(function(){
  jQuery('#example').datepicker();
});

Cette méthode peut non seulement éviter les problèmes de conflit, mais également rendre le code plus facile à lire et à comprendre.

Résumé

Lorsque nous utilisons jQuery pour développer un site Web, nous devons accorder une attention particulière au conflit de sa méthode d'initialisation. Ce problème peut être efficacement évité en utilisant jQuery.noConflict(), des fonctions auto-exécutables ou en utilisant jQuery() au lieu de $(). Dans le même temps, lors du développement, nous devons veiller à améliorer la lisibilité et la maintenabilité du 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!