Yui 3: plus léger, plus rapide, plus facile à utiliser

Les plats clés

• YUI 3, une réécriture complète de YUI, vise à être plus légère, plus rapide et plus facile à utiliser que son prédécesseur, YUI 2. La réécriture traite des incohérences dans la mécanique interne et l'API qui a émergé comme yui 2 a évolué.
• La bibliothèque YUI 3 introduit une nouvelle architecture de plugin qui permet aux utilisateurs d'ajouter leur propre fonctionnalité aux nœuds et widgets. La bibliothèque présente également un nouveau nom d'objet global, YUI, remplaçant l'ancien objet global Yahoo. Cela permet aux anciennes versions de Yui de coexister avec Yui 3.
• YUI 3 dispose d'un style de codage plus propre et plus succinct et d'une nouvelle hiérarchie de classes qui permettent une mécanique interne cohérente et une API sur tous les composants YUI. La bibliothèque s'attaque également aux problèmes de chargement de pièces lourdes de la bibliothèque pour seulement une ou deux fonctions en divisant les fonctionnalités en sous-modules plus petits.
• La nouvelle version de la bibliothèque introduit une nouvelle couche d'abstraction pour le DOM avec l'utilitaire de nœud, qui simplifie l'interaction DOM. YUI 3 normalise également la gestion des événements en utilisant l'idée d'une façade d'événements, qui s'occupe de toute la normalisation du navigateur.
• YUI 3 propose une bibliothèque plus flexible et efficace pour le développement Web, avec de nouvelles fonctionnalités comprenant un nouveau système d'événements, un nouveau système de modules et un nouveau système d'attribut. Il introduit également de nouveaux utilitaires et widgets tels que Node et NodeList pour la manipulation DOM, IO pour les demandes AJAX et Widget pour créer des composants d'interface utilisateur réutilisables.

En août 2008, l'équipe de l'interface utilisateur de Yahoo a publié la première version d'aperçu de YUI 3, une réécriture complète de YUI depuis Ground Up (dont la première version bêta devrait sortir la semaine prochaine!).

Pourquoi réécriraient-ils une bibliothèque déjà utile et mature, pourriez-vous demander? Eh bien, à mesure que Yui 2 a mûri, la manière dont elle a été construite a également évolué.

En conséquence, certaines parties de Yui qui étaient présentes depuis le début ont été codées d'une manière entièrement différente des parties qui ont été ajoutées plus tard. Le résultat a été que la bibliothèque contenait des incohérences - à la fois dans la mécanique interne et l'API. L'équipe a donc décidé de ramener la bibliothèque aux bases et de la reconstruire à partir de zéro. Leur plan était d'appliquer l'expérience qu'ils ont acquise au cours des trois dernières années de travail sur YUI et de construire une bibliothèque plus légère, plus rapide et plus facile à utiliser. Enfin, dans le but de rendre la bibliothèque aussi flexible que possible, YUI 3 introduit une toute nouvelle architecture de plugin qui vous permet d'ajouter votre propre fonctionnalité aux nœuds et widgets. Nous verrons un de ces plugins en action un peu plus tard. Tout d'abord, voyons ce qui est nouveau dans Yui 3.

Au revoir Yahoo, bonjour yui

Le premier bit que vous remarquerez lorsque vous regardez les exemples de code YUI 3 est le nouveau nom d'objet global qu'il utilise. L'ancien objet Global Yahoo a été remplacé par le nouvel objet global YUI. Il a été renommé pour plusieurs raisons: les commentaires des utilisateurs ont suggéré que certaines entreprises n'aimaient pas avoir le nom de Yahoo dans leur code; Mais plus important encore, il permet aux anciennes versions de Yui de coexister avec Yui 3 en raison d'avoir un nom de variable différent.

