Le code JavaScript est-il moche ?

Version imprimable

29/02/2016, 14h03
gstratege

Le code JavaScript est-il moche ?

Bonjour,

Je suis débutant en JavaScript, dans le sens où je l'ai utilisé rapidement pour faire quelques interactions au seins de mes pages web sans plus.

Seulement, en regardant récemment du code JavaScript de bibliothèques assez complexes, je me suis aperçu que c'est assez différents du code objet un peu comme en Java ou en C#.

Je voyais des fonctions et des tableaux un peu partout, qui s'enchaînaient et qui s'emboitaient. Bref, j'ai trop du mal à comprendre le code.

J'ai l'impression que c'est moche.

Je ne suis pas ici pour critiquer ou quelque chose comme ça, j'essaye juste de comprendre.

Donc merci à vous les développeur JavaScript, de m’éclaircir un peu plus sur le sujet et pourquoi pas me donner un peu plus envie d'apprendre ce langage.

Merci d'avance ;)
29/02/2016, 14h17
SylvainPV

JavaScript est un langage très permissif, haut niveau, et multi-paradigme. Ça veut dire qu'on peut faire des choses fantastiques avec, mais aussi et très facilement des choses catastrophiques.

La beauté du code comporte une bonne partie de subjectivité, mais ce qui est sûr, c'est que si un code JS ne te plaît pas, tu as sûrement la possibilité de le réécrire "à ta façon" sans en changer le fonctionnement.

Tu as un exemple de code "moche" à montrer ? On peut peut-être arranger ça.
29/02/2016, 14h55
gstratege

Je pense ce qui m'embête c'est qu'il n'est pas un langage objet
29/02/2016, 15h08
ABCIWEB

Salut,

Si tu vois des codes complexes quand il s'agit de traiter des tableaux, je ne suis pas très étonné. Les fonctions javascript disponibles pour le traitement des tableaux sont longtemps restées du niveau de l'age de pierre. D'où un code très besogneux. Mais ça s'arrange petit à petit avec les dernières versions.
29/02/2016, 15h21
gstratege

Je pense qu'il ne faut pas que je saute les étapes, je dois lire un tuto complet avant, car effectivement ça m'a l'air assez différent du Java
29/02/2016, 15h52
SpaceFrog

On peut en effet coder de façon très moche avec Javascript.
Mais l'avantage comme le souligne Sylvain, c'est que l'on peut aussi coder de belle manière.

Il est vrai cependant que la permissivité de ce langage est à la fois on atout et son désavantage.
29/02/2016, 16h30
SylvainPV

Et JavaScript est bel et bien un langage objet, mais basé sur les prototypes et non les classes.
29/02/2016, 16h56
mh-cbon

Oui c'est vrai que quand je copie du code JS dans la balise code de DVP, c'est moche ; (

Ok, je sort, c'est hs ; )
29/02/2016, 19h02
NoSmoking

Bonjour,

Citation:

...la balise code de DVP, c'est moche ; (

moche en quoi, choix des couleurs ?

Ah non les couleurs c'est très bien. C'est l'indentation qui me fait mal.

un code qui me pique les yeux, car j'ai le sentiment que tout flotte,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var index = 0;
$(document).ready(function(){
	console.log("ready !")
	$.ajax({
		type: "GET", //rest Type
    		dataType: 'json', //mispelled
    		url: "http://localhost:8080/v1/log/student/blondelt",
    		async: true,
    		contentType: "application/json; charset=utf-8",
    		success: function (msg) {
		        for(var index=0; index<msg.length;index++){
		            $("#username").html(msg[index].username);
		            $("#exercise").html(msg[index].exercise);
		            $("#computer").html(msg[index].computer);
		            $("#content").html(msg[index].content);
		        }
		}
	});
})

Ce qui serait génial c'est que les TAB en début de lignes soient transformées en double espace,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$(document).ready(function(){
  console.log("ready !")
  $.ajax({
    type: "GET", //rest Type
    dataType: 'json', //mispelled
    url: "http://localhost:8080/v1/log/student/blondelt",
    async: true,
    contentType: "application/json; charset=utf-8",
    success: function (msg) {
      for(var index=0; index<msg.length;index++){
        $("#username").html(msg[index].username);
        $("#exercise").html(msg[index].exercise);
        $("#computer").html(msg[index].computer);
        $("#content").html(msg[index].content);
      }
    }
  });
})

D'un point de vue pratique, cela permet d'avoir un code plus compact quand de multiple contextes de fonctions sont chaînés.

Un exemple concret https://github.com/mafintosh/multica...master/test.js

01/03/2016, 21h49
SylvainPV

Des espaces pour indenter ? Je démissionne :P

Si ça te gène tant que ça, tu peux installer Stylish et te faire un petit user-style:

Code:

pre { tab-size: 1em; }
01/03/2016, 21h53
tdutrion

Citation:

Envoyé par SylvainPV

Des espaces pour indenter ? Je démissionne :P

Allez ! :P http://sideeffect.kr/popularconvention#javascript

Perso 100% indentation 4 spaces, par contre c'est mon ide qui s'en charge...
01/03/2016, 22h17
SylvainPV

