Mettez votre JavaScript en ordre

Auteur: John Stephens

Date De Création: 23 Janvier 2021

Date De Mise À Jour: 19 Peut 2024

Vidéo: Apprendre le JavaScript fonction d’ordre supérieur ES6 #18 | formation JavaScript débutant

Contenu

Mon ancienne approche
Mon approche actuelle
Le HTML
Fichiers JavaScript de comportement
JavaScript d'application
Ajax
Portée
Site de production

Dans mon dernier article, en août 2011, j'ai discuté d'une méthode que j'utilise pour modulariser CSS dans une construction de site Web. Dans ce suivi, je vais vous présenter un moyen de modulariser votre JavaScript afin de faciliter le développement et la maintenance pour vous et vos équipes. Ce n’est pas la seule façon dont vous pouvez le faire, mais c’est une méthode qui fonctionne pour moi - et que vous pourriez également trouver utile lorsque vous essayez d’organiser vos projets.

Les guerres récentes de navigateurs se sont apparemment concentrées sur les performances de JavaScript ces dernières années, et nous utilisons des quantités plus importantes que jamais. Nous entrons dans une ère où nous utiliserons de plus en plus de scripts côté client pour gérer ce qui était traditionnellement considéré comme des choses côté serveur, comme l'utilisation de moteurs de modèles JS pour rendre le HTML. Dans cet esprit, je dirais qu'une meilleure organisation de votre JavaScript est plus importante que jamais.

Avant de commencer, je pense qu'il vaut la peine de dire que je ne suis pas un programmeur JavaScript inconditionnel. Je suis un développeur frontend avec une formation en design, même si je cherche à améliorer mes compétences JavaScript. Cette solution est née d'essayer de me faciliter la vie et j'espère qu'elle pourra faire la même chose pour vous.

Mon ancienne approche

Au cours des dernières années, où j'ai utilisé de plus en plus de JavaScript sur les sites Web, j'ai utilisé un certain nombre de méthodes pour organiser mon JavaScript, et je n'ai jamais été totalement satisfait de l'une d'entre elles.

Les méthodes courantes que j'utiliserais incluaient une application.js, un tas de fichiers JavaScript de plug-in, un fichier de bibliothèque JavaScript (généralement jQuery) et ensuite, dans un effort un peu désespéré pour rendre les choses plus faciles à lire, certaines fonctions finissaient souvent par se diviser en différents fichiers JavaScript. Cela laissait souvent un dossier JavaScript désordonné et déroutant.

Cela n'a jamais vraiment semblé être un problème alors que tout était dans ma mémoire. Mais six mois plus tard, quand je devrais essayer de me rappeler ce que je pensais au moment du développement, ce serait une tâche beaucoup plus difficile.

Souvent, chaque fonction avait du code qui était là pour vérifier si certains éléments existaient ou non afin de décider d'exécuter le reste de la fonction. La plupart de ces fonctions recherchent alors un événement - généralement Cliquez sur. Donc, quelque chose comme:

