JavaScript est un langage de script appartenant au réseau!
JavaScript est utilisé par des millions de pages Web pour améliorer la conception, vérifier les formulaires, détecter les navigateurs, créer des cookies, etc.
JavaScript est le langage de script le plus populaire sur Internet.
JavaScript est facile à utiliser! Vous allez l'adorer!
JavaScript est un langage de script interprété avec syntaxe flexible, permettant à différentes personnes d'écrire différentes fonctions de différentes manières. Comment organiser le code JavaScript pour que les autres puissent voir en un coup d'œil que vous n'êtes pas simple? Avez-vous avec impatience quelqu'un d'autre soupirant après avoir lu votre code: "Il s'avère que vous pouvez écrire de cette façon"?
N façons d'écrire des fonctions anonymes
La fonction anonyme de JS est une fonction auto-exécutée avec le nom de la fonction non déclaré, et le format est le suivant:
(fonction(){})();En fait, nous mettons souvent ";" Devant le projet:
;fonction(){}();Parce que la syntaxe de JS peut omettre des demi-colons, mais ce mécanisme peut également conduire à des erreurs inattendues. Afin d'éviter les erreurs de syntaxe causées par la fusion et la compression du code dans un fichier après son lancement, ajoutant ";" peut éviter les erreurs inconnues.
Mais parfois, nous voyons que les bibliothèques ou les plug-ins d'autres personnes écrivent des fonctions anonymes comme ceci:
+ function () {} ();"+" est un opérateur ici, et l'opérateur a une priorité extrêmement élevée, donc la partie de la déclaration de fonction à droite avec les supports (en fait la façon d'écrire l'exécution de la fonction) est exécutée directement. En fait, il peut non seulement être le signe "+" devant, mais des opérateurs tels que "-", "!", "~" Et "++" peuvent être utilisés. Ici, nous ne sommes qu'une introduction à l'extension. Quelle méthode d'écriture spécifique est utilisée dépend des normes unifiées de l'équipe.
Abandon math.ceil () et math.floor arrondi
Peut-être que j'ai vu ces deux symboles ~~ et | 0 dans d'autres codes, et regardez directement les résultats en cours:
>> var a1 = 1.23 >> ~~ a11 >> var a2 = 2,345 >> a2 | 02 >> var a3 = -3.45 >> ~~ a3-3 >> var a4 = -4.5 >> a4 | 0-4
Notez que cette méthode d'écriture n'est pas originale, mais est simplement citée pour analyser et expliquer cette méthode d'écriture alternative. Une explication simple est que ~ est un opérateur inverse bitwise, qui peut convertir les nombres de points flottants en entiers en jetant tous les bits après le point décimal. Les entiers positifs peuvent être convertis en valeurs hexadécimales non signées. Puis inverse (~~) négatif et négatif à nouveau pour devenir positif, et obtenir l'entier d'origine. C’est juste qu’il est si volontaire et sans restriction. Pensez-vous que c'est une optimisation?
Remarque: Si vous devez effectuer des opérations d'arrondi strictes, vous devez utiliser cette méthode avec prudence, vous devez toujours utiliser la fonction mathématique.
Si et sinon ne sont pas les seuls
L'utilisation de conditions IF-Else est une logique très claire, elle ne semble pas très concise lorsque le traitement des données n'est pas important:
if (a === 1) {// il est fortement recommandé d'utiliser le symbole strictement égal "===" ici, et la conversion de type ne sera pas effectuée a = 2} else if (a === 3) {a = 4} else {a = 5}Jetez un œil à ce qui suit à utiliser || et && pour faire perdre du poids au code:
((a === 1) && (true, a = 2)) || ((a === 3) && (true, a = 4)) || (a = 5)
Cela se fera en une seule ligne et vous perdrez du poids avec succès. || et &&, le principe simple n'est pas le parler. Il n'est pas facile de comprendre lors de l'utilisation de l'opérateur de virgule. Vous pouvez continuer à le changer en opérateur ternaire:
(a === 1)? a = 2 :( (a === 3)? (a = 4): (a = 5))
Cette façon d'écrire semble être suffisamment simplifiée, mais il sera un peu difficile pour les autres de voir votre code.
Remplacez la structure DOM de couture à cordes ennuyeuse par le tostring
Si nous voulons générer dynamiquement une structure DOM, nous l'implémentons généralement comme ceci:
var template = "<div>" + "<h2> {title} </h2>" + "<div class = 'contenu' yattr = ''> {contenu} </div>" + "</div>"Si divers attributs et paramètres sont ajoutés, il est facile de signaler les erreurs lorsque les grosses et petites citations sont confuses. Cependant, ES6 fournit une chaîne de modèle pour nous aider à résoudre ce problème, vous pouvez l'écrire comme ceci:
var template = <div> <h2> {title} </h2> <div class = 'contenu' yattr = ''> {contenu} </div> </div>Mais le problème est que ES6 n'est pas encore officiellement arrivé ... N'ayez pas peur, fonction.
var rcomment = //// * ([/ s / s] *?) / * ///; // Multiply String Fonction MS (fn) {return fn.toString (). Match (rComment) [1]}; ms (function () {/ * <div> <h2> {title} </h2> <div class = 'contenu' yattr = ''> {contenu} </div> </div> * /})La sortie ici est la même que la sortie de chaîne précédente. Les programmeurs frontaux n'ont qu'à prêter attention à leur propre structure DOM.
Ajouter une prise en charge du module AMD, code invite B
Déclarez la spécification du module AMD (Asynchrone Module Definition) au code que vous avez écrit, afin que d'autres puissent charger votre module directement via la spécification AMD. Si d'autres ne chargent pas votre module via la spécification, vous pouvez également renvoyer élégamment un objet global ordinaire. Jetons un coup d'œil à la méthode d'écriture de jQueryui:
(Fonction (Factory) {if (typeof define === "Fonction" && define.amd) {// AMD Mode. Et s'appuyez sur le plug-in "jQuery" Define (["jQuery"], Factory);} else {// Browser Global Factory (jQuery);}} (fonction);Changez-le en structure du module AMD pour rendre votre code plus adapté aux dépendances de script de chargement côté navigateur. Écrivez du code dans ce format pour vous assurer que les autres savent que vous êtes un développeur professionnel dès que vous regardez le code.
La meilleure méthode d'héritage
JavaScript a plus de dix méthodes d'héritage, grandes et petites. Les avantages et les inconvénients de chaque méthode d'écriture sont différents, et chaque méthode n'est pas répertoriée une par une. Prenez une méthode d'héritage commune à titre d'exemple, l'héritage prototype:
fonction parent () {} function child () {} child.prototype = parent.prototypechild.prototype.constructor = child;Cette méthode pointe en fait le pointeur enregistré dans child.prototype et parent.prototype au même objet, donc si certaines propriétés sont étendues dans le prototype d'objet enfant afin que le prototype d'objet parent continue de hériter plus tard, le prototype d'objet parent sera également réécrit. Donc, pour résoudre ce problème, essayez d'emprunter une méthode d'écriture de constructeur temporaire:
fonction vide () {} vide.prototype = parent.prototype; child.prototype = new vide (); child.prototype.constructor = child;De cette façon, les propres propriétés et méthodes de prototype de l'objet parent sont protégées. "Optimal" est un peu exagéré, mais en comparaison. Je crois que tout le monde a son propre style d'écriture, et il y a aussi les avantages et les inconvénients de l'emprunt des appels et de s'appliquer pour mettre en œuvre l'héritage des attributs. La longueur est limitée et je ne les présenterai pas une par une.
Résumer
Toutes les méthodes d'écriture alternatives de JavaScript mentionnées ci-dessus sont le sucre de syntaxe pour une efficacité facile à comprendre ou améliorée. Ces méthodes sont préférables, comme la pratique d'omettre IF-Else comme mentionné ci-dessus. Certains sont conçus pour améliorer la compatibilité et les performances de notre code, tels que les MAD et les méthodes d'héritage. ... Je suis une recrue, et il y a certainement un contenu incomplet et inexpliqué dans le contenu ci-dessus.
Le contenu ci-dessus est une introduction connexe aux méthodes d'écriture alternatives pour JavaScript, j'espère qu'elle sera utile à tout le monde!