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!
parseInt
This 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. 000000000000000000000001
move 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