ainsi que l'objet global renommé, son utilisation est basée sur un principe fondamentalement différent de celui de 2.x. Pour commencer, ce n'est plus un objet statique mais plutôt une fonction qui, lorsqu'il est exécuté, renvoie une instance de lui-même. Maintenant, chaque exécution de YUI renvoie un environnement autonome où la version de la bibliothèque et la version de tous ses composants chargés peuvent s'exécuter sans interférer avec aucune autre instance de YUI sur la page. Par extension, cela signifie également que plusieurs versions de la bibliothèque peuvent coexister sur la même page, en instanciant différentes versions de l'objet YUI. L'exemple ci-dessous illustre ce principe:

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

ici, yui () est exécuté, qui renvoie une instance de la bibliothèque à partir de laquelle la méthode d'utilisation est exécutée. Un minimum de deux paramètres est requis: les composants de la bibliothèque, puis le rappel à exécuter une fois que tout est fait du chargement. Dans notre exemple ci-dessus, les deux premiers paramètres passés à utiliser sont les noms des composants de la bibliothèque qui doivent être chargés. Le paramètre final est notre fonction de rappel, qui reçoit un objet (nommé Y dans l'exemple) - il s'agit d'une instance de la bibliothèque contenant tous les composants chargés. Ainsi, comme les commentaires dans l'exemple ci-dessus, le composant Drag and Drop peut être trouvé sur Y.DD, et le composant d'animation peut être trouvé sur Y.anim.

un style de codage plus propre et plus succinct

L'une des principales préoccupations de l'équipe était d'assurer une mécanique interne cohérente et une API cohérente dans tous les composants YUI. Ainsi, Yui 3 a maintenant une nouvelle hiérarchie de classes qui permettent exactement cela. La classe d'attribut, par exemple, fournit des méthodes GET et SET, la prise en charge initiale de la configuration et l'attribut de modification des événements en classes qui l'ont hérité. Il existe également une classe de base qui hérite de l'attribut et fournit des fonctionnalités orientées objet hors de la boîte, comme les méthodes d'initialiseur et de destructeur pour toutes les classes qui en héritent. Enfin, ils ont construit une classe de widgets qui hérite de la base et fournit des fonctionnalités communes normalement utilisées par les widgets, tels qu'une méthode de rendu - une structure de contrôle de vue de modèle commune pour gérer le rendu du widget - et la prise en charge des attributs de widget communs. Il fournit également l'enregistrement des plugins et le support d'activation.

Un autre problème sur les surmonte que Yui 3 est lorsque votre script doit charger un morceau lourd de la bibliothèque pour seulement une ou deux fonctions contenues. Par exemple, dans YUI 2, vous devez inclure l'intégralité de l'utilitaire de connexion (pesant 38 Ko, 12 Ko lors de la réduction) juste pour effectuer des appels XMLHTTPRequest. Yui 3 résout ce problème en divisant les fonctionnalités en sous-modules plus petits. De cette façon, il n'est pas nécessaire de baisser l'intégralité de l'utilitaire juste pour effectuer des appels XMLHTTPRequest. Dans YUI 3, vous pouvez passer un appel XMLHTTPRequest en ne tirant que le module Io-base de l'utilitaire IO, pesant seulement 19KB (4KB minifiée). En fait, l'intégralité de l'utilitaire IO pèse 29 Ko (7KB minifiée) et est beaucoup plus riche en fonctionnalités que son prédécesseur. Par exemple, il est désormais possible de passer des appels croisés ou xdomainRequest avec le sous-module IO-XDR.

Sélection et chaînage

YUI 2 a introduit un moteur sélecteur, mais il l'a fait un peu tard dans la vie de la bibliothèque. En conséquence, toute la bibliothèque est construite autour de techniques de récupération des éléments à l'ancienne. En d'autres termes, vous avez dépassé l'ID d'un élément ou l'élément lui-même chaque fois qu'une référence était nécessaire, et c'était à peu près tout. Avec YUI 3, cependant, le moteur sélecteur est construit directement dans le cœur même de la bibliothèque. Il imprègne chaque partie de celui-ci afin que vous puissiez passer les chaînes de sélecteur CSS pratiquement partout où une référence d'élément est nécessaire. En plus des constructeurs, cela comprend également la configuration des gestionnaires d'événements et le travail avec les services publics. Voici un exemple, qui fait le premier élément avec l'auteur de classe Draggable:

