Présenter avec Mootools

Ce tutoriel présente aujourd'hui l'un des frameworks JavaScript les plus populaires: mootools. Mootools (pour mes outils orientés objet ) est compatible avec Internet Explorer 6, Firefox, Opera et Chrome. Mootools est conçu pour être compact, modulaire et orienté objet. Mootools est conçu pour les programmeurs JavaScript de niveau moyen à élevé, alors assurez-vous d'avoir suffisamment d'expérience avant de creuser plus profondément.

Points de base

mootools (représentant
• Mes outils orientés objet ) est un framework JavaScript compact, modulaire et orienté objet. Il est compatible avec Internet Explorer 6, Firefox, Opera et Chrome et est conçu pour les programmeurs JavaScript de niveau moyen à élevé.
Ce cadre contient des fonctionnalités telles que le sélecteur d'éléments, les événements Domready, la création d'éléments, la liaison d'événements et la détection du navigateur. Le sélecteur d'éléments simplifie le fonctionnement de la sélection des éléments via le mode ID, classe ou attribut. L'événement DOMReady est exécuté immédiatement après le chargement du DOM, permettant une exécution de script plus rapide. La liaison des événements permet l'exécution du code lorsque certains événements se produisent, tandis que la détection du navigateur est commodément écrite en code conditionnel en fonction du navigateur de l'utilisateur.
mootools est hautement personnalisable, permettant aux développeurs de sélectionner et de modifier les composants qu'ils souhaitent utiliser. Cela améliore l'efficacité du script et améliore les performances. Il fournit également une compatibilité avec d'autres bibliothèques JavaScript et fournit une fonctionnalité appelée abstraction du navigateur qui normalise les différences entre les différents navigateurs pour des performances de code cohérentes.

Obtenez mootools

Obtenir des hotools est très facile. Les mootools sont divisés en deux parties, appelés noyau et plus encore. Core contient des classes de base et des modules du cadre, et d'autres incluent des classes supplémentaires qui peuvent être incluses en fonction des exigences de l'application. Mootools possède une page de générateur puissante qui personnalise les noyaux et plus à nos besoins. La version stable actuelle de Mootools Core (au moment de la rédaction) est de 1.4.5 et plus 1.4.0.1.

Sélecteur d'éléments

L'une des opérations les plus élémentaires de tout cadre JavaScript est de sélectionner des éléments. Mootools utilise Slick comme moteur sélecteur. Mootools prend en charge de nombreux types de sélecteurs différents. Cette section décrit certains des sélecteurs les plus utiles et les plus importants.

Sélectionnez l'élément par id

Si nous voulons sélectionner des éléments par ID en JavaScript pur, nous devons utiliser la syntaxe verbose

. Mootools, comme de nombreux autres frameworks JavaScript, utilise document.getElementById('id_of_element') pour raccourcir cette opération. Votre code finit par ressembler à ceci: $

<code class="language-javascript">var element = $('id_of_element');</code>

Si vous incluez des mootools et d'autres bibliothèques (tels que jQuery) sur la même longueur d'onde, cela causera des problèmes. Pour surmonter cela, mootools fournit

comme une autre façon de sélectionner les éléments. Le code que vous avez sélectionné l'élément ressemble maintenant à ceci: $ document.id()

sélectionner les éléments par classe

<code class="language-javascript">var element = document.id('id_of_element');</code>

Cela renverra un tableau d'éléments avec une classe spécifique. Pour obtenir chaque élément individuel, nous devons itérer sur le tableau comme indiqué ci-dessous.

<code class="language-javascript">var element = $('id_of_element');</code>

sélectionner les éléments via le mode d'attribut

L'exemple suivant sélectionne des éléments dont l'ID et les attributs de classe commencent par un modèle spécifique.

<code class="language-javascript">var element = document.id('id_of_element');</code>

De même, l'exemple suivant correspond aux éléments dont l'ID et les attributs de classe se terminent par un modèle spécifique.

<code class="language-javascript">$$('.class_name').each(function(ele){
  console.log(ele);
});</code>

événement Domready

DomReady est un événement qui ne peut être lié aux objets de fenêtre. DomReady exécute immédiatement après le chargement du DOM, ce qui est probablement beaucoup plus tôt que l'événement Window.load qui attend toutes les autres ressources à charger. Je suggère de lire en profondeur sur DomReady et Window. L'exemple suivant utilise Domready pour attendre qu'il se charge avant d'interroger le DOM.

<code class="language-javascript">$$('[id^=id_start_]').each(function(ele){
  console.log(ele);
});

$$('[class^=class_start_]').each(function(ele){
  console.log(ele);
});</code>

Création d'éléments

mootools peut créer de nouveaux éléments HTML et les injecter dans le DOM. La création de nouveaux éléments HTML à Mootools est très simple. Par exemple, le code suivant crée un nouvel élément DIV.

<code class="language-javascript">$$('[id$=_end_id]').each(function(ele){
  console.log(ele);
});

$$('[class$=_end_class]').each(function(ele){
  console.log(ele);
});</code>

Le code précédent crée un nouvel élément mais ne l'injecte pas dans le DOM. Pour effectuer l'injection, vous devez appeler la méthode adopt(). L'exemple suivant montre comment procéder.

<code class="language-javascript">window.addEvent('domready', function(){
  if(document.id('id_of_element'))
  {
    alert('Element Exists');
  }
});</code>

Lors de l'exécution de ce code, vous pouvez voir la nouvelle div ajoutée avant de terminer la balise corporelle.

liaison des événements

La liaison de l'événement entraîne l'exécution du code lorsque certains événements sont exécutés sur des éléments. Cliquez sur, double-cliquez et survolez des exemples d'événements communs. Vous pouvez également créer vos propres événements personnalisés, mais cela dépasse le cadre de cet article. À titre d'exemple de liaison d'événements Mootools, le code suivant ajoute un gestionnaire d'événements de clic simple à un élément.

<code class="language-javascript">var new_div = new Element('div', {'class': 'new_div'});</code>

Vous pouvez également ajouter des événements à des éléments créés dynamiquement. Le code suivant ajoute le gestionnaire de clics à l'élément créé dynamiquement.

<code class="language-javascript">var new_div = new Element('div', {'class': 'new_div'});

$$('body').adopt(new_div);</code>

Détection du navigateur

Le dernier mais non le moindre est la détection du navigateur à l'aide de mootools. Ceci est requis lorsque vous souhaitez écrire du code conditionnel en fonction du navigateur de l'utilisateur. Mootools fournit un objet Browser qui est rempli lorsque la page est chargée. L'exemple suivant utilise une instruction Switch pour identifier le navigateur actuel.

<code class="language-javascript">document.id('id_of_ele').addEvent('click', function(){
  console.log('I was just clicked');
});</code>

Conclusion

Cet article présente de nombreuses connaissances de base des mootools. Il existe de nombreuses excellentes ressources pour apprendre à utiliser efficacement les mootools. J'ai beaucoup appris de la documentation Mootools et du blog David Walsh. Vous pouvez également vous référer à mon travail mootools.

(la deuxième section FAQ peut être réécrite de la même manière que nécessaire, et le libellé et la structure de la phrase peuvent être ajustés tout en maintenant la cohérence du contenu)

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!