Discussion :

[gstratege]

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

[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.

[gstratege]

Je pense ce qui m'embête c'est qu'il n'est pas un langage objet

[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.

[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

[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.

[SylvainPV]

Et JavaScript est bel et bien un langage objet, mais basé sur les prototypes et non les classes.

[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 ; )

[NoSmoking]

Bonjour,

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

moche en quoi, choix des couleurs ?

[mh-cbon]

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 js :

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
 
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 js :

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
 
$(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

[SylvainPV]

Des espaces pour indenter ? Je démissionne

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

pre { tab-size: 1em; }

[tdutrion]

Des espaces pour indenter ? Je démissionne

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

Perso 100% indentation 4 spaces, par contre c'est mon ide qui s'en charge...

[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

https://www.emacswiki.org/emacs/SmartTabs

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

:s

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

[ABCIWEB]

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 :

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
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

[mh-cbon]

voilà qui me fait penser à du php

[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)!

[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
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 :

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 :

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).

[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.