10 conseils pratiques pour les compétences en programmation JavaScript_javascript

Dans cet article, je vais lister 10 conseils pratiques Javascript, principalement destinés aux novices Javascript et aux développeurs intermédiaires. Espérons que chaque lecteur en tirera au moins un conseil utile.

1.Conversion de variables

Cela semble simple, mais d'après ce que j'ai vu, utiliser des constructeurs comme Array() ou Number() pour convertir des variables est une pratique courante. Utilisez toujours des types de données primitifs (parfois appelés littéraux) pour convertir les variables, ce qui n'a aucun impact supplémentaire mais est plus efficace.

Copier le code Le code est le suivant :

var myVar = "3.14159",
str = "" myVar , // en string
int = ~~myVar, // en entier
float = 1*myVar, // en float
bool = !!myVar, /* en booléen - n'importe quelle chaîne avec length
et n'importe quel nombre sauf 0 sont vrais */
array = [myVar] // to array

Les constructeurs doivent être utilisés pour convertir les dates (new Date(myVar)) et les expressions régulières (new RegExp(myVar)), et le format /pattern/flags doit être utilisé lors de la création d'expressions régulières.

2. Convertissez le décimal en hexadécimal ou octal, ou vice versa

Pouvez-vous écrire une fonction distincte pour convertir l'hexadécimal (ou l'octal) ? Arrêtez ça maintenant ! Des fonctions prêtes à l'emploi plus simples sont disponibles :

Copier le code Le code est le suivant :

(int ).toString(16); // convertit int en hexadécimal, par exemple 12 => "C"
(int).toString(8); ; "14"
parseInt(string,16) // convertit hex en int, par exemple "FF" => 255
parseInt(string,8) // convertit octal en int, par exemple. =>16

3. Jouez avec les chiffres

En plus de ce qui a été introduit dans la section précédente, voici d'autres conseils pour traiter les nombres

Copiez le code Le code est la suivante :

0xFF ; // Déclaration hexadécimale, renvoie 255
020 ; // Déclaration octale, renvoie 16
1e3 ; // Exponentielle, identique à 1 * Math.pow (10,3 ), renvoie 1000
(1000).toExponential(); // Contrairement au précédent, renvoie 1e3
(3.1415).toFixed(3); // Arrondi le nombre, renvoie "3.142"

4.Détection de version Javascript

Savez-vous quelle version de Javascript est prise en charge par votre navigateur ? Si vous ne le savez pas, allez sur Wikipédia et consultez le tableau des versions Javascript. Pour une raison quelconque, certaines fonctionnalités de Javascript 1.7 ne sont pas largement prises en charge. Cependant, la plupart des navigateurs prennent en charge les fonctionnalités des versions 1.8 et 1.8.1. (Remarque : tous les navigateurs IE (IE8 ou versions antérieures) ne prennent en charge que la version Javascript 1.5) Voici un script qui peut non seulement détecter la version JavaScript en détectant les fonctionnalités, mais également vérifier les fonctionnalités prises en charge par une version Javascript spécifique.

Copier le code Le code est le suivant :

var JS_ver = [];
(Numéro. prototype.toFixed)?JS_ver.push("1.5"):false;
([].indexOf && [].forEach)?JS_ver.push("1.6"):false;
(( function() {try {[a,b] = [0,1];return true;}catch(ex) {return false;}})())?JS_ver.push("1.7"):false;
([ ].reduce && [].reduceRight && JSON)?JS_ver.push("1.8"):false;
("".trimLeft)?JS_ver.push("1.8.1"):false;
JS_ver .supports = function()
{
　if (arguments[0])
　 return (!!~this.join().indexOf(arguments[0] ",") "," );
else
return (this[this.length-1]);
}
alert("Dernière version Javascript prise en charge : " JS_ver.supports());
alert(" Support de la version 1.7 : " JS_ver.supports("1.7"));

5. Utilisez window.name pour un traitement de session simple

C'est quelque chose que j'aime vraiment. Vous pouvez spécifier une chaîne comme valeur de la propriété window.name jusqu'à ce que vous fermiez l'onglet ou la fenêtre. Bien que je n'aie fourni aucun script, je vous recommande fortement de profiter de cette méthode. Par exemple, lors de la création d’un site Web ou d’une application, il est très utile de basculer entre le mode débogage et le mode test.

6. Déterminer si l'attribut existe

Ce problème comprend deux aspects, non seulement vérifier l'existence de l'attribut, mais également obtenir le type de l'attribut. Mais on néglige toujours ces petites choses :

