Écrire du code Javascript propre est assez difficile… Sur trop de projets, j’ai rencontré la difficulté du javascript quasi impossible à maintenir au bout de 6 mois, trop souvent éparpillé dans nos pages.
Je vais donc tenter de trouver une solution la plus complète possible, et sans framework autre que jQuery dans un premier temps, pour y remédier 🙂
Lister quelques “bonnes pratiques” va nous aider à organiser notre code.
1 – Une page web doit être consultable et fonctionnelle sans Javascript :
Ce langage est optionnel car il est possible de refuser son exécution via les options du navigateur ! Javascript est donc a utiliser principalement pour améliorer et étendre le comportement de nos pages.
Notre site web devra donc resté accessible, même si toutes les options ne sont pas disponibles, sans le Javascript.
2 – Commenter nos scripts :
Avoir des noms de fonctions clairs aide beaucoup mais un petit commentaire évite parfois des confusions sur certaines parties du code plus complexe que d’autres.
//check format numeric type (3,2) var data_num = data_len.replace(',', '.'); var data_num1 = null; var data_num2 = null; if (data_num.indexOf('.') != -1) { //that's a decimal format data_num1 = data_num.substring(0, data_num.indexOf('.')); data_num2 = data_num.substring(data_num.indexOf('.') + 1, data_num.length); data_len = (parseInt(data_num1) + parseInt(data_num2) + 1); }
3 – Eviter d’utiliser trop de variables globales :
Toute variable déclarée en dehors d’une fonction est globale, c’est-à-dire accessible et modifiable depuis n’importe quelle partie du script. Coder avec ce type de variables nous exposerait donc à des risques importants d’effets de bord en modifiant volontairement ou accidentellement la variable.
function maFonction(){
var champions_array;
/*...*/
}
4 – Comportement, structure et présentation :
La séparation de ces 3 codes est très importante car ce principe permettra une meilleure lecture du code par la suite.
La structure correspond aux balises html donc la page, la présentation est donc le style de la page (css) tandis que le coté fonctionnel de la page, c’est-à-dire son comportement, sera écrit dans un fichier Javascript.
user.css :
input[type=button] {
color: #3399FF;
}
user.html :
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Gestion utilisateur</title> <link rel="stylesheet" type="text/css" href="./Style/common.css"/> <link rel="stylesheet" type="text/css" href="./Style/user.css"/> <script type="text/javascript" src="./Script/user_manager.js" /> <script type="text/javascript" src="./Script/user_function_map.js" /> </head> <body> <input type="button" value="Vérifier l'utilisateur" id="check_user"/> </body> </html>
user_manager.js :
var user_manager = function () {
//variable de user_manager
this.userName = null;
//fonction de user_manager
this.checkUser = function () {
/*...*/
}
}
//variable globale
var USER_MANAGER = null;
if (!USER_MANAGER) {
//instanciation de la variable globale
USER_MANAGER = new user_manager();
}
5 – Désolidariser nos scripts de l’interface utilisateur :
Notre site web sera accessible via navigateur sur PC, mais également via le naviateur d’une tablette par exemple. Il serait donc judicieux de séparer la logique de la fonction dans un fichier, charger en fonction du support (PC / Tablette) le fichier de gestion des évènements qui appellera la fonction logique.
user_function_map.js :
$(document).ready(function () {
$('#check_user').click(USER_MANAGER.checkUser);
});
user_manager.js :
//variable globale var USER_MANAGER = null; if (!USER_MANAGER) { //instanciation de la variable globale USER_MANAGER = new user_manager(); } var user_manager = function () { //variable de user_manager this.userName = null; //fonction de user_manager this.checkUser = function () { /*...*/ } }
6 – Eviter les redondances :
Optimiser nos méthodes servira, là encore, la lisibilité du code. Inutile de répéter du code qui va effectuer la même chose qu’un autre ! Favorisons un code un peu plus générique, auquel nous passerons les variables nécessaires.
Exemple :
this.search = function(target){ //methode unique pour la recherche
$.ajax({
url: '../’+target+’/Search', //construit l’url pour cette demande
type: 'POST',
data: "id=1",
dataType: 'json',
complete: function (results) { },
success: function (data) { },
error: function (data) { }
});
}
7 – Les comparateurs :
JavaScript implémente deux comparateurs d’égalité == et === ainsi que leurs réciproques != et !==. Ceux que nous devrions toujours utiliser sont les === et !== car les autres provoquent certains bugs.
Voici une petite illustration des bugs provoqués alors qu’avec === les résultats sont tous false :
'' == '0' // false '' == 0 // true '0' == 0 // true false == 'false' // false false == '0' // true false == undefined // false false == null // false null == undefined // true '\t\r\n' == 0 // true
8 – Manipulation de données JSON :
Le format json est plus performant que xml car plus léger, de plus, sont appel est plus simple.
Exemple :
//rechercher un utilisateur par id
$.ajax({
url: '../User/Search',
type: 'POST',
data: "id=1",
dataType: 'json',
complete: function (results) { },
success: function (data) {
if (data != null) {
for (var i = 0; i < data.length; i++) {
if (data[i].Statut == "admin") {
console.log('Vous avez le droit !');
}
}
}
},
error: function (data) { }
});
9 – Le point-virgule :
En JavaScript, les points virgules sont optionnels, mais il est préférable de toujours terminer nos instructions par des points virgule.
Voilà, je pense qu’il y a de quoi faire du code assez bien organisé, je vous invite a consulter plus de documentation afin de vous faire votre propre idée et apporter quelques amélioration à ces principes, notamment ce lien sur la conférence au salon européen devoxx 2013.
Ping : Astuce Laravel 5.4 : Requêtes ajax (GET, POST) et les tokens | Blog développeuse - Hamon