Code Transformation: js browser Judgment Method

"Changing things and General Principles" must also be implemented in coding. Sometimes the idea is too restrictive. Write your own js framework today (for now, it is called YQ, and will be used in other articles) for examples of browser judgment methods, we will talk about the transformation of code ideas.

Navigator. userAgent Analysis

About javascript's judgment on the browser, I wrote a long time ago article titled js's judgment on browser functions, which can distinguish between chrome and safari. This method is also used in the YQ framework, but later I thought that a netizen said that it would be wrong to judge the version number of Firefox, because Firefox's version was determined by regular expressions, firefox is not taken into account, but firefox does not have this bug. First, let's take a look at Firefox's navigator. userAgent:
This is my firefox (3.6.15, but it shows 3.6.8. I don't know how to solve this problem. Check that the version is not uniform)

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv: 1.9.2.8) Gecko/20100722 Firefox/3.6.8 QQDownload/1.7

According to the regular expression, the Firefox version number should be written in this way/Firefox [/] ([w.] + )/
Safari is indeed similar:

...... Version/3.1 Safari/525.13

The Version is the actual Version number, which is also known as the Version number.

Pondering

I started to write js to judge the browser, which is the same as jQuery's $. browser, but the version number may be faulty, But I just added a chrome judgment. To solve the problem, we first thought that a regular object should be used to match the browser name and version number. The regular object is set as follows:

var browserRegExp = {ie:/(msie)[ ]([\w.]+)/,firefox:/(firefox)[ |\/]([\w.]+)/,chrome:/(chrome)[ |\/]([\w.]+)/,safari:/version[ |\/]([\w.]+)[ ](safari)/,opera:/(opera)[ |\/]([\w.]+)/}

The design of this object is still skillful (mentioned later), because I will use a traversal later to match all the regular expressions and generate an object similar to $. browser. But think about it. How can we use it when using the judgment? It is nothing more than the following usage:

$.browser.msie&&$.browser.version==='6.0'

The first change in usage

The above method is changed to the following method:

$.browser==='msie'&&$.browserVersion==='6.0'

$. Browser is the name of the browser, and $. browserVersion is the version number. This eliminates the need to use regular expressions every time, improving the efficiency.

The second transformation: the transformation of function writing

According to the above analysis, we need to first determine the browser name and version number, and then assign values to $. browser and $. browserVersion respectively, so we have the following YQ code:

for(var i in browserRegExp){var match = browserRegExp[i].exec(ua);if(match){YQ.browser = match[1];YQ.browserVersion = match[2];break;}}

The tips mentioned above are to put the user group browser in front to reduce the number of cycles. IE is definitely the first in China, followed by FF, chrome ...... In turn.

The third change: I don't know what to say

Careful kids shoes should have seen safari judge that YQ. browser and YQ. browserVersion are the opposite. To solve this problem, a third change is coming! The language is not good. I don't know how to say this change. I will directly go to the Code:

var ua = navigator.userAgent.toLowerCase(),browserRegExp = {ie:/msie[ ]([\w.]+)/,firefox:/firefox[ |\/]([\w.]+)/,chrome:/chrome[ |\/]([\w.]+)/,safari:/version[ |\/]([\w.]+)[ ]safari/,opera:/opera[ |\/]([\w.]+)/};YQ.browser = 'unknow';YQ.browserVersion = '0';for(var i in browserRegExp){var match = browserRegExp[i].exec(ua);if(match){YQ.browser = i;YQ.browserVersion = match[1];break;}}alert(YQ.browser);alert(YQ.browserVersion);

1. Modified the Regular Expression and determined to be version.
2. 2. I is assigned to YQ. browser.

In this way, we obtain YQ. browser is the key of the object. If IE is used, YQ. browser is ie, rather than msie, which makes it easier to remember and does not need to be judged to handle the safari version number and name inversion problem.

Summary

I think there will be a lot of discoveries when I look at it carefully. I have code cleanliness, can write less judgment, and can use less cycles! Haha.
Continue coding YQ ...... (Status: Love wall is finished, YQ is checking ing)