In fact, learning Daniel Source code is a very good progress, can give you a new vision.
See this Daniel's IE version test, can only be Marvel and marvel. There are so many things that are contained in just a short code.
So here is the decision to interpret Daniel's source code, so that it is ready to come close to Daniel and is still working on it with people learn more knowledge.
Let's take a look at a world's shortest ie detection code:
Copy Code code as follows:
is not very familiar with, but has the bug, is cannot detect IE9, why? That's because it's foreign Daniel. Before the IE9 out of the use of IE array conversion characteristics to complete. IE9 has been repaired in the IE9, so it is invalidated in the But as I at that time, or sigh + sigh, Daniel on the details of the study and so deep (at that time I also indulge in how to use the shortest code to achieve a function and method, constantly modify + modify, can or ....) This is the gap, the gap.
This is the world's shortest IE detection code I do not read and analysis, after all, for now there are bugs, can not be backward compatible, my focus is the following IE perfect detection, theoretically backward compatible, such as out of Ie10,ok, with it, no problem, once again to raise the gap.
Let's take a look at the source code (I'll explain the difficult points in Daniel's mind and code later)
Copy Code code as follows:
// ----------------------------------------------------------
A short snippet for detecting versions of IE in JavaScript
Without resorting to user-agent sniffing
// ----------------------------------------------------------
If you are not in IE (or IE version is less than 5) then:
ie = = undefined
If you are ' re in IE (>=5) then can determine which version:
ie = = 7; IE7
Thus, to detect IE:
if (IE) {}
and to detect the version:
ie = = 6//IE6
IE > 7//IE8, IE9 ...
IE < 9//anything less than IE9
// ----------------------------------------------------------
Update:now using Live nodelist idea from @jdalton
var ie = (function () {
var undef,
v = 3,
div = document.createelement (' div '),
all = Div.getelementsbytagname (' i ');
while (
div.innerhtml = ' <!--[if GT IE ' + (++v) + ']><i></i><! [endif]--> ',
ALL[0]
);
Return v > 4? V:undef;
}());
A very good code, but can be perfect to detect the various versions of IE, can also be detected by the scope, in the source code comments in the instructor how you use.
Principle:
Dynamically create a div, using IE conditional comments to insert an I tag, in order to detect whether I tag is added to determine whether it is IE browser. Loops in the while to compare versions of IE.
Let's understand the code here:
Copy Code code as follows:
var undef,
v = 3,
div = document.createelement (' div '),
all = Div.getelementsbytagname (' i ');
This section is good to understand, declare variables and create a div, get the i in Div
div.innerhtml = ' <!--[if GT IE ' + (++v) + ']><i></i><! [endif]--> ',
This is the core, the use of IE conditional annotation to complete, ie conditional annotation is backward compatible, so you can use this test after the Ie10, if the next version is called Ie10.
About IE condition annotation, everybody can find on the Internet, it is easy to find. [If IE 7] [If GT IE 7] There are many patterns, I do not explain this condition annotation, did the Web front-end compatible should be more understanding of this.
Difficulties:
Copy Code code as follows:
while (
div.innerhtml = ' <!--[if GT IE ' + (++v) + ']><i></i><! [endif]--> ',
ALL[0]
);
What?while (expression 1, expression 2) is this what? is not the same as the while (expression) we learn?
Tips, while if there is more than one expression, with the last expression as a jump out of the judgment, the previous expression, no matter how many, will not be as a jump out of the judgment, but the implementation of the code inside.
For example: while (the expression is 1, the expression is 2, the expression 3, expression 4) only takes the expression 4 's true or false as the jump out of judgment.
The amount of God, can also be so, long experience it, quickly to try, this is Daniel's code, can only Marvel + Marvel!
Here is the end, just a few lines of code, is how elegant. I hope you can learn from the knowledge you want and broaden your horizons.