Copier le code Le code est le suivant :

// MAUVAIS : Cela provoquera une erreur dans le code lorsque foo n'est pas défini
if (foo) {
　doSomething();
}
// BON : Ce n'est pas le cas Cependant, même lorsque
// foo est défini sur NULL ou false, la condition est validée comme true
if (typeof foo != "undefined") {
　doSomething();
}
// MIEUX : Cela ne provoque aucune erreur et en plus
// les valeurs NULL ou false ne seront pas validées comme true
if (window.foo) {
　doSomething () ;
}

Cependant, dans certains cas, lorsque nous avons une structure plus profonde et avons besoin d'une inspection plus appropriée, nous pouvons faire ceci :

Copiez le code Le code est le suivant :

// LAID : nous devons prouver l'existence de chaque
// objet avant de pouvoir être sûr que la propriété existe réellement
if ( window.oFoo && oFoo.oBar && oFoo.oBar.baz) {
　doSomething();
}

7.

Lorsqu'une fonction a à la fois des paramètres obligatoires et facultatifs, nous pouvons faire ceci :

Copier le code Le code est le suivant :

function doSomething(arg0, arg1, arg2, arg3, arg4) {
　...
}
doSomething('', 'foo', 5, [], false);

Et passer un objet est toujours plus pratique que passer un tas de paramètres :

Copier le code Le code est le suivant :

function doSomething() {
　// Quitte la fonction si rien n'est passé
　if (!arguments[0]) {
　return false;
　}
var oArgs = arguments[0]
arg0 = oArgs.arg0 || "",
arg1 = oArgs.arg1 "",
arg2 = oArgs.arg2 || 0,
arg3 = oArgs.arg3 || [],
arg4 = oArgs.arg4 || false;
>
doSomething({
arg1 : "foo",
arg2 : 5,
arg4 : false
});

Ceci est juste un exemple très simple de passage d'un objet en paramètre. Par exemple, nous pouvons également déclarer un objet avec le nom de variable as. Clé et la valeur par défaut comme Valeur.

8. Utilisez document.createDocumentFragment()

Vous devrez peut-être ajouter plusieurs éléments au document de manière dynamique. Cependant, si vous les insérez directement dans le document, celui-ci devra être remanié à chaque fois. Au lieu de cela, vous devez utiliser des fragments de document et ne les ajouter qu'une fois une fois terminé :

<.>Copier le code Le code est le suivant :

function createList() {

　var aLI = ["premier élément", "deuxième élément", "troisième élément ",
"quatrième élément", "cinquième élément"];
// Crée le fragment
var oFrag = document.createDocumentFragment();
while (aLI.length) {
var oLI = document. createElement("li");
// Supprime le premier élément du tableau et l'ajoute
// en tant que nœud de texte à l'élément LI
oLI.appendChild(document.createTextNode(aLI. shift()) );
　oFrag.appendChild(oLI);
　}
　document.getElementById('myUL').appendChild(oFrag);
>

9. Passez une fonction à la méthode replace()

Parfois, vous souhaitez remplacer une certaine partie d'une chaîne par une autre valeur. La meilleure façon est de passer une fonction distincte à String.replace(). Voici un exemple simple :

Copier le code Le code est le suivant :

var sFlop = "Flop : [Ah] [Ks] [7c]";
var aValues ​​​​= {"A": "As", K "King", 7: "Seven"};
var aSuits = {"h ":"Cœurs","s":"Pique",
"d":"Diamonds","c":"Clubs"};
sFlop = sFlop.replace(/ [w ]/gi, function(match) {
Match = match.replace(match[2], aSuits[match[2]]);
match = match.replace(match[1], aValues[ match[1]] " of ");
　return match;
});
// la chaîne sFlop contient désormais :
// "Flop : [As de cœur] [Roi de pique] [Sept de trèfle]"

10. Utilisation d'étiquettes en boucles

Parfois, il y a des boucles imbriquées dans des boucles. Vous souhaiterez peut-être sortir dans la boucle, vous pouvez donc utiliser des balises :

Copier le code Le code est le suivant :

outerloop:
for (var iI=0;iI<5;iI ) {
　if (somethingIsTrue()) {
// Rompt l'itération de la boucle externe
break externalloop;
}
innerloop:
for (var iA=0;iA<5;iA ) {
if (somethingElseIsTrue()) {
// Rompt l'itération de la boucle interne
　break innerloop;
　}
　}
}