Comme vous le savez, JavaScript est le langage de programmation numéro un au monde, c'est le langage du web, c'est le langage des applications mobiles hybrides (comme PhoneGap ou Appcelerator), c'est le langage côté serveur (comme NodeJS ou Wakanda), Et il existe de nombreuses autres implémentations. En même temps, c'est aussi un langage d'éveil pour de nombreux novices, car il peut non seulement afficher un simple message d'alerte sur le navigateur, mais peut également être utilisé pour contrôler un robot (à l'aide de nodebot, ou nodruino). Les développeurs qui maîtrisent JavaScript et peuvent écrire du code organisé, standardisé et efficace sont devenus recherchés sur le marché des talents.
A noter que les extraits de code de cet article ont été testés sur le dernier Google Chrome (version 30), qui utilise le moteur JavaScript V8 (V8 3.20.17.15).
1 N'oubliez pas d'utiliser le mot-clé var lors de l'attribution d'une valeur à une variable pour la première fois
L'attribution d'une valeur à une variable non définie entraîne la création d'une variable globale. Évitez les variables globales.
2 Utilisez === au lieu de ==
L'opérateur == (ou !=) effectue automatiquement des conversions de type lorsque cela est nécessaire. L'opération === (ou !==) n'effectue aucune conversion. Il compare les valeurs et les types et est également considéré comme plus rapide que ==.
Copiez le code comme suit :
[10] === 10 // est faux
[10] == 10 // est vrai
'10' == 10 // est vrai
'10' === 10 // est faux
[] == 0 // est vrai
[] === 0 // est faux
'' == faux // est vrai mais vrai == "a" est faux
'' === faux // est faux
3 Utilisez des fermetures pour implémenter des variables privées
Copiez le code comme suit :
function Personne (nom, âge) {
this.getName = function() { nom de retour } ;
this.setName = function(newName) { name = newName };
this.getAge = function() { return age };
this.setAge = function(newAge) { age = newAge };
//Propriétés non initialisées dans le constructeur
profession varoise;
this.getOccupation = function() { return occupation };
this.setOccupation = fonction (newOcc) { occupation =
nouveauOcc };
}
4 Utilisez un point-virgule à la fin d'une instruction
C'est une bonne pratique d'utiliser un point-virgule à la fin d'une instruction. Vous ne serez pas averti si vous oubliez de l'écrire, car dans la plupart des cas, l'interpréteur JavaScript ajoutera le point-virgule pour vous.
5 Créer le constructeur de l'objet
Copiez le code Le code est le suivant : function Person(firstName, lastName){
this.firstName = prénom;
this.lastName = lastName;
}
var Saad = new Person("Saad", "Mousliki");
6 Utilisez typeof, instanceof et constructeur avec précaution
Copiez le code comme suit : var arr = ["a", "b", "c"];
typeofarr; // renvoie "objet"
arr instanceofArray // vrai
arr.constructeur(); //[]
7 Créer une fonction d'auto-appel (Self-calling Function)
Ceci est souvent appelé fonction anonyme auto-invoquée ou expression de fonction invoquée immédiatement par IIFE. Il s'agit d'une fonction qui est automatiquement exécutée immédiatement après la création, généralement comme suit :
Copiez le code comme suit :
(fonction(){
// du code privé qui sera exécuté automatiquement
})();
(fonction(a,b){
var résultat = a+b;
renvoyer le résultat ;
})(10,20)
8- Obtenez un élément aléatoire d'un tableau
Le code de copie est le suivant : var items = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119] ;
var randomItem = items[Math.floor(Math.random() * items.length)];[code]
9 Obtenez un nombre aléatoire dans une plage spécifique
Cet extrait de code est utile lorsque vous souhaitez générer des données de test, telles qu'une valeur de salaire aléatoire comprise entre une valeur minimale et maximale.
[code]var x = Math.floor(Math.random() * (max - min + 1)) + min;
10 Générer un tableau de nombres compris entre 0 et la valeur maximale définie
Copiez le code comme suit : var numberArray = [], max = 100 ;
pour( var i=1; nombresArray.push(i++) < max;); // nombres = [0,1,2,3 ... 100]
11 Générer une chaîne alphanumérique aléatoire
Copiez le code Le code est le suivant : function generateRandomAlphaNum(len) {
var rdmstring = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
12 Brouiller un tableau de nombres
Le code de copie est le suivant : var number = [5, 458, 120, -215, 228, 400, 122205, -85411] ;
nombres = nombres.sort(function(){ return Math.random() - 0.5});
/* les numéros du tableau seront égaux par exemple à [120, 5, 228, -215, 400, 458, -85411, 122205] */
13 Fonction de coupe de cordes
Il existe une fonction trim classique en Java, C#, PHP et de nombreux autres langages, qui est utilisée pour supprimer les espaces dans les chaînes, mais elle n'existe pas en JavaScript, nous devons donc ajouter cette fonction à l'objet String.
Copiez le code comme suit :
String.prototype.trim = function(){return this.replace(/^/s+|/s+$/g, "");};//Supprimez les espaces de début et de fin de la chaîne, à l'exclusion des espaces internes du chaîne
14 Ajouter un tableau à un autre tableau
Copiez le code comme suit : var array1 = [12, "foo", {name: "Joe"}, -2458];
var array2 = ["Biche", 555, 100];
Array.prototype.push.apply(array1, array2);
/* array1 sera égal à [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */
//En fait, concat peut connecter directement deux tableaux, mais sa valeur de retour est un nouveau tableau. Voici le changement direct vers array1
15 Convertir l'objet arguments en tableau
Copiez le code comme suit : var argArray = Array.prototype.slice.call(arguments);
L'objet arguments est un objet de type tableau, mais pas un véritable tableau
16 Vérifiez si le paramètre est un nombre (numéro)
Copiez le code Le code est le suivant : function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
17 Vérifiez si le paramètre est un tableau
Copiez le code comme suit : function isArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}
Remarque : Si la méthode toString() est remplacée, vous n'obtiendrez pas les résultats souhaités en utilisant cette technique. Ou vous pouvez utiliser :
Copiez le code comme suit :
Array.isArray(obj); // Ceci est une nouvelle méthode de tableau
Si vous n'utilisez pas plusieurs frames, vous pouvez également utiliser la méthode instanceof. Mais si vous disposez de plusieurs contextes, vous obtiendrez de mauvais résultats.
Copiez le code comme suit : var myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);
var monArray = window.frames[window.frames.length-1].Array;
var arr = nouveau monTableau(a,b,10); // [a,b,10]
// instanceof ne fonctionnera pas correctement, myArray perd son constructeur
// le constructeur n'est pas partagé entre les frames
arr instance du tableau ; // faux
18 Obtenez la valeur maximale ou minimale dans un tableau de nombres
Le code de copie est le suivant : var number = [5, 458, 120, -215, 228, 400, 122205, -85411] ;
var maxInNumbers = Math.max.apply(Maths, nombres);
var minInNumbers = Math.min.apply(Maths, nombres);
//Note du traducteur : la méthode function.prototype.apply est utilisée ici pour transmettre des paramètres.
19 Effacer un tableau
Copiez le code comme suit : var myArray = [12, 222, 1000];
myArray.length = 0; // myArray sera égal à [].
20 N'utilisez pas delete pour supprimer des éléments d'un tableau.
Utilisez splice au lieu de delete pour supprimer un élément d’un tableau. L'utilisation de delete remplace uniquement l'élément d'origine par undefined et ne le supprime pas réellement du tableau.
N'utilisez pas ceci :
Le code de copie est le suivant : var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119] ;
items.length; // renvoie 11
supprimer les éléments[3] ; // renvoie vrai
items.length; // renvoie 11
/* les éléments seront égaux à [12, 548, "a", non défini × 1, 5478, "foo", 8852, non défini × 1, "Doe", 2154, 119] */
Utilisez plutôt :
Le code de copie est le suivant : var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119] ;
items.length; // renvoie 11
items.splice(3,1);
items.length; // renvoie 10
/* les éléments seront égaux à [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
La méthode delete doit être utilisée pour supprimer une propriété d’un objet.
21 Utiliser la longueur pour tronquer un tableau
De la même manière que pour effacer le tableau ci-dessus, nous utilisons la propriété length pour tronquer un tableau.
Copiez le code comme suit : var myArray = [12, 222, 1000, 124, 98, 10] ;
myArray.length = 4; // myArray sera égal à [12, 222, 1000, 124].
De plus, si vous définissez la longueur d'un tableau sur une valeur supérieure à la valeur actuelle, la longueur du tableau sera modifiée et de nouveaux éléments non définis seront ajoutés pour la compenser. La longueur d'un tableau n'est pas une propriété en lecture seule.
Copiez le code comme suit : myArray.length = 10 ; // la nouvelle longueur du tableau est 10 ;
monTableau[myArray.length - 1]; // non défini
22 Utiliser le ET/OU logique pour porter des jugements conditionnels
Copiez le code comme suit :
var foo = 10 ;
foo == 10 && doSomething(); // Équivalent à if (foo == 10) doSomething();
foo == 5 || doSomething(); // Équivalent à if (foo != 5) doSomething();
Le ET logique peut également être utilisé pour définir des valeurs par défaut pour les paramètres de fonction
Copiez le code comme suit :
fonction faireQuelquechose(arg1){
Arg1 = arg1 || 10; // Si arg1 n'est pas défini, Arg1 sera défini sur 10 par défaut
}
23 Utilisez la méthode map() pour parcourir les éléments d'un tableau
Copiez le code. Le code est le suivant : var squares = [1,2,3,4].map(function (val) {
retour val * val;
});
// les carrés seront égaux à [1, 4, 9, 16]
24 Arrondit un nombre à N décimales
Copiez le code comme suit : var num =2.443242342 ;
num = num.toFixed(4); // num sera égal à 2,4432
25 Problème de virgule flottante
Copiez le code comme suit : 0,1 + 0,2 === 0,3 // est faux
9007199254740992 + 1 // est égal à 9007199254740992
9007199254740992 + 2 // est égal à 9007199254740994
Pourquoi cela se produit-il ? 0,1+0,2 est égal à 0,30000000000000004. Vous devez savoir que tous les nombres JavaScript sont représentés en interne sous forme de nombres à virgule flottante en binaire 64 bits, conformément à la norme IEEE 754. Pour plus d’introduction, vous pouvez lire cet article de blog. Vous pouvez résoudre ce problème en utilisant les méthodes toFixed() et toPrecision().
26 Lorsque vous utilisez for-in pour parcourir les propriétés internes d'un objet, faites attention à vérifier les propriétés.
L'extrait de code suivant évite d'accéder aux propriétés du prototype lors d'une itération sur les propriétés d'un objet :
Copiez le code comme suit :
pour (nom de la variable dans l'objet) {
if (object.hasOwnProperty(nom)) {
// fait quelque chose avec le nom
}
}
27 opérateur virgule
Copiez le code comme suit :
var a = 0 ;
varb = ( a++, 99 );
console.log(a); // a sera égal à 1
console.log(b); // b est égal à 99
28 Mise en cache des variables nécessitant un calcul ou une interrogation
Pour les sélecteurs jQuery, nous ferions mieux de mettre en cache ces éléments DOM.
Copiez le code comme suit : var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');
29 Validez les paramètres avant d'appeler isFinite()
Copiez le code comme suit : isFinite(0/0); // false
estFinite("foo"); // faux
estFinite("10"); // vrai
estFinite(10); // vrai
isFinite (non défini); // faux
estFinite(); // faux
estFinite(null); // vrai !!!
30 Évitez les index négatifs dans les tableaux
Copiez le code comme suit : var numberArray = [1,2,3,4,5];
var from = numberArray.indexOf("foo") ; // from est égal à -1
numberArray.splice(from,2); // renverra [5]
Assurez-vous que le paramètre lors de l'appel de indexOf n'est pas négatif.
31 Sérialisation et désérialisation basées sur JSON (sérialisation et désérialisation)
Copiez le code comme suit : var person = {nom :'Saad', âge : 26, département : {ID : 15, nom : "R&D"} };
var stringFromPerson = JSON.stringify(personne);
/* stringFromPerson est égal à "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString est égal à l'objet personne */
32 Évitez d'utiliser les constructeurs eval() et Function
L'utilisation des constructeurs eval et Function est des opérations très coûteuses car à chaque fois ils appellent le moteur de script pour convertir le code source en code exécutable.
Copiez le code comme suit : var func1 = new Function(functionCode);
var func2 = eval(functionCode);
33 Évitez d'utiliser with()
L'utilisation de with() insère une variable globale. Par conséquent, les variables portant le même nom verront leurs valeurs écrasées et causeront des problèmes inutiles.
34 Évitez d'utiliser for-in pour parcourir un tableau
Évitez d'utiliser des méthodes comme celle-ci :
Copiez le code comme suit : var sum = 0;
pour (var i dans arrayNumbers) {
somme += tableauNuméros[i];
}
Une meilleure façon est :
Copiez le code comme suit : var sum = 0;
pour (var i = 0, len = arrayNumbers.length; i < len; i++) {
somme += tableauNuméros[i];
}
L'avantage supplémentaire est que les valeurs des deux variables i et len ne sont exécutées qu'une seule fois, ce qui est plus efficace que la méthode suivante :
Copiez le code comme suit : for (var i = 0; i < arrayNumbers.length; i++)
Pourquoi? Parce que arrayNumbers.length sera calculé à chaque boucle.
35 Transmettez des fonctions au lieu de chaînes lors de l'appel de setTimeout() et setInterval().
Si vous transmettez une chaîne à setTimeout() ou setInterval(), la chaîne sera analysée comme si vous utilisiez eval, ce qui prend beaucoup de temps.
N'utilisez pas :
Copiez le code comme suit :
setInterval('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000)
Utilisez plutôt :
Copiez le code comme suit :
setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);
36 Utilisez les instructions switch/case au lieu de long if/else
Lorsque l'on juge plus de 2 situations, l'utilisation de switch/case est plus efficace et plus élégante (plus facile à organiser le code). Mais n’utilisez pas switch/case lorsqu’il y a plus de 10 situations à juger.
37 Utilisez switch/case pour juger de la plage numérique
Dans la situation suivante, il est raisonnable d'utiliser switch/case pour déterminer la plage de valeurs :
Copiez le code comme suit :
fonction getCatégorie (âge) {
var catégorie = "";
changer (vrai) {
le cas estNaN(âge) :
catégorie = "pas un âge" ;
casser;
cas (âge >= 50) :
catégorie = « Ancien » ;
casser;
cas (âge <= 20) :
catégorie = « Bébé » ;
casser;
défaut:
catégorie = « Jeune » ;
casser;
} ;
catégorie de retour ;
}
getCategory(5); // renverra "Bébé"
//Généralement, pour juger de la plage numérique, il est plus approprié d'utiliser if/else. l'interrupteur/boîtier est plus adapté pour juger certaines valeurs
38 Spécifiez l'objet prototype pour l'objet créé
Il est possible d'écrire une fonction qui crée un objet avec des paramètres spécifiés comme prototype :
Copiez le code comme suit : function clone(object) {
fonction OneShotConstructor(){} ;
OneShotConstructor.prototype = objet ;
renvoie un nouveau OneShotConstructor();
}
clone(Array).prototype; // []
39 Une fonction d'échappement HTML
Copiez le code comme suit : function escapeHTML(text) {
var remplacements= {"<": "<", ">": ">","&": "&", "/"": """};
return text.replace(/[<>&"]/g, function(caractère) {
renvoyer les remplacements[caractère] ;
});
}
40 Évitez d'utiliser try-catch-finally dans une boucle
Au moment de l'exécution, chaque fois que la clause catch est exécutée, l'objet d'exception capturé sera affecté à une variable, et dans la structure try-catch-finally, cette variable sera créée à chaque fois.
Évitez d'écrire comme ceci :
Copiez le code comme suit : var object = ['foo', 'bar'], i;
pour (i = 0, len = objet.longueur; i <len; i++) {
essayer {
// fait quelque chose qui lève une exception
}
attraper (e) {
// gérer l'exception
}
}
Utilisez plutôt :
Copiez le code comme suit : var object = ['foo', 'bar'], i;
essayer {
pour (i = 0, len = objet.longueur; i <len; i++) {
// fait quelque chose qui lève une exception
}
}
attraper (e) {
// gérer l'exception
}
41 Définir le délai d'attente pour XMLHttpRequests.
Lorsqu'une requête XHR prend beaucoup de temps (par exemple, en raison de problèmes de réseau), vous devrez peut-être abandonner la requête, puis vous pourrez utiliser setTimeout() avec l'appel XHR.
Copiez le code comme suit : var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = fonction () {
si (this.readyState == 4) {
clearTimeout(délai d'attente);
// fait quelque chose avec les données de réponse
}
}
var timeout = setTimeout( fonction () {
xhr.abort(); // rappel d'erreur d'appel
}, 60*1000 /* délai d'attente après une minute */ );
xhr.open('GET', url, true);
xhr.send();
De plus, vous devez généralement éviter complètement les requêtes Ajax synchrones.
42 Gestion des délais d'attente WebSocket
Normalement, après la création d'une connexion WebSocket, le serveur expirera votre connexion après 30 secondes si vous êtes inactif. Les pare-feu se déconnectent également après une période d'inactivité.
Pour éviter les problèmes de délai d'attente, vous devrez peut-être envoyer par intermittence des messages vides au serveur. Pour ce faire, vous pouvez ajouter les deux fonctions suivantes à votre code : une pour maintenir la connexion et une pour annuler le maintien de la connexion. Avec cette technique, vous pouvez contrôler le problème de délai d'attente.
Utilisez un timerID :
Copiez le code comme suit : var timerID = 0;
fonction keepAlive() {
délai d'attente var = 15 000 ;
si (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout(keepAlive, timeout);
}
fonction annulerKeepAlive() {
si (timerId) {
CancelTimeout(timerId);
}
}
La méthode keepAlive() doit être ajoutée à la fin de la méthode onOpen() de la connexion webSOcket, et CancelKeepAlive() est ajoutée à la fin de la méthode onClose().
43 Gardez à l'esprit que les opérateurs primitifs sont toujours plus efficaces que les appels de fonction. Utilisez vanillaJS.
Par exemple, n'utilisez pas :
Copiez le code Le code est le suivant : var min = Math.min(a,b);
A.push(v);
Utilisez plutôt :
Copiez le code comme suit : var min = a < b ab ;
A[A.longueur] = v;
44 N'oubliez pas d'utiliser des outils de rangement du Code lors du codage . Utilisez JSLint et les outils de compression de code (minification) (tels que JSMin) avant de vous connecter. "Outil permettant de gagner du temps : outil d'embellissement et de formatage du code"
45 JavaScript est incroyable.
Résumer
Je sais qu'il existe de nombreux autres trucs, astuces et bonnes pratiques, donc si vous avez autre chose que vous aimeriez ajouter ou si vous avez des commentaires ou des corrections sur ceux que j'ai partagés, n'hésitez pas à me le faire savoir dans les commentaires.