Maison >interface Web >js tutoriel >Explication détaillée de l'observateur pattern_jquery de jQuery

Explication détaillée de l'observateur pattern_jquery de jQuery

WBOYoriginal: 2016-05-16 16:24:571031parcourir

Dans jQuery, la méthode on peut lier des événements à des éléments et la méthode trigger peut déclencher manuellement des événements. En nous concentrant sur ces deux méthodes, découvrons le modèle Observer dans jQuery.

■ La méthode on lie les événements intégrés et les déclenche naturellement

Par exemple, si nous lions un événement de clic à l'élément body de la page, écrivez comme ceci.

Copier le code Le code est le suivant :

bonjour

Ci-dessus, on ne peut déclencher l'événement click qu'en cliquant sur le corps. Autrement dit, lorsqu'un événement intégré est lié à un élément de page, l'événement est déclenché au moment où l'événement intégré se produit.

■ La méthode on lie les événements intégrés et les déclenche manuellement

En utilisant la méthode trigger, vous pouvez également déclencher manuellement l'événement intégré lié à l'élément.

Dans ce qui précède, il n'est pas nécessaire de cliquer sur le corps. Une fois la page chargée, le corps déclenche automatiquement l'événement de clic.

■ La méthode on lie les événements personnalisés et les déclenche manuellement

Nous savons que click est un événement intégré à jquery. Alors, l'événement peut-il être personnalisé et déclenché manuellement ?

Copier le code Le code est le suivant :

Ci-dessus, nous avons personnalisé un événement someclick, et le résultat est le même que ci-dessus.

Nous avons donc découvert que nous pouvions lier un événement personnalisé à l'élément et déclencher l'événement à l'aide de la méthode trigger.

Bien sûr, le nom de l'événement personnalisé peut être écrit sous la forme de "namespace.custom event name", tel que app.someclick. Ceci est particulièrement utile dans les grands projets, ce qui peut efficacement éviter les conflits de noms d'événements personnalisés.

Du point de vue "publier et s'abonner", la méthode on équivaut à un abonné et à un observateur, et la méthode trigger équivaut à un éditeur.

weight Découvrez le mode observateur jQuery depuis "Obtenir des données json de manière asynchrone"

Dans le répertoire racine, il y a un fichier data.json.

{
"un" : "Bonjour",
"deux" : "Monde"
>
Maintenant, récupérez les données json de manière asynchrone.

Copier le code Le code est le suivant :

Si vous utilisez une variable globale pour recevoir des données json obtenues de manière asynchrone.

Copier le code Le code est le suivant :

Cette fois, le résultat que nous avons obtenu était indéfini. Pourquoi ?

--Parce que, alors que la méthode $.getJSON récupère toujours des données, console.log(data) a été exécuté et data n'a pas de données pour le moment.

Comment résoudre ce problème ?

--Si vous définissez d'abord la méthode qui doit être exécutée en plus de la méthode $.getJSON, puis que vous déclenchez réellement cette méthode dans la fonction de rappel de la méthode $.getJSON, cela ne serait-il pas résolu ?

Copier le code Le code est le suivant :

Ci-dessus, la méthode on est comme un abonné, qui s'abonne à l'événement personnalisé app.myevent ; et la méthode de déclenchement est comme un éditeur, qui publie les événements et les paramètres avant que la méthode de l'abonné ne soit réellement exécutée.

weight Méthodes d'extension du modèle d'observateur jQuery

À cette fin, nous pouvons également écrire une méthode d'extension spécifiquement pour le modèle d'observateur jQuery.

Copier le code Le code est le suivant :

Ce qui précède définit les méthodes globales de publication et d'abonnement, que nous pouvons appeler à tout moment.

Copier le code Le code est le suivant :