Detaillierte Grafik- und Texterklärung des fantastischen JavaScript-Leitfadens

Dieser Artikel folgt dem Konzept von

Wenn Sie nicht verstehen, dass Sie es sind, muss der Code, den ich schreibe, großartig sein

Einige anspruchsvolle Fähigkeiten.

Bei den folgenden Techniken, den letzten drei, wenden Sie diese bitte mit Vorsicht in Teamprojekten an (hauptsächlich unter Berücksichtigung von Lesbarkeitsproblemen), andernfalls wird der Leiter Sie ohne Verhandlungen behandeln.

Boolean

Diese Technik wird häufig verwendet und ist sehr einfach

!!'foo'

Durch Negation von zwei können Sie die Konvertierung erzwingen ist vom booleschen Typ. Häufiger verwendet.

Zahl

Dies ist auch sehr einfach. String in Zahl umwandeln

+'45'
+new Date

wird automatisch in den Zahlentyp konvertiert. Häufiger verwendet.

IIFE

Das ist tatsächlich sehr praktisch und wird nicht als anmaßend angesehen. Es ist nur so, dass es so etwas in anderen Sprachen nicht gibt. Es ist ziemlich großartig für Studenten, die nicht viel über JS wissen.

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

Der praktische Wert liegt in der Vermeidung globaler Umweltverschmutzung. Aber jetzt, da ES2015 so beliebt ist, besteht meiner Meinung nach keine Notwendigkeit, diese Art des Schreibens in fünf Jahren zu verwenden.

Da ich seit fünf Jahren arbeite, ist es ziemlich gut, vor Praktikanten anzugeben~

Abschluss

Abschluss Nun, js macht besonders viel Spaß eines Ortes. Die obige Funktion zur sofortigen Ausführung ist eine Abschlussanwendung.

Wenn Sie es nicht verstehen, gehen Sie zurück und lesen Sie das Buch. Es gibt auch viele Diskussionen über Zhihu, also können Sie es sich ansehen.

Die Verwendung von Verschlüssen ist für Anfänger einfach ein Zeichen eines Meisters (ist es nicht).

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

Oben werden Verschlüsse verwendet, was ziemlich cool aussieht. Aber es scheint keinen praktischen Wert zu haben.

Was ist damit?

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

Beurteilen Sie Kategorien einfach über übergeordnete Funktionen. (Vergessen Sie nicht Array.isArray(), um Array zu bestimmen)

Natürlich ist es offensichtlich, dass dies nur die Grundlagen sind und anspruchsvoller nicht sein können. Schauen wir uns den nächsten Abschnitt an

Ereignis

Das Event-Response-Frontend muss im Allgemeinen schlecht geschrieben sein. Wie schreibt man einen Zähler?

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

Es scheint kein Problem zu geben, aber! Warum wird die Variable times außerhalb platziert? Sie wird einmal verwendet und dann außerhalb platziert.

Zu diesem Zeitpunkt ist ein solcher Ereignisüberwachungscode leistungsfähiger

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

Wie wäre es, fühlen Sie sich sofort anders? Er wurde sofort mächtiger!

erstellt einen Abschluss, kapselt times darin ein und gibt dann die Funktion zurück. Diese Verwendung ist weniger verbreitet.

parseInt

Hohe Energiewarnung

Von hier an sollte der folgende Code sorgfältig in den Unternehmenscode geschrieben werden!

parseIntDiese Funktion ist zu gewöhnlich, wie können Sie so tun, als wären Sie großartig? Die Antwort ist ~~

Drücken Sie nun F12 und kopieren Sie diesen Code und fügen Sie ihn in die Konsole ein:

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

Diese Technik ist sehr cool. Das Prinzip ist, dass ~ ist Ein Code namens „Bitweise NICHT-Operationen“ gibt das Komplement eines Werts zurück. Es handelt sich um eine binäre Operation.

Der Grund dafür ist, dass Zahlen in JavaScript alle vom Typ Double sind und bei Bitoperationen in int umgewandelt werden müssen. Wenn sie zweimal verwendet werden, handelt es sich immer noch um die ursprünglichen Zahlen.

Hex

Hex-Operationen. Tatsächlich ist es eine Verwendung von Array.prototype.toString(16)

Wenn ich dieses Wort sehe, muss ich an die Farbe von CSS denken.

Um Zufälligkeit zu erreichen, können Sie dies tun

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

Es wird dringend empfohlen, den Originaltext-Link unten zu lesen. Die letzten drei Techniken wurden alle dort gelernt.

«

Linksschichtbetrieb. Dieser Vorgang ist besonders knifflig. Wenn Sie häufig C spielen, wissen Sie im Allgemeinen ein wenig über diese Operation. Im Allgemeinen verstehen Front-End-Programmierer, die auf halbem Weg zum Mönch sind, es möglicherweise nicht sehr gut (das bin ich ☹).

Dies ist auch eine binäre Operation. Verschieben Sie die numerische Binärzahl nach links

, um die Funktionsweise von 1<<24 oben zu erklären.

ist eigentlich 1 um 24 Bit nach links verschoben. 000000000000000000000001 wurde um 24 Bit nach links verschoben und wurde zu 1000000000000000000000000

Glauben Sie es nicht?

Versuchen Sie, den folgenden Code in die Konsole einzufügen

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

Tatsächlich gibt es eine verständlichere Möglichkeit, dies zu erklären

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

Weil es sich um eine binäre Operation handelt , es ist schneller. Es ist sehr schnell.

Übrigens

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

Die Übersetzung in die normale Sprache ist so

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

Andere

Andere, wie einige warten, Dekorateure und so weiter . Ich werde keine Dinge vorstellen, die Sie mit TypeScript grundsätzlich verstehen können.

Das obige ist der detaillierte Inhalt vonDetaillierte Grafik- und Texterklärung des fantastischen JavaScript-Leitfadens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!