JavaScript Loading Guide

This article adheres to the

You do not understand is you SB, I write the code will be very cool

Concept to introduce some of JS's loading skills.

The following tips, after three, are carefully used in the team project (mainly considering the readability of the problem), otherwise, leader did not discuss you.

[Image upload failed ...] (image-922e98-1513315809572)]

Image.png

Boolean

It's a lot of tricks, and it's very simple.

!!‘foo‘

You can cast to a Boolean type by two inversion. More commonly used.

Number

This is also very simple, string converted to number

+‘45‘+new Date

is automatically converted to the number type. More commonly used.

Iife

This is actually very practical value, not a loaded force. Only other languages do not have such a play, to the students do not know the JS well see that can be great.

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

The practical value is to prevent global pollution. But now with the popularity of ES2015 there is no need to use this, I believe that after five years, this writing will gradually decline.

Five years of self-work, in front of interns to install force is pretty good!

Closure

Closure, JS is a particularly fun place. The immediate execution function above is an application of closures.

Do not know to go back to the book, know that there are many discussions, you can go to see.

Closing the pack is a sign for beginners (not really).

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

It's got a closure, and it looks pretty loaded. But there seems to be no practical value.

So what?

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

The decision category is easily implemented by higher-order functions. (Don't forget to have the Array.isarray () of the decision Array)

Of course, it is obvious that this is only the basis and cannot be more pressing. Take a look at the next section

Event

The incident response front end must have been written rotten, generally how to write a counter it?

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

There seems to be no problem, but! Why is the variable times placed outside, used once on the outside, naming conflict what to do, or in case of changes in the outside how to do.

This time, an event listener code would be a little more awesome.

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

How, is not immediately feel the same. A moment of forcing the grid up!

By creating a closure, the times package is encapsulated inside and then returned to the function. This usage is not very common.

parseint

High-energy warning

Starting from here, the following code is carefully written in the company code!

parseIntThis function is too common, how can be loaded force. The answer is~~

Now press F12 to copy and paste such code in the console:

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

This technique is very loaded, the principle is ~ a bitwise non-operation, will return the value of the inverse code. is a binary operation.

The reason for this is that the number in JavaScript is double, and it is converted to int, two times, or the primitive in the bit operation.

Hex

Hexadecimal operation. is actually a Array.prototype.toString(16) usage.

It must be the color of CSS to see the word in the head.

You can do this randomly.

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

The bottom of the original link is very recommended to read, the following three tips are learned there.

?

Left-shift operation. This operation is particularly in the mouth. Generally have to play C play much, this operation will understand some. General halfway decent of the front-end code farmers may not know very well (speaking of me?).

This is also a binary operation. Move numeric binary left

Explain the above 1<<24 action.

It's actually 1 left 24 bits. 000000000000000000000001move left 24 bits, turn into a1000000000000000000000000

Don't believe me?

Try pasting the following code on the console

parseInt(‘1000000000000000000000000‘, 2) === (1 << 24)

There's actually a more understandable way to explain

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

Because it is a binary operation, the speed is very fast.

BTW

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

Translated into normal language, that's it.

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

Others

The others, like some await, decorators or something. I will not introduce the things that I use to typescript basic knowledge.

I wish you all the more fun

Welcome to join the Learning Exchange Group 569772982, we learn to communicate together.

JavaScript Loading Guide