Tabs to indent, spaces to align. Les smart tabs, c'est la seule et unique vérité véritable et tous les autres au bûcher :sm:

https://www.emacswiki.org/emacs/SmartTabs
01/03/2016, 23h25
mh-cbon
C'est dommage, le css tab-size ne fonctionne pas avec firefox : (
https://developer.mozilla.org/fr/docs/Web/CSS/tab-size

C'était une bonne idée malgrè tout.

Ceci dit, tab ou espace, tant que le code arrête de flotter et fait sens dans sa lecture comme dans sa structure, moi ça me va :)
Je penses même que https://github.com/feross/standard va trop loin à forcer les gens à supprimer les points virgules inutile.

Moi ce que je prèfère écrire dernièrement ce sont des conditions dans ce genre, plus de if (..) {..},
Code:

1 2 3 4 5 argv.vlc && process.platform !== 'win32' && (!argv.n && argv.quit !== false) && process.exit(0);
ou des assignations comme celle ci

Code:

params += "&subtypes=" + (subtypes.value && JSON.parse(subtypes.value));

:s

Avec ça on ne sait toujours pas bien ce qui choque @gstratege

Quant à moi c'est la gestion des parenthèses que je trouve visuellement mal foutu, du coup je fais plutôt un truc dans le genre

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function()
{
  console.log("ready !")
  $.ajax({
    type: "GET", //rest Type
    dataType: 'json', //mispelled
    url: "http://localhost:8080/v1/log/student/blondelt",
    async: true,
    contentType: "application/json; charset=utf-8",
    success: function (msg) 
    {
      	for(var index=0; index<msg.length;index++)
	{
	    $("#username").html(msg[index].username);
	    $("#exercise").html(msg[index].exercise);
	    $("#computer").html(msg[index].computer);
	    $("#content").html(msg[index].content);
	}
    }
  });
})

Je sais c'est pas bien, mais je m'y retrouve mieux :P

01/03/2016, 23h42
mh-cbon

voilà qui me fait penser à du php ;)
02/03/2016, 10h15
Gnuum
Personnellement, j'adapte mes conventions aux usages dominants du langage (ce qui ne veut pas dire que ce sont les meilleures), car:
- c'est en moyenne plus facile pour les autres de comprendre mon code
- quand on fait de l'open source, ça évite d'avoir à changer de convention tout le temps
- je ne me prends pas la tête à optimiser mes propres conventions pour chaque langage
Je sais que certains vont penser que c'est un argumentum ad populum mais je pense que les conventions sont avant tout faites pour qu'on se comprenne les uns les autres et non pour se comprendre soi-même (et puis on s'habitue vite). Cela m'évite au passage, tous les débats philosophiques avec moi-même sur quelles sont les meilleurs conventions (je ne suis pas vraiment sûr qu'il y en ait). J'y réfléchirai quand je créerai mon propre langage! ;)
A noter qu'il n'est pas toujours facile d'identifier les usages dominants notamment en JavaScript (cependant ce sont très clairement les espaces (2 ou 4) qui l'emportent en terme d'indentation)!
02/03/2016, 15h49
Watilin

J'ai changé de conventions personnelles à plusieurs reprises, à un moment j'avais même choisi d'indenter avec trois espaces pour le seul plaisir de ne pas faire comme tout le monde :mrgreen:
Tout ça pour dire : le style, on s'en fout, ça ne devrait pas faire l'objet d'un débat. Si vous faites de l'open source, suivez les conventions établies par l'équipe. S'il n'y a pas de conventions, proposez-en, parce que c'est important pour la cohérence du code, mais ne mettez pas en avant vos préférences personnelles, sinon tout le monde sera tenté de faire de même et ça risque de ralentir le projet.

Je rejoins l'argument de Gnuum :

Citation:

j'adapte mes conventions aux usages dominants du langage […] c'est en moyenne plus facile pour les autres de comprendre mon code

c'est un peu le principe de moindre surprise. En tout cas, ces préoccupations ne doivent pas ralentir le travail du codeur, et des outils existent pour prendre ça en charge : EditorConfig pour adapter automatiquement son éditeur aux conventions de l'équipe, les pretty-printers comme celui intégré à Firefox dans son scratchpad : Alt-F4, collez le code, Ctrl+P (d'ailleurs il met des guillemets simples alors que d'habitude j'en mets des doubles, du coup je me suis adapté) ou encore JSBeautifier.

Un point sur lequel – il me semble – personne n'a réagi :

Citation:

Envoyé par gstratege

Seulement, en regardant récemment du code JavaScript de bibliothèques assez complexes, je me suis aperçu que c'est assez différents du code objet un peu comme en Java ou en C#.

Les bibliothèques sont souvent minifiées, donc leur code est volontairement moche. Et ce, quand elles ne sont pas obfusquées (j'abhorre cette pratique).
02/03/2016, 15h59
SpaceFrog

Niveau style et indentation, cela ne vaut de toute façon que pour le développement...
Le code de prod lui devrait subir un dégraissage, une minification...
Comme sus dit, la mise en page du code c'est juste pour la lisibilité, pour soi-même en premier, et pour les autres si besoin est.