var dd = new y.dd.drag ({
   Node: '.author'
});

chaque fois que Yui 3 n'a pas de valeur logique à retourner, il essaie de rendre la méthode chaînable. Voici un exemple de cela en action:

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

Ici, nous avons fait référence au premier élément avec l'auteur du nom de classe et avons mis un style de curseur dessus.

nœuds et événement faã§ades

yui 3 introduit une nouvelle couche d'abstraction pour le DOM avec l'utilitaire de nœud. Plutôt que de renvoyer une référence à un élément DOM, YUI 3 renvoie les nœuds et les nodelists, ce qui simplifie considérablement l'interaction DOM. En effet, les nœuds incluent toutes les fonctionnalités dont vous avez besoin pour interagir avec eux, plutôt que de devoir aller à des fonctions séparées. De plus, les méthodes exposées par un nœud prennent soin de la normalisation du navigateur chaque fois qu'elle est nécessaire, de sorte que l'expérience de travailler avec eux est aussi indolore que possible. Voici ce que vous devez écrire dans Yui 2 afin d'ajouter un nom de classe à un élément:

Y.get('.author').setStyle('cursor', 'move');

Dans Yui 3, cela devient:

YAHOO.util.Dom.addClass("navProducts", "selected");

En fait, si le nœud était déjà en main, disons dans une variable nommée NavProducts, alors vous pourriez simplement faire ceci:

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

yui 3 a simplifié l'interaction avec le DOM et a également normalisé la gestion des événements en utilisant l'idée d'un événement faã§ade. Chaque auditeur d'événements reçoit un événement Faã§ade qui s'occupe de toute la normalisation du navigateur. Ainsi, par exemple, où dans Yui 2, vous aviez besoin du code suivant afin de «prévenir la valeur par défaut»:

Y.get('.author').setStyle('cursor', 'move');

Maintenant, tout ce que vous avez à faire est:

YAHOO.util.Dom.addClass("navProducts", "selected");

de plus, ce comportement s'étend également aux événements purement personnalisés, donc même ceux-ci reçoivent des façades d'événements qui leur permettent d'empêcher la propagation par défaut et d'arrêter la propagation.

Suivant: mettons certaines de ces nouvelles méthodes en pratique.

Montrez-moi l'argent!

J'ai construit un exemple de page simple démontrant à quel point Yui 3 est facile et puissant. Pour économiser de l'espace ici dans l'article, je vais éviter de vous montrer tout le balisage et le code, mais vous pouvez afficher la source complète sur l'exemple de page.

La première tâche que je fais est de charger une instance de YUI avec l'utilitaire d'animation, le widget de curseur, le plugin de nœud menunav et les utilitaires de glisser-déposer. Yui va et récupére les fichiers nécessaires et leurs dépendances des serveurs Yahoo. Il renvoie ensuite une instance de YUI avec les composants chargés de la fonction de rappel, qui le reçoit dans la variable nommée Y:

Y.get("#navProducts").addClass("selected");

Ensuite, je crée une animation simple pour faire rebondir le contenu de la page. Pour ce faire, j'instance un nouvel objet d'animation. Je le transfère une référence à l'élément avec le principal ID et je lui dis d'animer la valeur supérieure à 0 de partout où elle se trouve actuellement (en ce moment, c'est à -1000px, comme spécifié dans le balisage de l'exemple). Je précise également que l'animation doit prendre trois secondes et qu'elle doit utiliser la méthode d'assouplissement Elasticout. Une fois l'objet instancié, c'est juste un cas simple de l'exécuter avec la méthode d'exécution:

navProducts.addClass("selected");

