Explication graphique et textuelle détaillée du superbe guide de JavaScript

Cet article adhère au concept de

Si vous ne comprenez pas c'est vous sb, le code que j'écris doit être génial

Quelques compétences js prétentieuses.

Pour les techniques suivantes, les trois dernières, merci de les utiliser avec prudence dans les projets d'équipe (compte tenu principalement des problèmes de lisibilité), sinon, le leader vous le fera sans aucune négociation.

Booléen

Cette technique est beaucoup utilisée et est très simple

!!'foo'

En annulant deux, vous pouvez forcer la conversion. est de type booléen. Plus couramment utilisé.

Nombre

Ceci est également très simple. Convertir une chaîne en nombre

+'45'
+new Date

sera automatiquement converti en type de nombre. Plus couramment utilisé.

IIFE

C'est en fait très pratique et n'est pas considéré comme prétentieux. C'est juste qu'il n'y a rien de tel dans d'autres langages. C'est plutôt génial pour les étudiants qui ne connaissent pas grand chose en js.

(function(arg) {
    // do something
})(arg)

La valeur pratique réside dans la prévention de la pollution mondiale. Mais maintenant, avec la popularité de l'ES2015, il n'est plus nécessaire de l'utiliser. Je pense que dans cinq ans, cette façon d'écrire diminuera progressivement.

Pour bosser depuis cinq ans, c'est plutôt bien de s'exhiber devant les stagiaires~

Closure

Closure Bon, js c'est particulièrement sympa d'un lieu. La fonction d'exécution immédiate ci-dessus est une application de clôture.

Si vous ne comprenez pas, revenez en arrière et lisez le livre. Il y a aussi de nombreuses discussions sur Zhihu, vous pouvez donc le consulter.

L'utilisation de fermetures est simplement un signe de maîtrise pour les débutants (ce n'est pas le cas).

var counter = function() {
    var count = 0
    return function() {
        return count++
    }
}

Les fermetures sont utilisées ci-dessus, ce qui a l'air plutôt cool. Mais cela semble n’avoir aucune valeur pratique.

Et ça ?

var isType = function(type) {
    return function(obj) {
        return toString.call(obj) == '[Object ' + type + ']';
    }
}

Il est facile de déterminer la catégorie grâce à des fonctions d'ordre élevé. (N'oubliez pas Array.isArray() pour déterminer Array)

Bien sûr, il est évident que ce ne sont que les bases et ne peuvent pas être plus prétentieux. Regardons la section suivante

Événement

Le front-end de réponse à l'événement doit être mal écrit De manière générale, comment écrire un compteur ?

var times = 0
var foo = document.querySelector('.foo')
foo.addEventListener('click', function() {
    times++
    console.log(times)
}, false)

Il ne semble y avoir aucun problème, mais ! Pourquoi la variable times est-elle placée à l'extérieur ? Elle est utilisée une seule fois et placée à l'extérieur. Que dois-je faire en cas de conflit de nom, ou que dois-je faire si elle est modifiée à l'extérieur ?

À l'heure actuelle, un tel code de surveillance des événements est plus puissant

foo.addEventListener('click', (function() {
    var times = 0
    return function() {
        times++
        console.log(times)
    }
})(), false)

Et si, vous sentez-vous immédiatement différent ? Il est instantanément devenu plus puissant !

crée une fermeture, y encapsule times, puis renvoie la fonction. Cet usage est moins courant.

parseInt

Avertissement de haute énergie

À partir de maintenant, le code suivant doit être soigneusement écrit dans le code de l'entreprise !

parseIntCette fonction est trop ordinaire, comment pouvez-vous prétendre être génial. La réponse est ~~

Maintenant appuyez sur F12 et copiez et collez ce code dans la console :

~~3.14159
// => 3
~~5.678
// => 5

Cette technique est très cool Le principe est que ~ est. un code appelé opérations Bitwise NOT renvoie le complément d'une valeur. C'est une opération binaire.

La raison est que les nombres en JavaScript sont tous de types doubles et qu'ils doivent être convertis en int lors des opérations sur les bits. S'ils sont utilisés deux fois~, ce sont toujours les nombres d'origine.

Hex

Opérations hexagonales. En fait, c'est une utilisation de Array.prototype.toString(16)

Quand je vois ce mot, ce qui me vient à l'esprit doit être la couleur du CSS.

Pour obtenir le caractère aléatoire, vous pouvez le faire

(~~(Math.random()*(1<<24))).toString(16)

Il est fortement recommandé de lire le lien du texte original ci-dessous. Les trois dernières techniques y ont toutes été apprises.

«

Opération de décalage à gauche. Cette opération est particulièrement délicate. De manière générale, si vous jouez beaucoup au C, vous en connaîtrez un peu plus sur cette opération. De manière générale, les codeurs front-end devenus moines peuvent ne pas très bien le comprendre (c'est moi ☹).

C'est aussi une opération binaire. Décalez le binaire numérique vers la gauche

pour expliquer le fonctionnement de 1<<24 ci-dessus.

est en fait 1 décalé à gauche de 24 bits. 000000000000000000000001 s'est décalé de 24 bits vers la gauche et est devenu 1000000000000000000000000

Vous n'y croyez pas ?

Essayez de coller le code suivant dans la console

parseInt(&#39;1000000000000000000000000&#39;, 2) === (1 << 24)

En fait, il existe une manière plus compréhensible d'expliquer

Math.pow(2,24) === (1 << 24)

Parce que c'est une opération binaire , c'est plus rapide C'est très rapide.

BTW

[].forEach.call($$("*"),function(a){
    a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

La traduction en langage normal est comme ça

Array.prototype.forEach.call(document.querySelectorAll('*'), 
dom => dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`)

Autres

D'autres, comme certains attendent, Décorateurs et ainsi de suite . Je ne présenterai pas des choses que vous pouvez essentiellement comprendre en utilisant TypeScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!