La coloration de code en fonction de la portée des variables.
Une alternative à la coloration syntaxique

Les rubriques (actu, forums, tutos) de Développez
Réseaux sociaux


 Discussion forum

Le , par Kaamo, Membre Expert


Coloration en fonction de la portée des variables,
une alternative à la coloration syntaxique

On connait tous la coloration syntaxique liée à la syntaxe du langage afin d'améliorer la lisibilité de notre code pour mieux l'appréhender.
Mais parfois, ne serait-il pas mieux de surligner le code en fonction de la portée des variables plutôt que de mettre en valeur la syntaxe ?

C'est une idée proposée à la base par Douglas Crockford (JSON, JSLint) via un post sur Google+. C'est d'ores et déjà intégré à JSLint (plus de détails sur l'utilisation dans le post de D. Crockford) et Daniel Lamb (un ingénieur Front-End) propose une mise en application.

Voici un exemple avec quatre niveaux d'imbrications.

Coloration syntaxique :
Code javascript :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var monNameSpace = (function () { 
  var maVar; 
  maVar = "scope 1"; 
  
  var direBonjour = function() { 
    console.log(maVar); 
  }; 
  
  return { 
    setMaVar: function(valeur){ 
      maVar = valeur; 
    }, 
  
    getMaVar: function(){ 
      return maVar; 
    }, 
  
    log: function() { 
      var autreVar = "Hello"; 
      function direBonjourComment(methode) { 
        console.log(methode); 
      } 
      direBonjourComment(autreVar); 
      direBonjour(); 
    } 
  }; 
  
})(); 
  
monNameSpace.log();

Coloration en fonction de la portée :


Si vous utilisez Vim, cela serait actuellement en cours d'intégration.

Sources :
Google+ de Paul Irish
Exemples sur GitHub


 Poster une réponse

Avatar de danielhagnoul danielhagnoul
Rédacteur
le 08/04/2013 11:34
On trouve au même niveau, "Level 1", les méthodes de l'objet (setMaVar(), getMaVar(), log()) et le code privé de l'objet (maVar, direBonjour()). Suis-je le seul que cela choque ?
Avatar de Kaamo Kaamo
Membre Expert
le 08/04/2013 12:43
Au début, j'avais tendance à penser que c'était une erreur aussi ... mais je pense que c'est le bon comportement.

Cela donne une couleur différente pour chaque niveau d'imbrication de fonction. Pas pour chaque niveaux de profondeur d'objet ... (je sais pas si c'est clair ).
L'objet retourné (contenant setMaVar, getMaVar, log) est défini dans le niveau 1, au même titre que direBonjour et maVar, c'est donc normal que ses propriétés aient la même couleur.
Par contre, les propriétés étant des fonctions, leurs corps est d'une couleur différente car c'est un autre niveau d'imbrication.

Apparemment, comme le projet a deux jours il y a quelques bugs recensés qui sont en cours de correction.
Avatar de SylvainPV SylvainPV
Membre Expert
le 08/04/2013 13:46
Je ne suis pas fan de l'idée, la coloration syntaxique est déjà utilisée pour identifier visuellement les variables, opérateurs et valeurs. De plus cette information ne nous donne que les éléments du même scope et non ceux des scopes supérieurs, pourtant accessibles.

Sur certains IDE il est proposé un panel indiquant tous les scopes accessibles depuis la position actuelle du curseur ; y compris les closures et le scope global. C'est déjà beaucoup plus pratique, surtout lorsque c'est couplé à l'auto-complétion de code.

Exemple avec le panel Structure de Webstorm:
Avatar de tomlev tomlev
Rédacteur/Modérateur
le 08/04/2013 14:29
Pour ma part je trouve que c'est pas clair du tout comme présentation... (détail important : je suis daltonien )
Avatar de MikePombal MikePombal
Membre du Club
le 08/04/2013 14:35
Une idée bien intéressante mais le problème c'est qu'en utilisant simplement le code couleur ça devient inutile pour 8% des hommes et 0.5% des femmes ayant des difficultés à percevoir les couleurs (daltonisme) tout comme moi.
Avatar de rambc rambc
Membre Expert
le 08/04/2013 19:08
Je ne trouve pas cela très pertinent. Pourquoi ? En fait, j'ai l'habitude de scinder suffisamment mes codes pour ne pas être perdu quand je me ballade dans une fonction ou une méthode.
Avatar de alex_vino alex_vino
Expert Confirmé
le 08/04/2013 22:33
Citation Envoyé par rambc  Voir le message
Je ne trouve pas cela très pertinent. Pourquoi ? En fait, j'ai l'habitude de scinder suffisamment mes codes pour ne pas être perdu quand je me ballade dans une fonction ou une méthode.

Exactement, si l'architecture est bien réalisée et le code découpée comme il le faut on n'a pas ce probleme.
JavaScript est souvent l'exemple, mais il ne faut pas oublier que tres peu de gens qui font du JavaScript savent réellement écrire du JavaScript.
Sur la plupart des CV figurent le JavaScript mais finalement tres peu maitrisent les notions un peu plus avancées et meme certaines bases (comme Prototype, tableaux, ...), mais savent plutot copier-coller un bout de code d'un plugin jQuery.

Pour beaucoup qui développent avec c'est surtout une usine a gaz rempliee de tas de fonctions non commentée par ci par la.
Moins la variable a de portée mieux c'est.
On peux donc se poser la question, est-ce que c'est un réel besoin pour un certain type d'application ou bien parce que le développeur est mauvais et non structuré?
Avatar de gwinyam gwinyam
Membre Expert
le 09/04/2013 8:05
Je suis d'accord, un code bien structuré se suffit à lui-même.

Ceci dit, pour les débutants qui viennent d'un autre langage, cette question de portée est souvent la plus dure à assimiler. La coloration par portée peut être très utile pour eux.

Après quand on a un doute sur la portée, JSLint.com détaille assez bien les différentes portées.
Avatar de Kaamo Kaamo
Membre Expert
le 09/04/2013 9:46
@gwinyam, @alex_vino, @rambc : je suis d'accord avec vous. Si le code est bien structuré, ce genre d'outil ne sert pas plus que ça.
C'est utile pour les débutants.

Mais il peut y avoir une autre utilité comme, par exemple, aider à la lecture d'un code qui ne t'appartient pas (et comme vous le soulignez, ça peut être la cata ). En cas de refacto / relecture, cet outil peut s'avérer utile donc. A voir ...
Avatar de Traroth2 Traroth2
Expert Confirmé Sénior
le 09/04/2013 10:11
Augmenter la lisibilité est toujours une bonne chose. Maintenant, est-ce que ce principe augmente réellement la lisibilité, il faudrait voir à l'usage. Ca existe pour Eclipse ?
Offres d'emploi IT
ATS-Niort- Analyste Fonctionnel Assurance (H/F)
CDI
Atos Technology Services - Poitou Charentes - Niort (79000)
Parue le 13/04/2014
Ingénieur SI | Développement web
Alternance
Oxylane - Nord Pas-de-Calais - Villeneuve d'Ascq
Parue le 09/04/2014
Développeur intégrateur web
Intérim
Kobaltt - Pays de la Loire - Nantes (44000)
Parue le 02/04/2014

Voir plus d'offres Voir la carte des offres IT
 
 
 
 
Partenaires

PlanetHoster
Ikoula