Explication détaillée des méthodes d'écriture alternatives des compétences JavaScript_javascript

JavaScript est un langage de script pour Internet !

JavaScript est utilisé par des millions de pages Web pour améliorer la conception, valider 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 adorer !

JavaScript est un langage de script interprété avec une syntaxe flexible, permettant à différentes personnes d'écrire la même fonction de différentes manières. Comment organiser le code JavaScript pour que les autres puissent voir d'un coup d'œil que vous n'êtes pas simple ? Avez-vous vraiment hâte que les autres s'exclament "Pour que vous puissiez toujours l'écrire comme ça" après avoir lu votre code ?

N façons d'écrire des fonctions anonymes

La fonction anonyme de JS est une fonction auto-exécutable sans déclarer de nom de fonction. Le format est le suivant :

(function(){})();

En fait, dans les projets on ajoute souvent ";" devant :

;function(){}();

En raison de la syntaxe de JS, le point-virgule peut être omis, mais ce mécanisme peut également provoquer des erreurs inattendues. Afin d'éviter les erreurs de syntaxe causées par la fusion et la compression du code dans un seul fichier après sa mise en ligne, l'ajout de « ; » peut éviter des erreurs inconnues.

Mais parfois, nous voyons des fonctions anonymes écrites comme ceci dans les bibliothèques ou plug-ins d'autres personnes :

+function(){}();

"+" est l'opérateur ici, et l'opérateur a une priorité extrêmement élevée, donc la déclaration de fonction à droite plus les parenthèses (en fait la façon dont la fonction est écrite) est exécutée directement. En effet, non seulement il peut être précédé du signe « + », mais des opérateurs tels que « - », « ! », « ~ » et « ++ » peuvent également être utilisés. Ceci n'est qu'une introduction approfondie. La méthode d'écriture spécifique dépend des normes unifiées de l'équipe.

Abandonner les arrondis Math.ceil() et Math.floor

Peut-être avez-vous vu ces deux symboles ~~ et |0 dans d'autres codes, il suffit de regarder les résultats en cours :

>> var a1 = 1.23
>> ~~a1
1
>> var a2 = 2.345
>> a2|0
2
>> var a3 = -3.45
>> ~~a3
-3
>> var a4 = -4.5
>> a4|0
-4

Veuillez noter que cette façon d'écrire n'est pas originale, elle est juste citée pour analyser et expliquer cette façon alternative d'écrire. En bref, ~ est un opérateur de négation au niveau du bit, qui peut convertir un nombre à virgule flottante en un entier en supprimant tous les chiffres après la virgule décimale. Les entiers positifs peuvent être convertis en valeurs hexadécimales non signées. Puis annulez-le à nouveau (~~) pour obtenir l’entier d’origine. Si vous êtes si volontaire et n'aimez pas ajuster la méthode, pensez-vous qu'il s'agit d'une optimisation ?

Remarque : si vous devez effectuer des opérations d'arrondi strictes, vous devez utiliser cette méthode avec prudence, vous devez alors toujours utiliser la fonction Math.

if et else ne sont pas les seuls

Le jugement conditionnel utilisant if-else est une logique très claire, mais il n'a pas l'air très concis lorsque la quantité de données traitées n'est pas importante :

if (a===1) { //此处强烈建议用严格等于符号“===”，不会进行类型转换
a=2
} else if (a===3) {
a=4
} else {
a=5
}

Regardez comment utiliser || et && pour alléger le code :

((a===1)&&(true,a=2))||((a===3)&&(true,a=4))||(a=5)

Faites-le en une seule étape et perdez du poids avec succès. || et &&, il va sans dire que le principe est très simple. L'opérateur virgule utilisé n'est pas facile à comprendre. Vous pouvez continuer à le remplacer par l'opérateur ternaire :

.

(a===1 )? a=2:( (a===3) ? (a=4) : (a=5) )

Cette façon d'écrire semble avoir une structure simplifiée, mais il sera un peu difficile pour les autres de lire votre code.

Utilisez toString pour remplacer la structure DOM ennuyeuse d'épissage de chaînes

Si vous souhaitez générer dynamiquement une structure DOM, nous l'implémentons généralement comme ceci :

var template = "<div>" 
+ "<h2>{title}</h2>"
+ "<div class='content' yAttr=''>{content}</div>"
+ "</div>"

Si vous ajoutez divers attributs et paramètres, les guillemets grands et petits seront confondus et il est facile de signaler des erreurs. Cependant, ES6 fournit Template String pour nous aider à résoudre ce problème. Vous pouvez l'écrire comme ceci :

.

var template = <div> 
<h2>{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div>

Mais le problème c'est que ES6 n'est pas encore officiellement arrivé... N'ayez pas peur, function.toString peut résoudre l'embarras quand on est dans le noir :

var rComment = /\/\*([\s\S]*?)\*\//;
// multiply string 
function ms(fn){ 
return fn.toString().match(rComment)[1]
}; 
ms(function(){/* 
<div> 
<h2>{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div> */
})

La sortie ici est la même que la sortie de chaîne précédente. Les programmeurs front-end n'ont qu'à prêter attention à leur propre structure DOM.

Ajouter la prise en charge du module AMD, boîte de code d'invite B

Déclarez la spécification du module AMD (Asynchronous Module Definition) pour le code que vous écrivez, 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 un global régulier. objet avec grâce. Jetons un coup d'œil à la façon dont jQueryUI est écrit :

(function( factory ) { 
if ( typeof define === "function" && define.amd ) { 
// AMD模式。且依赖"jQuery"这个插件 
define( [ "jquery" ], factory ); } 
else { 
// 浏览器全局模式 
factory( jQuery ); 
} 
}(function( $ ) { 
// 这里放模块代码 
return $.widget; 
}));

Modifiez la structure du module AMD pour rendre votre code plus adapté au chargement des dépendances de script côté navigateur. Écrivez le code dans ce format pour garantir que les autres sauront que vous êtes un développeur professionnel lorsqu'ils examineront le code.

Hériter la méthode optimale

La flexibilité de JavaScript comporte plus de dix méthodes d'héritage, grandes et petites. Chaque méthode d'écriture présente des avantages et des inconvénients différents. Chaque méthode ne sera pas répertoriée une par une. Prenons comme exemple une méthode d'héritage prototypique :

.

function Parent() {}
function Child() {}
Child.prototype = Parent.prototype
Child.prototype.constructor = Child ；

这种这种方法实际上是将Child.prototype和Parent.prototype中保存的指针指向了同一个对象，所以子对象原型中扩展一些属性以便之后继续继承的话，父对象的原型也会被改写。所以为了解决这个问题，尝试借用一个临时构造器的写法：

function Empty(){}
Empty.prototype = Parent.prototype;
Child.prototype = new Empty();
Child.prototype.constructor = Child;

这样父对象的自身属性和原型方法得到保护。“最优”有点夸大，但是是相比较而言的。相信每个人都有自己的写法，还有借用call和apply实现属性继承的优缺点，篇幅有限不一一介绍。

总结

上述所有的JavaScript的另类写法，一些是为了程序易懂或者效率提高的语法糖，这样的做法是比较可取的，比如前面所说的省略if-else的做法。一些是为了提升我们代码的兼容性和性能，比如AMD和继承的方式。……本人菜鸟一枚，上述内容肯定还有不全和没解释透彻的地方以后再补充。

以上内容是针对JavaScript的另类写法的相关介绍，希望对大家有所帮助！