45 conseils pratiques que les programmeurs JavaScript devraient connaître_javascript tips

Comme vous le savez, JavaScript est le langage de programmation numéro un au monde. C'est le langage du Web, le langage des applications mobiles hybrides (comme PhoneGap ou Appcelerator) et le langage côté serveur (comme NodeJS). ou Wakanda), et a 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 en termes de performances sont devenus la cible du marché des talents.
Il est à noter que les extraits de code de cet article ont été testés sur le dernier Google Chrome (numéro de 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înera la création d'une variable globale . Évitez les variables globales.
2 – Utilisez === au lieu de ==
== (ou !=) l'opérateur effectuera automatiquement la conversion de type si 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 ==.

Copier le code Le code est le suivant :

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

3 – Utiliser des fermetures pour implémenter des variables privées

Copier le code Le code est le suivant :

function Person(name, age) {
this.getName = function() { return name;
this.setName = function(newName) { name = newName; } ;
this.getAge = function() { return age; };
this.setAge = function(newAge) { age = newAge; initialisé dans le constructeur Attributs
var occupation;
this.getOccupation = function() { return occupation; };
this.setOccupation = function(newOcc) { occupation =
newOcc; >}



4 – Utiliser des points-virgules à la fin des instructions

Utiliser des points-virgules à la fin des instructions est une bonne pratique. 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 = firstName;

this.lastName = lastName;

}

var Saad = new Person("Saad", "Mousliki") ;


6 – Utilisez typeof, instanceof et constructeur avec précaution

Copiez le code Le le code est le suivant :var arr = ["a", "b", "c"];typeof arr; // return "object"

arr instanceof Array // true

arr.constructor(); / /[]


7 – Créer une fonction d'appel automatique

C'est ce qu'on appelle souvent une fonction anonyme auto-invoquée ou une expression de fonction d'appel immédiat (IIFE-Expression de fonction immédiatement invoquée). Il s'agit d'une fonction qui s'exécute automatiquement immédiatement après la création, généralement comme suit :

Copier le code Le code est le suivant : (function(){

// du code privé qui sera exécuté automatiquement

})();
(function(a,b){
var result = a b;
résultat de retour;
})(10,20)


8- Obtenez un élément aléatoire du tableau

Copiez le code Le code 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 très utile lorsque vous souhaitez pour générer des données de test utiles, comme une valeur de salaire aléatoire entre les valeurs minimales et maximales.
[code]var x = Math.floor(Math.random() * (max - min 1)) min;

10 – généré entre 0 et la valeur maximale définie Un tableau de nombres

Copier le code Le code est le suivant :

var nombresArray = [], max = 100 ;

for( var i=1;numbersArray.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

Copier le code Le code est le suivant :

numéros var = [5, 458, 120, -215, 228, 400, 122205, -85411];
numéros = number.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 trim de String
Il existe une fonction trim classique en Java, C#, PHP et bien d'autres langages, qui est utilisée pour supprimer les espaces dans les chaînes . Une telle fonction n'existe pas en JavaScript, nous devons donc ajouter cette fonction à l'objet String.

Copier le code Le code est le suivant :

String.prototype.trim = function() {return this .replace(/^s |s $/g, "");};//Supprimer les espaces de début et de fin de la chaîne, à l'exclusion des espaces internes de la chaîne

14 – Ajouter un tableau Aller dans un autre tableau

Copiez le code Le code est le suivant :

var array1 = [12, " foo" , {name: "Joe"} , -2458];

var array2 = ["Doe" , 555 , 100];
Array.prototype.push. apply(array1, array2);
/* array1 sera égal à [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */
//In en fait, concat peut directement implémenter une connexion à deux tableaux, mais sa valeur de retour est un nouveau tableau. Voici le changement direct vers array1

15 – Convertir l'objet arguments en tableau

Copier le code Le code est le suivant :

var argArray = Array.prototype.slice.call(arguments);
l'objet arguments est un objet de type tableau, mais pas un vrai tableau

16 – Vérifiez si l'argument est un nombre (nombre)

Copier le code Le code est le suivant :

fonction isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}

17 – Vérifiez si le paramètre est un tableau

Copier le code Le code est le suivant :

function isArray(obj){
return Object.prototype. toString.call(obj) === '[object Array ]' ;
}

Remarque : si la méthode toString() est remplacée, vous ne pourrez pas obtenir les résultats souhaités en utilisant cette technique. Ou vous pouvez utiliser :

Copiez le code Le code est le suivant :

Array.isArray (obj); // Il s'agit d'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.

Copier le code Le code est le suivant :

var myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);

var myArray = window.frames[window.frames.length-1].Array;
var arr = new myArray(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 instanceof Array;

18 – Obtenez la valeur maximale ou minimale dans un tableau de nombres

Copier le code Le code est le suivant :

var number = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Math, nombres);
var minInNumbers = Math.min.apply(Math, nombres);
//Note du traducteur : la technique de transmission de paramètres à l'aide de la méthode Function.prototype.apply est utilisée ici

19 – Effacer un tableau

Copier le code Le code est le suivant :

var myArray = [12, 222, 1000];
myArray.length = 0; // myArray sera égal à [].

20 – Ne pas utiliser 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, mais ne le supprime pas réellement du tableau.

N'utilisez pas cette méthode :

Copiez le code Le code est le suivant :

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // renvoie 11
supprime les éléments[3] ; // renvoie true
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] */

et utilisez :

Copier le code Le code est tel suit :

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length // return; 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 un attribut 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.

Copier le code Le code est le suivant :

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 plus grande une par rapport à sa valeur actuelle, la longueur du tableau sera modifiée et de nouveaux éléments non définis seront ajoutés. La longueur d'un tableau n'est pas une propriété en lecture seule.

Copier le code Le code est le suivant :

myArray.length = 10 ; // la nouvelle longueur du tableau est 10
myArray[myArray.length - 1]; // undefined

22 – Utilisez ET/OU logique pour porter des jugements conditionnels

Copier le code Le code est le suivant :

var foo = 10;
foo == 10 && doSomething(); // Équivalent à if (foo == 10) doSomething();
foo == 5 doSomething( ) ; // Équivalent à if (foo != 5) doSomething();

L'ET logique peut également être utilisé pour définir les valeurs par défaut des paramètres de fonction

Copier le code Le code est le suivant :

function doSomething(arg1){
Arg1 = arg1 || 10 ; 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

Copier le code Le code est le suivant :

var squares = [1,2,3,4].map(function (val) {
return val * val;
});
// les carrés seront égaux à [1, 4, 9, 16]

24 – Arrondir un nombre à N décimal lieux

Copier le code Le code est le suivant :

var num =2.443242342;
num = num.toFixed(4); / / num sera égal à 2,4432

25 – Problème en virgule flottante

Copier code Le code est le suivant :

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 peut éviter d'accéder aux propriétés du prototype lors de la traversée des propriétés d'un objet

Copier le code Le code est le suivant :

for (var name in object) {
if (object.hasOwnProperty(name)) {
// faire quelque chose avec name
}
}

27 – Opérateur virgule

Copier le code Le code est le suivant :

var a = 0;
var b = ( a , 99 );
console.log(a); // a sera égal à 1
console.log(b); b est égal à 99

28 – Cacher les variables qui nécessitent un calcul ou une interrogation

Pour les sélecteurs jQuery, il est préférable de mettre en cache ces éléments DOM.

Copier le code Le code est le suivant :

var navright = document.querySelector('#right') ;
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');

29 – Valider les paramètres avant d'appeler isFinite()

Copier le code Le code est tel suit :

isFinite("10"); // false
isFinite("foo"); // false
isFinite("10"); ); // vrai
isFinite(undifined); // false
isFinite(); // false
isFinite(null);

30 – éviter dans les tableaux Indices négatifs

Copier le code Le code est le suivant :

var numérosArray = [1, 2,3,4,5];

var from =numbersArray.indexOf("foo") ; // from est égal à -1
numbersArray.splice(from,2); retourner [5]

Assurez-vous que l'argument lors de l'appel à indexOf n'est pas négatif.

31 – Sérialisation et désérialisation basées sur JSON

Copier le code Le code est le suivant :

var personne = {nom :'Saad', âge : 26, département : {ID : 15, nom : "R&D"} };
var stringFromPerson = JSON.stringify(person );
/* 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 eval() et le constructeur de fonction
Utiliser eval et Function les constructeurs sont 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.

Copier le code Le code est le suivant :

var func1 = new Function(functionCode);
var func2 = eval(functionCode);

33 – Évitez d'utiliser with()
L'utilisation de with() insérera 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 ceci :

Copier le code Le code est le suivant :

var sum = 0;
for (var i in arrayNumbers) {
sum = arrayNumbers[i];
}

Une meilleure façon est :

Copiez le code Le code est le suivant :

var sum = 0 ;
for (var i = 0, len = arrayNumbers.length; i < len; i ) {
sum = arrayNumbers[i];
}

L'avantage supplémentaire est que i et len ​​sont tous les deux La valeur de la variable n'est exécutée qu'une seule fois, ce qui est plus efficace que la méthode suivante :

Copier le code Le code est le suivant :

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.
Ne pas utiliser :

Copier le code Le code est le suivant :

setInterval ('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000)

Et utilisez :

Copier le code Le code est le suivant :

setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);

36 – Utilisez l'instruction switch/case, et au lieu d'une longue liste de if/else
, lorsque vous jugez 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 juger de la plage numérique :

Copier le code Le code est le suivant :

function getCategory(age) {
varcategory = "";
switch (true) {
case isNaN(age):
category = "pas un âge";<​​​       category = "Bébé" ;
pause;
défaut :
catégorie = "Jeune";
pause;
};
retour catégorie;
}
getCategory(5) ; // renverra "Baby"
//Généralement, pour juger la plage numérique, il est plus approprié d'utiliser if/else. switch/case est plus adapté pour juger certaines valeurs


38 – Spécifier l'objet prototype pour l'objet créé

Il est possible d'écrire une fonction pour créer un objet avec des paramètres spécifiés comme prototype :

Copier le code

Le code est le suivant :fonction clone(objet) {fonction OneShotConstructor(){ }; OneShotConstructor.prototype= object; return new OneShotConstructor();}

clone(Array).prototype; // []

39 – une fonction d'échappement HTML

Copier le code

Le code est le suivant :fonction escapeHTML (texte) { var remplacements= {"<": "<", ">": ">","&": "&", """: """}; return text.replace( /[<>&"]/g, function(character) {               return replaces[character] ; en interne, en utilisant try-catch-finally

au moment de l'exécution, à chaque fois la clause catch est exécutée, l'objet d'exception capturé sera affecté à une variable, et dans la structure try-catch-finally, à chaque fois Cette variable sera créée

.
Évitez d'écrire comme ceci :

Copier le code

Le code est le suivant :var object = [ 'foo' , 'bar'], i;

for (i = 0, len = object.length; i try {

// fait quelque chose qui lève une exception } catch (e) { // gérer l'exception }}

et utiliser :

Copier le code


Le code est le suivant :

var object = ['foo', 'bar'], i;
essayez {
for (i = 0, len = object .length; i // fait quelque chose qui lève une exception }>catch (e) { // handle exception}

41 – Définir le délai d'attente pour XMLHttpRequests.

Après qu'une requête XHR ait pris beaucoup de temps (par exemple, en raison de problèmes de réseau), vous devrez peut-être abandonner la requête, vous pourrez alors utiliser setTimeout() avec l'appel XHR.




Copier le code

Le code est le suivant :var xhr = new XMLHttpRequest ();
xhr .onreadystatechange = function () {
if (this.readyState == 4) {

clearTimeout(timeout); // faire quelque chose avec les données de réponse }>var timeout = setTimeout ( function () { xhr.abort(); // rappel d'erreur d'appel}, 60*1000 /* délai d'attente après une minute */ );

xhr.open('GET' , URL, vrai);

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 n'avez aucune activité. 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.

Utiliser un timerID :

Copier le code Le code est le suivant :

var timerID = 0;
function keepAlive() {
var timeout = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout( keepAlive, timeout);
>
function CancelKeepAlive() {
if (timerId) {
CancelTimeout(timerId);
}
}

keepAlive() La méthode 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 codeLe code est le suivant :

var min = Math.min(a,b);
A.push(v);

et utilisez :

Copier le code Le code est le suivant :

var min = a < b a b;
A[A.length] = v;

44 – lors de l'encodage N'oubliez pas d'utiliser des outils de rangement de code . 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ésumé

Je sais qu'il existe de nombreux autres conseils, 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 à le dire dans les commentaires. .