Ensuite, j'ai configuré un objet curseur afin de permettre aux utilisateurs d'ajuster la taille de la police de base de la page. Les polices CSS de YUI (incluses dans l'exemple de la page) définissent la taille de la police de base de la page à 13 pixels. Il le fait en définissant la valeur de taille de police sur l'élément corporel, à partir de laquelle toutes les autres tailles de police sont calculées. C'est ce que nous allons manipuler afin de modifier les tailles de police de la page.

J'attrape une référence de nœud pour l'élément corporel, qui sera utilisé plus tard en conjonction avec le curseur. Ensuite, je crée un widget de curseur. J'ai réglé la valeur minimale sur 13 et le maximum à 28 car je veux que la taille de la police reste dans ces valeurs. Je m'assure ensuite que la taille du rail du curseur mesure 100 pixels de large. Enfin, je définis l'image du pouce du curseur (qui est chargé directement sur les serveurs hébergés de Yahoo):

 <br>
YUI().use('dd-drop', 'anim', function(Y) { <br>
    // Y.DD is available <br>
    // Y.Anim is available <br>
}

Une fois le curseur instancié, c'est juste une simple question de le rendre. Je le fais en appelant la méthode de rendu du curseur avec le nom de classe de l'élément dans lequel je veux qu'il soit rendu. Le widget de curseur rendra dans le premier élément du DOM qui correspond à ce nom de classe:

Y.get('.author').setStyle('cursor', 'move');

La seule tâche à faire maintenant est de câbler le curseur afin qu'il ajuste réellement la taille de la police de la page. Je fais ce que je fais en accrochant son événement After. YUI 3 a des événements standard sur et après que vous pouvez vous connecter pour rendre la gestion des événements comme cela beaucoup plus facile que dans la version précédente. Maintenant, chaque fois que l'événement ValueChange est tiré, la valeur de la police de notre élément corporel est modifiée:

YAHOO.util.Dom.addClass("navProducts", "selected");

J'ai également configuré un menu de navigation. Une fois que le contenu de la page est prêt, je branche le plugin de nœud menunav sur le nœud NAV. Il configure ensuite automatiquement un menu de navigation en fonction du balisage qu'il trouve - aussi simple que cela! Voici le code:

Y.get("#navProducts").addClass("selected");

Enfin, je fais que la vôtre de la vôtre est vraiment dragable en instanciant simplement un nouvel objet de glisser-déposer et en lui faisant référence au nom de la classe de mon image. Dès que l'objet est créé, l'image est dragable. En tant que contact supplémentaire, je change le curseur de la souris lorsqu'il plane sur l'image afin qu'il soit évident que l'image est dragable:

navProducts.addClass("selected");

Résumé

Ainsi, comme vous pouvez le voir, Yui 3 est un animal complètement différent de son prédécesseur. Avec une nouvelle syntaxe, vous gagnez une bibliothèque plus rapide, plus légère, plus facile et plus flexible - prêt à entreprendre vos projets Web les plus ambitieux.

Voyant qu'il s'agissait d'une introduction, nous avons à peine rayé la surface de ce qui est possible avec YUI 3. Pour plus de lecture, consultez le YUI 3.x Aperçu de la version 2, la présentation de Satyen Desai sur Yui 3 et le Forum Yui 3.

Des questions fréquemment posées sur Yui 3

Quelles sont les nouvelles fonctionnalités de YUI 3?

YUI 3 Présente une multitude de nouvelles fonctionnalités conçues pour rendre le développement Web plus facile et plus efficace. Il s'agit notamment d'un nouveau système d'événements qui permet une gestion des événements plus flexible, un nouveau système de modules qui simplifie le processus de chargement et d'utilisation des modules, et un nouveau système d'attribut qui fournit une API cohérente pour travailler avec les propriétés d'objet. De plus, YUI 3 comprend un certain nombre de nouveaux utilitaires et widgets, tels que Node et NodeList pour la manipulation DOM, IO pour les demandes AJAX et Widget pour créer une module d'interface utilisateur réutilisable.

Comment créer une module YUI 3?

dépendances, puis implémentation de la fonctionnalité du module. Les dépendances du module sont spécifiées comme un tableau de noms de modules, et la fonctionnalité du module est implémentée comme une fonction qui reçoit l'instance YUI comme argument. Cette fonction est l'endroit où vous définissez les méthodes et les propriétés de votre module.

Comment fonctionne le nouveau système d'événements dans YUI 3?

Le nouveau système d'événements dans YUI 3 est basé sur le concept d'objectifs d'événements et de gestionnaires d'événements. Une cible d'événements est un objet qui peut émettre des événements, et un gestionnaire d'événements est une fonction qui répond à ces événements. Vous pouvez créer une cible d'événements en étendant la classe EventTarget, et vous pouvez attacher des gestionnaires d'événements à une cible d'événement à l'aide de la méthode on (). Ce système permet un degré élevé de flexibilité dans la façon dont les événements sont gérés.

Quel est le but du système d'attribut dans YUI 3?

Le système d'attribut dans YUI 3 fournit une API cohérente pour travailler avec les propriétés d'objet. Il vous permet de définir des attributs avec un ensemble spécifique de caractéristiques, par exemple s'ils sont en lecture seule ou en écriture, s'ils ont une valeur par défaut, et s'ils doivent déclencher un événement de changement lorsque leur valeur est modifiée. Ce système facilite la création d'objets avec une interface bien définie.

Comment utiliser l'utilitaire IO dans YUI 3 pour les demandes AJAX?

L'utilitaire IO dans YUI 3 fournit une API simple et cohérente pour faire des demandes AJAX. Vous pouvez utiliser la méthode io () pour envoyer une demande, en spécifiant l'URL, la méthode de demande (obtenir ou publier) et toutes les données à envoyer avec la demande. La méthode IO () renvoie un objet de transaction, que vous pouvez utiliser pour gérer la réponse.

Comment utiliser les utilitaires de nœud et de nodelist dans YUI 3 pour la manipulation DOM?

Le nœud et les utilitaires nodelist dans YUI 3 fournissent une API simple et cohérente pour manipuler le DOM. Vous pouvez utiliser la méthode y.one () pour obtenir une référence à un seul élément DOM, et la méthode y.all () pour obtenir un nodeliste représentant une collection d'éléments. Ces méthodes renvoient les instances de nœud et de nodelist, qui fournissent une multitude de méthodes pour manipuler les éléments qu'ils représentent.

Comment utiliser l'utilitaire du widget dans YUI 3 pour créer des composants d'interface utilisateur réutilisables?

L'utilité de widget dans YUI 3 fournit un cadre pour créer des composants UI réutilisables. Un widget est essentiellement un composant visuel qui résume un élément de fonctionnalité spécifique. Vous pouvez créer un widget en étendant la classe de widgets et en implémentant les méthodes et les propriétés qui définissent le comportement et l'apparence de votre widget.

Comment charger et utiliser des modules dans YUI 3?

Chargement et en utilisant des modules dans YUI 3 est fait en utilisant la méthode YUI (). Use (). Cette méthode prend comme arguments les noms des modules à charger et une fonction de rappel à exécuter une fois les modules chargés. La fonction de rappel reçoit une instance YUI comme argument, qui donne accès aux modules chargés.

Comment gérer les erreurs dans YUI 3?

La gestion des erreurs dans YUI 3 est effectuée en utilisant la méthode Y.Error (). Cette méthode lance une erreur avec un message spécifié et enregistre éventuellement l'erreur et arrête l'exécution du bloc de code actuel. Vous pouvez attraper et gérer les erreurs lancées par y.error () à l'aide d'un bloc d'essai / capture.

Comment prolonger les classes dans YUI 3?

L'extension de classe dans YUI 3 est effectuée en utilisant la méthode Y.Extend (). Cette méthode prend comme arguments le constructeur de la classe à créer, le constructeur de la classe à étendre et un objet contenant les méthodes et les propriétés à ajouter à la nouvelle classe. La nouvelle classe hérite de toutes les méthodes et propriétés de la classe qu'il étend, et les ajoute ou les remplace avec les méthodes et propriétés spécifiées dans le troisième argument.

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!