if ($ ("# features"). length> 0) {$ ("# features a"). click (function (e) {// faire quelque chose});}

Au départ, j'avais écrit JavaScript au besoin dans une fonction prête pour le DOM. Cela est rapidement devenu illisible, et je me souviens qu'un fichier JavaScript faisait des milliers de lignes et redoutait de devoir le regarder.

Quand j'ai réalisé que ce système se révélait un peu lourd, j'ai alors commencé à avoir toutes les fonctions dont j'aurais besoin en dehors du DOM prêtes et à avoir juste les appels dans le DOM. J'ai pensé que cela aiderait, mais cela ne créait que de longs fichiers et rendait toutes mes variables et mes fonctions publiques.

C'était bien jusqu'à ce que je commence à travailler pour AOL, qui exigeait que tout JavaScript soit dans des objets à espace de noms. Cela m'a ensuite amené à lire ce qu'ils étaient et comment travailler avec eux. Avoir à apprendre sur les objets, les propriétés et les méthodes de cette manière a été l'impulsion pour essayer d'intensifier mon jeu JavaScript.

J'ai appris à aimer la méthode d'objet à espace de noms. Chaque fonction à l'intérieur était une fonction privée, à l'exception de quelques méthodes publiques renvoyées et d'un DOM prêt à l'intérieur pour lancer un init () une fonction. Cela a coïncidé avec un effort que je faisais pour réduire la quantité de JavaScript que j'écrivais et compter davantage sur un meilleur HTML, de nouvelles méthodes CSS et des interactions plus simples. J'en suis venu à reconnaître que je rendais mes interactions beaucoup trop complexes, simplement parce que je le pouvais.

Au fur et à mesure que les navigateurs maîtrisaient mieux JavaScript et que les demandes des sites Web que je construisais augmentaient, j'ai recommencé à écrire des quantités croissantes de JavaScript. C'est à ce moment-là que le problème de travailler avec un gros fichier JavaScript est réapparu. Pire encore, j'ai souvent constaté que tous les autres développeurs avec lesquels je travaillais revenaient simplement à mettre des fonctions disponibles globalement en dehors de mon bel objet d'espacement de noms, car c'était plus simple et plus facile pour eux. Et cela a rendu mes jolis fichiers JavaScript laids.

Lorsque vous lisez ce récit sur la façon dont j'organisais mon JavaScript, vous pouvez probablement établir des parallèles avec la façon dont vous avez peut-être organisé votre JavaScript. Généralement ces application.js les fichiers grandissaient et devenaient de plus en plus difficiles à lire et à maintenir.

Mon approche actuelle

En travaillant avec une équipe de développeurs chez Pivotal Labs à New York, j'ai vu une méthode nouvelle et bien meilleure. Bien qu'il puisse sembler que je ne nomme pas, je mentionne Pivotal Labs pour reconnaître où j'ai vu cette méthode. Je l'ai volé. (Eh bien, vous pouvez sortir l'homme de Manchester, mais pas le Manchester de l'homme.) Au moins, je fais la chose honorable et je la partage avec vous.

Le résultat de cette méthode est un répertoire JavaScript beaucoup plus propre et plus logique. Tout le JavaScript est maintenant divisé en différents fichiers dans une structure de dossiers logique pour les fonctions, les plug-ins, les modèles et le JavaScript fourni par le fournisseur. Vous pouvez créer vous-même une structure plus logique pour votre build, mais voici comment je la structure pour le moment:

Comportements sont des morceaux d'interactions DOM dont le site a besoin.
Modèles est un endroit pour mettre des modèles pour les moteurs de rendu JavaScript (Moustache, Dust et ainsi de suite).
Plug-ins est l'endroit où je place tous les plug-ins JavaScript que j'ai écrits pour l'application.
Vendeur est pour conserver les fichiers de bibliothèque - ici jQuery et tous les plug-ins de la communauté que je ne mettrai pas à jour.

Ensuite, au lieu d'un événement DOM ready déclenchant des fonctions qui vérifient les éléments sur une page et font quelque chose s'il les trouve, j'utilise une méthode différente pour tout câbler. Ce que j'utilise en fait, c'est un attribut sur les éléments qui ont besoin de fonctions, puis je recherche cet attribut pour déclencher une fonction. Voici comment je procède:

Le HTML

Les éléments DOM auxquels une fonctionnalité JS leur est associée reçoivent un comportement des données attribut, avec un nom de méthode. Dans ce cas, c'est glissière:

section id = "features" data-behavior = "slider"> ... / section>

Fichiers JavaScript de comportement

Le JavaScript de cette méthode réside dans Répertoire / js / behavior /. Je donne au nom de fichier le même titre que le nom du comportement dans le HTML. Cela permet de le suivre et de garder un œil sur les éléments individuels beaucoup plus simplement au fur et à mesure du processus. C'est le point sur les builds statiques lorsque mon amnésie prend le dessus sur moi, et j'oublie généralement de mettre à jour le HTML pour inclure ce nouveau fichier JavaScript, puis je me demande pourquoi cela ne fonctionne pas. Mais dans mes applications Rails 3, cela se fait automatiquement, même si vous devrez peut-être mettre à jour les ressources incluses dans vos applications.Cela peut s'avérer extrêmement utile pour les types distraits comme moi.

Ce nouveau fichier JavaScript est l'endroit où j'écris tout le JavaScript que je veux avoir en interaction avec l'élément DOM, qui dans ce cas ressemble à ceci:

DLN.Behaviors.slider = function (container) {container.slider ({sliderInner: container.find (". Features_list"), slideAmount: 990, itemsVisible: 1, currentSet: 1, budge: 0, looping: true, quickLinks: false, speed: 250, selfCentering: false, paginatorClassname: "features_paginator", keyControls: true, onMoveFunction: false});};

Ce comportement déclenche un plug-in, également nommé glissière, qui vit dans le / js / plugins / répertoire et y passe quelques options, où récipient est l'élément du DOM qui avait le comportement des données.

JavaScript d'application

Pour appeler ces méthodes et leur passer l'élément conteneur, nous devons tout d'abord construire les objets et en créer de nouvelles instances. Pour cela, nous allons jeter un œil à mon application.js.

Alors que se passe-t-il dans ce application.js? Explorons ce que j'ai fait de plus près. Pour cette structure, nous avons besoin d'un objet à espace de noms pour stocker nos méthodes. J'ai donc mis en place un objet, DLN, et un Comportements objet en utilisant une notation littérale:

var DLN = fenêtre.DLN || {};}; DLN.Behaviors = {};

DLN est simplement un initialisme du nom du projet, vous n'avez donc pas à l'utiliser. Changez simplement cela pour ce qui convient à votre travail.

De nouveaux objets à l'intérieur de l'objet à espace de noms peuvent être ajoutés - peut-être pour des modèles, des fonctions d'assistance ou autre - à l'avenir, en fonction des besoins de votre projet.

Sur DOM prêt, JavaScript exécute une méthode nommée onReady, qui à son tour, exécute le LoadBehavior méthode:

DLN.onReady = function () {DLN.LoadBehavior ();}; $ (document) .ready (function () {DLN.onReady ();});

LoadBehavior définit la recherche dans le DOM de tout élément avec un attribut de comportement des données:

context.find (" * [comportement des données]"). each (function () {...}

Lorsqu'il trouve un élément avec cet attribut, il stocke d'abord l'élément en question dans une variable, qui à son tour stocke une chaîne du contenu du comportement des données attribut:

var that = $ (this); var behavior = that.attr ('comportement des données');

Le stockage de l'élément dans la variable qui permet à l'élément d'être passé dans le comportement cible plus tard, et est un moyen courant de contourner le changement de portée, lorsqu'il s'avère que ce n'est pas ce que vous voulez ou ce que vous attendez. Nous y avons tous été …

Utilisation de jQuery chaque, il parcourt les noms de comportement, divisé en un tableau avec diviser(" "). Ceci est utile pour qu'un seul élément DOM puisse avoir plusieurs comportements:

$ .each (behavior.split (""), function (index, behaviorName) {...}

Pour exécuter la méthode souhaitée, à l'intérieur d'un essayer-attraper , nous clonons un comportement sélectionné dynamiquement dans une variable (ComportementClasse) puis en faire une instance (initializedBehavior), en passant par l'élément qui avait le comportement des données attribut (cela devient récipient dans les fichiers JS de comportement):

essayez {var BehaviorClass = DLN.Behaviors [behaviorName]; var initializedBehavior = new BehaviorClass (que);}

Vous avez peut-être remarqué que je n'ai pas attraper sur ça essayer-attraper déclaration - probablement une chose plutôt méchante à avoir fait. Mais cela permet de ne pas générer d’erreurs si la méthode de comportement appropriée n’existe pas.

Cela semble probablement plus complexe que de suivre le code avec votre doigt et de simplement déterminer ce qui se passe. C'est à cette étape qu'une certaine familiarité avec le JavaScript orienté objet est utile. L'article de Bearded Octo «OO JS en 15 minutes ou moins» est une ressource fantastique pour comprendre l'écriture de JavaScript orienté objet.

Ajax

Vous pouvez également noter qu'il existe un paramètre de contexte dans le LoadBehavior une fonction. C'est pour vous permettre d'exécuter LoadBehavior sur les éléments que vous avez ajaxés en place, et pas simplement les éléments présents au DOM ready. Il vous suffit de passer par l'élément que vous souhaitez LoadBehavior fonction de recherche et il mettra également en place des comportements sur le contenu ajaxé. Donc par exemple:

DLN.LoadBehavior ($ ("# ajaxed"));

Portée

Les comportements eux-mêmes, ainsi que tous les autres objets à l'intérieur de l'objet d'espacement de nom que vous créez, sont disponibles globalement. Vous pouvez donc appeler un comportement à partir d'un autre ou définir des variables disponibles globalement. Dans cet exemple, pour exécuter le glissière fonction d'un comportement différent que vous pourriez appeler:

DLN.Behaviors.slider ($ ("# newElementNeedsSlider"));

Les méthodes et propriétés des fichiers JS de comportement ne sont pas disponibles globalement, sauf si vous le souhaitez. Pour les créer afin que vous puissiez les définir comme propriétés ou méthodes d'un objet de comportement, vous pouvez donc définir à l'intérieur d'un fichier de comportement:

DLN.Behavior.slider.active = true ;.

Ensuite, ce serait alors disponible à partir de n'importe quel autre JavaScript sur votre site. Ou bien, vous pouvez utiliser des fonctions getter et setter globalement accessibles, que vous configureriez de la même manière. Ainsi, un comportement JavaScript pourrait être:

DLN.Behaviors.slider = function (conteneur) {var slide_amount = 13; DLN.Behaviors.slider.setSlideAmount = function (montant) {slide_amount = montant; } DLN.Behaviors.slider.getSlideAmount = function () {return slide_amount; } // ...}

Vous pouvez maintenant mettre à jour et récupérer globalement une variable privée de la méthode en:

DLN.Behaviors.slider.getSlideAmount (); // 13DLN.Behaviors.slider.setSlideAmount (1312); DLN.Behaviors.slider.getSlideAmount (); // 1312

Alternativement, pour rendre une propriété ou une méthode disponible globalement, vous pouvez simplement l'ajouter à l'objet de niveau supérieur:

DLN.version = "1.3.1.2";

ou alors:

DLN.error = function (msg) {alert ("error!" + Msg);};

Faites juste attention de ne pas rendre trop difficile le suivi de ce qui est défini où et de finir par rendre cette méthode simple complexe. Si vous allez avoir beaucoup de variables et de fonctions à l'échelle du site à stocker de cette manière, envisagez de créer un objet dans lequel les placer et un dossier de fichiers JavaScript nommé logiquement pour les contenir.

Site de production

Pour le développement, de nombreux fichiers JS avec des bits de code sont OK. Mais pour la production, concaténez et réduisez-les en un seul fichier. Les packs d'éléments sont indispensables, sinon vous aurez des demandes individuelles ralentissant le chargement de votre application. Rails 3 a cela intégré, et des packs de ressources similaires sont disponibles pour la plupart des frameworks d'application. Un rapide Google renvoie une foule de conseils sur la compression de JS, tels que le pipeline d'actifs de Rails 3.1, Minify et YUI Compressor for .NET.

Merci à Ross Bruniges pour son examen par les pairs de ce tutoriel

Trouvez les 35 meilleurs exemples de Javascript sur notre site partenaire, Creative Bloq.

Article Précédent