Share
Partons avec une approche pratique aujourd'hui. Nous allons écrire un petit fragment de code dans jQuery, puis le transférer dans plusieurs bibliothèques différentes. En dehors de cette partie, nous allons voir comment implémenter certaines fonctionnalités de base nécessaires dans chacune de ces bibliothèques. Cela semble amusant? Plongeons dedans!
Les frameworks JavaScript sont une bénédiction lorsque vous avez beaucoup d'idées à transformer en code propre et fonctionnel. De plus, avec l'essor fulgurant des applications Web utilisant la technologie AJAX, des infrastructures telles que jQuery sont nécessaires pour réduire le temps nécessaire à la mise en œuvre des fonctionnalités requises. Et en regardant autour de vous, vous voyez jQuery this et jQuery avec peu ou pas de mention d'autres frameworks. Le fait est qu'il existe une tonne d'autres frameworks aussi élégants que jQuery. Aujourd'hui, nous allons examiner deux frameworks qui promettent de faciliter l'écriture de code. Notez que j'utilise les mots library, framework et toolkit de manière interchangeable. Je ne vais pas entrer dans la sémantique et vous ne devriez pas non plus. Chacune de ces bibliothèques essaie d'accomplir différentes choses. Nous allons seulement regarder les parties où leurs fonctionnalités prévues se chevauchent.
En dehors des applications ésotériques et / ou dédiées, le code JavaScript de la plupart des gens peut être décomposé en morceaux qui prennent en charge les fonctionnalités suivantes:
Un développeur JavaScript rencontre ce problème tôt ou tard: son code vierge ne s'exécutera tout simplement pas. Il a débogué le code encore et encore mais en vain. Le problème est que le code est simplement placé en haut de la page. Lorsque le script est exécuté, les éléments auxquels il fait référence dans son code n'existent même pas dans le DOM, ce qui entraîne ces erreurs..
N'oubliez pas que les appels de script sont synchrones. Cela signifie que lorsqu'un navigateur voit une balise de script, il cesse de charger tout le reste jusqu'à ce que les scripts soient chargés. Cela contraste fortement avec son mécanisme de chargement général où d'autres objets sont souvent chargés de manière asynchrone.
Vous pouvez toujours contourner ce problème en plaçant simplement le code au bas de la page, mais vous ne le savez jamais. En gardant cela à l’esprit, la plupart des bibliothèques fournissent une fonction DOM-Ready pour s’assurer que le code n’est exécuté que lorsque le DOM est prêt à être verrouillé mais avant que les images ne soient complètement chargées..
Avec du JavaScript brut, vous verriez quelque chose comme ceci.
window.onload = someFunction;
Vous voulez évidemment accéder à des éléments spécifiques et les manipuler d'une manière ou d'une autre. Malheureusement, IE est plutôt pointilleux et peut casser votre code. Pour permettre aux développeurs d’écrire un meilleur code, chaque bibliothèque fournit une méthode de navigation croisée qui vous permet d’accéder à un élément spécifique. La plupart des bibliothèques utilisent des sélecteurs de style CSS pour cibler leurs éléments cibles afin de raccourcir la courbe d'apprentissage et, ce qui est encore plus important, un code plus propre.
Sans un cadre, vous devriez faire ceci:
Accentsconagua
var elem = document.getElementById ('header'); var io = document.getElementsByTagName ('input'); Bien sûr, une fois que vous avez obtenu l'élément, vous souhaiterez effectuer une opération. Cela inclut l'ajout ou la suppression d'une classe, le basculement de sa visibilité, la modification de ses dimensions, la modification de son contenu, etc. Comme toujours, écrire tout cela en JavaScript brut peut être douloureux. Chacune de ces bibliothèques fournit des fonctions de wrapper pour effectuer tout le travail mentionné ci-dessus et bien plus encore..
Avec du code JavaScript brut, votre code ressemblerait à ceci:
document.getElementById ("title"). innerHTML = "Title"; Souvent, vous voudrez changer directement les nœuds dans le DOM. Vous souhaiterez peut-être créer un nouvel objet wrapper dans lequel vous souhaitez définir votre statut Twitter récent ou supprimer un élément div pour une application de messagerie que vous écrivez. Dans chacun de ces cas, vous souhaiterez manipuler efficacement le DOM et toutes ces bibliothèques fournissent des méthodes pour le faire de manière propre..
L’ajout d’un élément prendrait autant de code avec JS brut.
var myElement = document.createElement ("Du texte"); document.all.myBody.appendChild (myElement); Les événements sont les éléments constitutifs de toute application et l’une des parties les plus difficiles du scripting inter-navigateurs. Le truc, c'est que le W3C définit une manière et qu'IE fait sa propre chose. Pour remédier à cela, toutes ces bibliothèques permettent d’attacher ou de détacher même des gestionnaires à des événements spécifiques de l’élément..
Organiser des événements en JavaScript brut.
element.addEventListener ('clic', quelque chose, faux) JavaScript natif utilisant l'objet XHR est fastidieux à écrire et à déboguer. Pour permettre aux développeurs d’écrire du code plus facilement, chacun de ces frameworks résume les détails fastidieux de la mise en oeuvre d’une requête AJAX derrière un simple appel de fonction avec des méthodes à appeler lorsque la requête aboutit ou échoue..
Je ne vais même pas essayer de poster du code pour faire une requête AJAX avec JS brut. Vous devriez plutôt regarder l'excellent screencast de Jeffrey. Dans quelques instants, nous verrons comment un framework réduit considérablement votre code.
Rien d'extraordinaire vraiment; nous allons construire une simple démo. Le balisage ressemble à ceci:
Net Tuts Ceci est un exemple au hasard texte. Cliquez sur le mot random pour modifier le DOM en créant un nouvel élément et en l'ajoutant au contenu actuel..
Nous avons du texte dans un élément p. Nous avons le mot au hasard enveloppé dans un élément span avec un identifiant de maintrigger. Chaque fois qu'un élément est associé à l'élément avec un ID de maintrigger, un nouvel élément div doit être ajouté à l'élément de paragraphe contenant le texte "cliqué". Cette simple démonstration répond à toutes les exigences de base en matière de fonctionnalités, y compris l'accès aux éléments, la connexion d'événements et l'ajout d'éléments, à l'exception de l'abstraction AJAX, et nous permettra d'avoir une idée de chaque bibliothèque..
Avant d’examiner les autres bibliothèques, il est préférable d’examiner comment jQuery nous permet de les exécuter toutes..
Ah, tout imprègne jQuery. Cela fait longtemps que les développeurs Web parlent de la ville, et à juste titre. jQuery n'essaie pas de faire trop de choses. Vous n'allez pas trouver une douzaine de widgets plus fournis avec la construction de base ou des moyens de prendre en charge des classes ou des objets basés sur des classes. jQuery se concentre principalement sur les DOM et je pense qu'ils ont fait un excellent travail.
Si votre travail est principalement lié au DOM, jQuery est la voie à suivre. La syntaxe est l’une des plus simples et la plupart du temps, on a l’impression de lire du pseudocode plutôt que du code réel et fonctionnel. La communauté est grande et conviviale et il existe une tonne de plug-ins que vous pourriez simplement passer pour une fonctionnalité supplémentaire. De plus, il existe une bibliothèque d'interface utilisateur si vous souhaitez ajouter des widgets courants à votre site..
La base d'utilisateurs de jQuery comprend:
Extrêmement impressionnant si vous me demandez.
Nous allons maintenant voir comment jQuery nous permet de réduire le temps que nous passons à coder avant de regarder les autres frameworks..
$ (document) .ready (function () // Vos affaires ici);
Lorsque vous écrivez votre code jQuery, il est impératif de placer votre code dans cette section. Nous demandons ici que le code soit exécuté lorsque le DOM est prêt à être manipulé. Vous pouvez soit passer un nom de fonction, soit simplement écrire tout votre code dans une fonction anonyme, comme dans l'exemple ci-dessus..
var conteneur = $ ("# main"); var posts = $ (". post"); var entêtes = $ ("h1"); Aussi simple que cela devient. Nous créons d’abord une variable contenant une référence au nœud DOM, car nous ne voulons pas la chercher encore et encore. $ est un alias du jQuery espace de noms. Nous transmettons simplement l'id, la classe ou la balise de l'élément, exactement comme si vous écriviez une déclaration CSS. Passer des sélecteurs CSS fonctionne exactement comme vous le souhaitiez. Des exemples comme celui ci-dessous fonctionnent aussi.
$ ("span: has (a)"). doQuelque chose (); $ ("ul li: nth-child (3)"). doQuelque chose (); $ ("p: caché"). doQuelque chose (); $ ("div"). attr ("classe", "cliqué"); $ ("div"). html ("Bonjour"); $ (" span "). addClass (" current "); Changer les attributs d'un élément, son contenu ou les classes qu'il contient est assez simple. Nous accédons simplement à l'élément requis et appelons la fonction nécessaire. le attr méthode nous permet de changer un attribut spécifique d'un élément, le html méthode nous permet de spécifier le contenu HTML et la addClass la méthode n'a besoin d'aucune explication.
$ ("# post"). after ("commentaires"); $ (" p "). wrap (""); $ (". comment "). append ("posté par"); Ajouter des éléments après l'élément spécifié, ajouter du contenu à l'intérieur d'un élément ou envelopper l'élément passé avec un autre est tout aussi simple. Nous obtenons l'élément et appelons ensuite la fonction qui convient le mieux à nos besoins.
// Utilisation de fonctions anonymes $ ("# submit"). Bind ("click", function (e) // Votre code ici); // Passer un nom de fonction $ ("# submit"). Bind ("click", evHandler); Organiser des événements est tout aussi facile. Nous obtenons l'élément, puis appelons la fonction bind. Le premier argument est le type d'événement et le second est le code à exécuter lorsque l'événement est déclenché. Vous pouvez soit donner le nom de la fonction ou simplement créer une fonction anonyme et y placer tout votre code..
$ .ajax (type: "GET", url: "test.html", succès: fonction (xhr) // du code ici, erreur: fonction (xhr) // du code ici $ .ajax ( type: "POST", url: "test.php", succès: fonction (xhr) // du code ici, erreur: fonction (xhr) // du code ici);
Vous n'avez besoin que de 3 lignes pour passer un appel barebones AJAX. Spécifiez le type de demande, l'URL et vous êtes prêt à partir. Des fonctions de réussite et d'erreur peuvent être définies pour spécifier ce qui se passe si leur homonyme se produit.
Pour obtenir les fonctionnalités souhaitées mentionnées ci-dessus, votre code jQuery ressemblerait approximativement à ceci:
$ ("# maintrigger"). click (function () $ ("p"). after ("Cliqué");); 3 lignes suffisent. Nous sélectionnons les éléments nécessaires, appelons la fonction click, créons une fonction anonyme et ajoutons un élément div. Cela semble beaucoup plus compliqué que ce n’est réellement le cas..
Maintenant que nous avons examiné le code jQuery, nous pouvons explorer les autres bibliothèques.
Prototype est le grand-père des frameworks JavaScript. Il fournit toutes les finesses que vous attendez d'un framework mature, puis en ajoute un peu plus. Il fournit également un certain nombre de fonctions de bibliothèque pour vous aider à écrire du code bien abstrait et orienté objet..
La base d'utilisateurs de Prototype comprend:
Nombreux noms de premier plan bien connus. Comme je le disais, Prototype a longtemps été le cadre de choix avant l’arrivée de jQuery.
Maintenant que les introductions sont terminées, voyons comment Prototype peut vous aider à mieux écrire en JavaScript..
document.observe ("dom: chargé", function () // Votre code ici); Ce qui précède est la version de DOM Ready de Prototype. Cela semble bizarre au début si vous venez de jQuery mais c’est aussi simple. le observer fonction écoute l'événement passé pendant la durée de vie du document. Nous passons juste dans l'événement nécessaire et enveloppons tout notre code dans une fonction anonyme, comme avec jQuery.
// Accéder à un élément avec un identifiant post $ $ ('post'); // Utiliser le moteur de sélection CSS $$ ('. Comment'); $ fournit un alias pour le document.getElementById méthode. Il vous permet de rechercher des éléments avec la valeur ID transmise.
$$ vous permet d'utiliser des sélecteurs CSS à la place. Il prend comme arguments un nombre quelconque de sélecteurs CSS et renvoie l'élément spécifique ou un tableau d'entre eux. Comme avec le moteur de sélecteur jQuery, vous pouvez utiliser toutes sortes de sélecteurs néfastes CSS3, y compris des sélecteurs enfants, des sélecteurs d'attributs et même des pseudo-classes..
$ ('post'). addClassName ('author'); $ ('conteneur'). getWidth (); $ ('post'). hide (); Le prototype fournit un certain nombre de méthodes puissantes pour travailler avec l'élément renvoyé. N'oubliez pas que vous devez accéder à cela via l'objet $. Cela signifie que vous devez d’abord enregistrer la référence avant de pouvoir manipuler l’élément de la manière qui vous convient le mieux..
Pour manipuler un élément, il suffit d’obtenir une référence à cet élément et d’appeler la fonction nécessaire. Vous pouvez faire beaucoup de choses, de la définition des attributs au masquage de l'élément.
$ ('post'). wrap ('div', 'id': 'conteneur'); $ ('post'). update ('Un texte aléatoire
'); $ ('post'). insert ('div', 'Un texte aléatoire
'); La première méthode encapsule l'élément passé avec un élément décrit, définissant ses différentes propriétés dans le processus. La fonction de mise à jour remplace le contenu de l'élément passé par celui que nous souhaitons. L'insertion insère des extraits de texte brut ou HTML en haut, en bas, avant ou après l'élément. Au lieu d'utiliser des méthodes séparées comme ajouter et après comme dans jQuery, nous avons juste besoin de spécifier la position et nous avons terminé.
// Utilisation de fonctions anonymes $ (btn) .observe ('click', function (event) // Votre code ici); // Passage du nom d'une fonction $ (btn) .observe ('click', doQuelque chose); Comme je l'ai mentionné précédemment, le observer fonction vous permet de connecter des événements à leurs gestionnaires d’événements. Nous obtenons d’abord une référence à l’élément, puis appelons le observer méthode transmettant le nom et la fonction de l'événement en tant que paramètres. Si vous ne voulez pas créer une fonction séparée juste pour cela, vous êtes toujours libre de créer une fonction anonyme et d'y placer tout votre code..
new Ajax.Request ("test.html", méthode: 'get', onSuccess: fonction (transport) // du code ici, onFailure: fonction (du transport) // du code ici); new Ajax.Request ("test.php", méthode: 'post', onSuccès: fonction (transport) // du code ici, onFailure: fonction (du transport) // du code ici); Le prototype fournit des fonctions d'emballage étendues pour effectuer une demande AJAX. J'ai montré les requêtes AJAX POST et GET de plus bas niveau ici. Il existe une tonne d'autres méthodes spécialisées pour les demandes AJAX, notamment un programme de mise à jour automatique..
Pour obtenir la fonctionnalité souhaitée mentionnée ci-dessus, votre code devrait ressembler approximativement à ceci:
$ ("maintrigger"). observe ('clic', fonction (événement) $ ("texte"). insert ('Cliqué'); ); Encore un 3-liner. Ce que nous faisons est similaire au code jQuery, la syntaxe est simplement différente. Nous utilisons le observer fonction pour attacher l'événement click au code que nous avons créé dans une fonction anonyme. Nous venons d'insérer du texte pour indiquer que le processus était un succès.
Vous verrez que nous faisons généralement la même chose que jQuery, avec une syntaxe différente et quelques différences. Lorsque votre travail n’est pas centré sur DOM et que vous avez besoin des objets appropriés pour exploiter correctement vos idées, Prototype est le cadre à choisir..
Mootools ne prétend pas être un cadre facile à apprendre. Admettons-le, sa page Web indique qu’il s’agit d’un cadre d’application Web destiné aux développeurs Web de niveau intermédiaire à avancé. Ne les laissez pas vous tromper. C'est un cadre extrêmement élégant qui vous permet de créer du code JavaScript extrêmement classe. Il se concentre sur JavaScript dans son ensemble plutôt que sur le DOM. Dans cet esprit, il fournit un certain nombre de fonctions pour accélérer votre flux de travail et étend le DOM autant que possible. Et tout comme Prototype, il contient un système de création de classe et d'héritage qui devrait rendre ceux qui viennent de C # ou de Java plus à l'aise avec JavaScript.
Les entreprises qui utilisent MooTools incluent:
Un autre framework avec une base d'utilisateurs très impressionnante.
Voyons maintenant comment MooTools vous facilite la vie en tant que développeur JavaScript.
window.addEvent ('domready', function () // votre code ici); Cela peut paraître compliqué, mais ne vous inquiétez pas. C'est juste différent. Nous attachons l'événement domready des fenêtres à la fonction anonyme. le ajouter un évènement nous permet d'attacher des événements à leurs gestionnaires. MooTools définit l’événement domready que nous utilisons ici. Comme d'habitude, nous encapsulons tout notre code dans une fonction anonyme et le plaçons à l'intérieur. Là! Ce n'était pas si difficile, était-ce?
// Utiliser la fonction $ $ ('someElement'); // Utiliser les sélecteurs CSS $$ ("# main"); $$ (". post"); $$ ("h1"); Comme avec Prototype, vous pouvez utiliser la fonction $ comme alias pour la récupération directe ou utiliser la fonction $$ pour utiliser des sélecteurs CSS beaucoup plus intuitifs..
Chacune de ces méthodes renvoie soit un élément DOM, soit un tableau, selon ce que vous utilisez..
$ ('someElement) .hasClass (' clicked '); // Renvoie true si l'élément a bien cette classe $ ("someElement"). SetProperty ('class', 'clicked'); $ ("someElement"). empty (); // vide l'élément de tous ses enfants MooTools fournit un certain nombre de méthodes pour manipuler un élément spécifique, y compris la définition de ses attributs, la modification de son contenu, etc. Si vous êtes intéressé, vous devriez consulter la documentation MooTools ici
var someElement = new Element ('div', id: 'mySecondElement'); someElement.inject (someOtherElement); // Injecte le contenu de someElement dans someOtherElement $ ("someElement"). Destroy (); // Supprime l'élément et tous ses enfants du DOM $ ('someElement'). Clone (). // crée une copie de l'élément Comme dans la plupart des bibliothèques, MooTools fournit une multitude de fonctions permettant de modifier le DOM. Tout, de l'ajout de contenu à la suppression complète d'un nœud du DOM, est inclus.
// Utilisation de fonctions anonymes $ ('myElement'). AddEvent ('click', function () // Some code); // Passer le nom de la fonction $ ('myElement'). AddEvent ('click', doWething quelque chose); Comme je l'ai noté ci-dessus, nous utilisons le ajouter un évènement méthode pour attacher l’événement à son gestionnaire. Nous passons le nom de l'événement à la fonction et, comme d'habitude, nous sommes libres de choisir entre créer une fonction distincte ou anonyme pour y insérer notre code..
// Une requête GET var myRequest = new Request (méthode: 'get', url: 'test.html'); myRequest.send (); // Une requête POST var myRequest = new Request (url: 'test.html'); myRequest.send (someData);
Configurer une demande AJAX est tout aussi simple. MooTools fournit un robuste Demande qui permet d’utiliser les requêtes make POST ou GET AJAX. La méthode par défaut est POST, il n’est donc pas nécessaire de spécifier si vous faites une demande..
Tout comme les autres frameworks, la classe request prend en charge les rappels en cas de succès, d'erreur et d'achèvement.
Pour obtenir la fonctionnalité souhaitée mentionnée ci-dessus, votre code devrait ressembler approximativement à ceci:
$$ ("# maintrigger"). addEvent ('click', function () var elem = $ ("text"); var someElement = nouvel élément ('div'); someElement.appendText ("Clicked!"). injecter (elem, "after");); Un peu plus bavard que les 2 autres implémentations, mais ici, nous créons un nœud div à partir de rien, puis nous l’ajoutons. Nous enregistrons également une référence à l'élément de paragraphe lui-même. Après cela, nous ajoutons simplement le texte nécessaire dans l’élément nouvellement créé, puis nous l’ajoutons au DOM..
Plus verbeux? Oui. Plus difficile? Définitivement non. C'est juste un style différent de codage.
$ ("# maintrigger"). click (function () $ ("p"). after ("Cliqué");); $ ("maintrigger"). observe ('clic', fonction (événement) $ ("texte"). insert ('Cliqué'); ); $$ ("# maintrigger"). addEvent ('click', function () var elem = $ ("text"); var someElement = nouvel élément ('div'); someElement.appendText ("Clicked!"). injecter (elem, "after");); Tous ces extraits de code font essentiellement la même chose. Juste dans différents styles et avec différentes quantités de contrôle.
Cet article n’a aucunement pour but de comparer ces cadres. Au lieu de cela, je voulais attirer l'attention du lecteur sur les autres solutions viables disponibles en dehors de jQuery. Ce n'est pas que jQuery est mauvais. J'adore jQuery, c'est un cadre merveilleux, mais il se concentre principalement sur DOM et DOM seul. Si vous souhaitez écrire une application Web, un moteur de rendu ou une autre fonctionnalité intéressante, la création de code propre, extensible et maintenable est une priorité. C’est pour ce genre de scénario que s’il est plus logique de recourir à un autre cadre.
Je ne pouvais choisir que deux cadres dans cet article en raison de contraintes d'espace. Il existe un certain nombre d'autres cadres tout aussi puissants, tels que Dojo, YUI, Rico et GWT, qui méritent également votre attention..
J'espère que j'ai piqué votre intérêt pour les frameworks JavaScript alternatifs aujourd'hui et espère vraiment que vous allez expérimenter d'autres frameworks. Faites-nous savoir comment l'expérimentation se passe dans les commentaires. Bonne codage!
