IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

bonnes pratiques syntaxe javascript


Sujet :

JavaScript

  1. #1
    Invité
    Invité(e)
    Par défaut bonnes pratiques syntaxe javascript
    Bonsoir à tous,

    Analyste développeur orienté POO (Java essentiellement) et DB Oracle (PL/SQL), j'utilise et appréhende depuis plusieurs mois le langage Javascript.

    Pour un projet commençant à prendre de l'importance, je m'efforce de nettoyer les erreurs maladroites et mauvaises pratiques qui se trouve dans le code.

    Un des points important étant l'utilisation de fonction globales...

    Seulement, après énormément de temps passer à lire sur ce sujet, j'ai appris de nombreuses choses mais certains avis semblent en contradiction et ma vision n'est toujours pas très claire quant à la syntaxe à adopter.

    Pour m'aider, pourriez-vous me donner votre avis sur le petit exemple de code ci-dessous (qui fonctionne mais nécessite la librairie jquery layout). Est-il correct d'un point de vue bonne pratique? Si non, pourquoi et comment l'écririez-vous?

    fichier loadcore.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    var ns_app = ns_app || {};
    ns_app.createNS("ns_app.core");
     
     
    $(document).ready(function () {
       var layout = new ns_app.core.JQUILayout(true);
       layout.defineMainLayout();
    });
    fichier layout.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    (function($) {
    	ns_app.core.JQUILayout = function(defStyles) {
    		this.defStyles = defStyles;
    	}
     
    	ns_app.core.JQUILayout.prototype.defineMainLayout = function() {
    		$("body").layout({ applyDefaultStyles: this.defStyles });
    	}	
    })(jQuery);
    Ce qui me parait nécessaire dans le code si j'ai bien compris les bonnes pratiques :
    • l'utilisation de namespaces (en l'occurence deux niveaux ici).
    • l'utilisation de prototype pour ne pas dupliquer les instances de méthodes.
    • l'utilisation d'une fonction anonyme exécutée automatiquement pour limiter la portée du code.



    Ce qui me dérange d'après ce que j'ai lu (mais peut-être mal compris) :

    • on conseille de toujours précéder la déclaration d'une fonction ou d'une variable par var, mais cette notation ne le permet pas (var ns_app.core.JQUILayout = function... ne fonctionnera pas).
    • Cette syntaxe permet-elle d'avoir des variables et méthodes privées? Si oui comment? ou le tout est-il privé? Dans quel cas comment rendre une partie publique?
    • On déconseille l'utilisation de new pour créer un nouvel objet, mais je ne vois pas comment me passer de :
      Code : Sélectionner tout - Visualiser dans une fenêtre à part
      var layout = new ns_app.core.JQUILayout(true);


    Beaucoup d'exemples utilisent la notation littérale, mais il me semble que cette syntaxe ne permet pas l'utilisation de prototype et donc induit le duplication des méthodes.

    Qui plus-est, je souhaite pouvoir séparer le code d'un même sous-namespace (ns_app.core) en plusieurs fichiers. Et il ne me semble pas avoir vu de solution avec cette notation.

    Voilà, cela me serait déjà d'une aide précieuse si vous pouviez m'éclairer par rapport à tout cela. Et si vous remarquez d'autres choses à éviter, n'hésitez pas à le signaler.


    Un grand merci d'avance.


    Max.

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Bonsoir Max,

    Ce qui me parait nécessaire dans le code si j'ai bien compris les bonnes pratiques :
    • l'utilisation de namespaces (en l'occurence deux niveaux ici).
    • l'utilisation de prototype pour ne pas dupliquer les instances de méthodes.
    • l'utilisation d'une fonction anonyme exécutée automatiquement pour limiter la portée du code.
    Impeccable, tu as tout compris.



    Ce qui me dérange d'après ce que j'ai lu (mais peut-être mal compris) :

    • on conseille de toujours précéder la déclaration d'une fonction ou d'une variable par var, mais cette notation ne le permet pas (var ns_app.core.JQUILayout = function... ne fonctionnera pas).
    • Cette syntaxe permet-elle d'avoir des variables et méthodes privées? Si oui comment? ou le tout est-il privé? Dans quel cas comment rendre une partie publique?
    • On déconseille l'utilisation de new pour créer un nouvel objet, mais je ne vois pas comment me passer de :
      Code : Sélectionner tout - Visualiser dans une fenêtre à part
      var layout = new ns_app.core.JQUILayout(true);


    Beaucoup d'exemples utilisent la notation littérale, mais il me semble que cette syntaxe ne permet pas l'utilisation de prototype et donc induit le duplication des méthodes.

    Qui plus-est, je souhaite pouvoir séparer le code d'un même sous-namespace (ns_app.core) en plusieurs fichiers. Et il ne me semble pas avoir vu de solution avec cette notation.
    - Il faut en effet utiliser var devant chaque déclaration de variable. Mais quand tu utilises un namespace déjà déclaré avec var, il ne s'agit plus d'une déclaration mais de l'ajout d'une propriété à ce namespace. Auquel cas il ne s'agit plus d'une déclaration mais d'une affectation. Donc pas besoin de var

    - Pour faire simple, les variables locales de tes fonctions seront tes variables privées, tandis que les variables rattachées au namespace seront publiques. En fait, il s'agit plus d'une question de portée de variable (on parle aussi de scope de la variable).

    -Je ne sais pas où tu as lu ça mais l'opérateur new est tout à fait approprié pour déclarer une instance à partir d'une fonction constructeur. De même, l'utilisation de prototype est recommandée pour les objets que tu es amené à avoir en un grand nombre d'exemplaires (des instances autrement dit). Pour les singletons, la déclaration littérale est plus appropriée. C'est le cas des namespaces par exemple.

    Pour ce qui est de la séparation en différents fichiers, ce n'est pas un problème car si ton namespace est une variable globale, il est rattaché à l'objet window qui est accessible depuis tous tes fichiers. Donc tu peux le réutiliser dans tous tes fichiers :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    //script1.js
     
    (function(ns){
       var a = "privee";
       function privee(){ return a; }
     
       ns.b = "public";
       ns.publique = function(){
         return a + "  ou " + privee() + " ou " + b;
       }
     
    })(window.NAMESPACE = window.NAMESPACE || {})
     
    //script2.js chargé après script1
     
    (function(ns){
       ns.publique(); //pas de souci pour le récupérer
     
    })(window.NAMESPACE = window.NAMESPACE || {})
    Pour la dernière ligne avec window.NAMESPACE, c'est une simple condition pour initialiser le namespace à un objet vide au cas où il n'a pas encore été déclaré. Je mets ça pour ne pas avoir à me préoccuper de l'ordre dans lequel mes fichiers sont appelés.
    One Web to rule them all

  3. #3
    Membre actif
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    128
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 128
    Points : 210
    Points
    210
    Par défaut
    Salut.

    Citation Envoyé par SylvainPV Voir le message
    - Pour faire simple, les variables locales de tes fonctions seront tes variables privées, tandis que les variables propriétées rattachées au namespace seront publiques. En fait, il s'agit plus d'une question de portée de variable (on parle aussi de scope de la variable) nature : dans un cas tu as une variable (qui a un scope lexical étant celui de la fonction dans laquelle elle a été déclarée) dans l'autre tu as une propriété (totalement publique).
    Je me permet de rectifier un peu car c'est un peu ambigüe et cela contredit ta phrase précédente.

    Pour ce qui est du new, il est parfaitement admis de l'utiliser, et au contraire avec les nouvelles évolutions en ES6 il sera même de plus en plus présent. Aucune bonne pratiques n'interdit son utilisation, tout ce que tu as lu ce sont des guerres de clocher, il y a souvent des débats (durant parfois des mois) sur des mailing list comme JSmentors et je peux t'assurer qu'aucune bonne pratique ne se dégage, tout au juste quelques trolls non argumentés.

    Le seul problème éventuel que tu pourrait avoir serait un problème de pollution du scope global si tu invoque un constructeur en tant que fonction (ç-à-d en utilisant "var obj = Obj();" au lieu de "var obj = new Obj();"). Stoyan Stefanov en parle longuement dans un chapitre de "Javascript Patterns" et expose plusieurs solutions. Pour ma part je ne vois pas vraiment l'intérêt, la rigueur personnelle devrait suffire pour éviter ce genre d'erreurs grossières (mais ce n'est que mon opinion).

    Sinon bonne chance pour ton passage au javascript, tu verras c'est un langage très intéressant et très flexible. Comme tu as un background Java tu aura probablement du mal avec le typage faible, mais rien d'insurmontable. Pour mitiger ce problème je te conseille de commenter et typer tes signatures avec JsDoc (l'équivalent de JavaDoc pour le JS http://usejsdoc.org/ https://github.com/jsdoc3/jsdoc) cela tournera facilement sous Rhino, tu as même la tache Ant dispo en téléchargement, c'est donc super facile pour un dev Java de faire un build process aux petits oignons.

    Une bonne pratique en JS consiste à privilégier quand elles existent les notations littérales, plus lisibles. Ainsi on préfèrera écrire :
    - pour un objet basique "var obj = {key:val, key:val, ... };" plutôt que "var obj = new Object();"
    - pour un tableau "var arr = [val, val, ...];" plutôt que "var arr = new Array();"
    - pour une expression régulière "var regex = /pattern/ig;" plutôt que "var regex = new RegExp('pattern', 'ig');"

    Et enfin évite l'erreur de débutants que l'on voit souvent (à cause des gens venant de PHP) qui consiste à mélanger les objets ( {key:val, key:val, ... } ) et les tableaux ( [val, val, ...] ). Pour faire une analogie dis toi que :
    - les objets (notation littérale {key:val, key:val, ... } ) sont des Maps
    - les tableaux (notation littérale [val, val, ...] ) sont des Lists


    Voila, bon courage à toi !

Discussions similaires

  1. Bonnes pratiques JavaScript
    Par Community Management dans le forum Général JavaScript
    Réponses: 185
    Dernier message: 14/09/2016, 19h42
  2. Bonne pratique apprentissage Javascript
    Par t3__rrY dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 27/06/2014, 18h04
  3. Bonnes pratiques de sécurité en JavaScript
    Par Toulousaing dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 08/04/2012, 20h47
  4. javascript orienté objet: bonne pratique et héritage
    Par negstek dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 31/08/2011, 20h27
  5. [POO] Bonnes pratiques href="javascript:fonction()"
    Par LhIaScZkTer dans le forum Général JavaScript
    Réponses: 20
    Dernier message: 04/04/2009, 19h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo