jQuery.브라우저의 실현 방식

jQuery.브라우저의 실현 방식
jQuery의 브라우저 객체
jQuery의 브라우저 대상은 브라우저의 정보를 저장합니다.크로스 브라우저는 대부분의 클라이언트 JS 라이브러리에서 반드시 갖추어야 하는 기본 특성으로 탐색의 유형과 버전 번호를 판단하여 대상에 저장하는 것은 서로 다른 브라우저에 대해 서로 다른 정책을 취하기 위한 것이다.
다음 코드는 jQuery를 보여 주는 데 사용됩니다.브라우저 사용법:

<script type="text/javascript" src="jquery.js"></script>
<script>
document.write('$.browser.webkit: ' + $.browser.webkit + '<br />');
document.write('$.browser.opera: ' + $.browser.opera + '<br />');
document.write('$.browser.msie: ' + $.browser.msie + '<br />');
document.write('$.browser.mozilla: ' + $.browser.mozilla + '<br />');
document.write('$.browser.version: ' + $.browser.version);
</script>

이 코드는 브라우저마다 표시 효과가 다르다.
IE의 디스플레이는 다음과 같습니다.

$.browser.webkit: undefined
$.browser.opera: undefined
$.browser.msie: true
$.browser.mozilla: undefined
$.browser.version: 8.0

$을(를) 기준으로 합니다.browser.msie가true인지 여부는 브라우저가 IE 커널인지 여부를 판단할 수 있습니다.$.browser.version은 브라우저 커널의 버전 번호를 얻을 수 있습니다.다른 브라우저는 유사한 방식으로 판단할 수 있다.
생각을 실현하다
　　jQuery.브라우저의 실현 방향은 다음과 같다.
　　1. 윈도우를 통해서.navigator.userAgent 브라우저에 대한 설명 문자열 가져오기
　　2. 정규 표현식을 사용하여 일치합니다. 브라우저마다 정규 표현식이 다릅니다.
　　3. 일치하는 결과에 따라 특정 브라우저인지 판단하고 버전 번호를 추출합니다
　　4. 브라우저 대상에 결과를 저장합니다.
우선, 서로 다른 브라우저의 윈도우를 테스트해 봅시다.navigator.userAgent 출력 결과:

ua = window.navigator.userAgent;
document.write('user agent:<br />' + ua);

Google Chrome의 결과:

user agent:
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.60 Safari/534.24

Cheomr의 브라우저 커널이 Webkit인 것을 알기 때문에 가장 중요한 것은 WebKit 키워드이지만 Google Chrome은 호환성을 표시하기 위해 설명 문자열에 Mozilla 등의 글자를 포함하고 있습니다.다른 브라우저에서도 비슷한 상황이 있다.
Apple Safari 결과:

user agent:
Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-CN) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

Microsoft IE 8.0 표시 결과:

user agent:
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)

Mozilla FireFox 표시 결과:

user agent:
Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-CN; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

Opera 의 결과:

user agent:
Opera/9.80 (Windows NT 6.1; U; Edition IBIS; zh-cn) Presto/2.8.131 Version/11.10

서로 다른 브라우저가 사용하는 정규 표현식이 다르기 때문에 다음에 우리는 서로 다른 브라우저의 상황에 맞추어 jQuery에 대해브라우저의 실현에 대해 진일보한 분석을 진행하다.
Webkit 커널의 체크
Google Chrome과 Apple Safari는 모두 Webkit 커널을 사용하며, 설명 문자열에도 'Webkit' 이 포함되어 있기 때문에 검출을 위한 정규 표현식에 'Webkit' 이 포함되어야 합니다.
또한 버전 번호는 "Webkit"키워드와 함께 표시되며 중간에 "/"로 구분됩니다.따라서 다음 코드로 브라우저가 Webkit 커널인지 판단하고 버전 번호를 추출할 수 있습니다.

ua = window.navigator.userAgent;
document.write('user agent:<br />' + ua + '<br /><br />');

match = /WebKit\/([\w.]+)/.exec(ua);
if (match) {
	document.write('Webkit Kernal<br />');
	document.write('Version: ' + match[1]);
} else {
	document.write('Not Webkit Kernal');
}

정규 표현식은/WebKit\/([\w.]+)/이며 "Webkit"및 구분자 "/"가 포함되어 있음을 나타내며 공백이 될 때까지 "/"문자를 버전 번호로 캡처합니다.(\w는 문자나 숫자, 밑줄 또는 한자 등과 일치합니다.)
IE 커널의 테스트
IE 커널 브라우저의 설명 문자열에는 "MSIE"가 포함되어 있으며, 버전 번호는 "MSIE"키워드와 함께 공백으로 구분됩니다.따라서 다음 코드로 브라우저가 IE 커널인지 판단하고 버전 번호를 추출할 수 있습니다.

ua = window.navigator.userAgent;
document.write('user agent:<br />' + ua + '<br /><br />');

match = /MSIE ([\w.]+)/.exec(ua);
if (match) {
	document.write('IE Kernal<br />');
	document.write('Version: ' + match[1]);
} else {
	document.write('Not IE Kernal');
}

정규 표현식은/MSIE([\w.]+)/이며, 버전 번호로 "MSIE"및 공백을 포함하고 공백 뒤에 오는 문자를 캡처합니다.
Mozilla 커널의 테스트
Mozilla Firefox 설명 문자열에는 "Mozilla"가 포함되어 있으며, 버전 번호는 "rv:"다음에 나타납니다(Mozilla 키워드 뒤에도 버전 번호가 있지만 rv 이후의 버전 번호는 좀 더 세분화됩니다).따라서 다음 코드로 브라우저가 Mozilla 커널인지 판단하고 버전 번호를 추출할 수 있습니다.

ua = window.navigator.userAgent;
document.write('user agent:<br />' + ua + '<br /><br />');

match = /Mozilla(?:.*? rv:([\w.]+))/.exec(ua);
if (match) {
	document.write('Mozilla Kernal<br />');
	document.write('Version: ' + match[1]);
} else {
	document.write('Not Mozilla Kernal');
}

사용한 정규 표현식은/Mozilla(?:.*?rv:([\w.]+)/이며, "Mozilla"가 포함되어 있음을 나타내고 "rv:"이후의 문자를 다음 빈칸까지 포착하여 버전 번호로 사용합니다.
Opera 커널의 테스트
Opera 설명 문자열에는 "Opera"가 포함되어 있으며, 버전 번호는 "Version/"다음에 나타납니다(마찬가지로 Opera 키워드 뒤에도 버전 번호가 있지만 "Version"이후의 버전 번호는 좀 더 세분화됩니다).따라서 다음 코드로 브라우저가 Opera 커널인지 판단하고 버전 번호를 추출할 수 있습니다.

ua = window.navigator.userAgent;
document.write('user agent:<br />' + ua + '<br /><br />');

match = /Opera(?:.*Version)\/([\w.]+)/.exec(ua);
if (match) {
	document.write('Opera Kernal<br />');
	document.write('Version: ' + match[1]);
} else {
	document.write('Not Opera Kernal');
}

정규 표현식은/Opera(?:.*Version)\/([\w.]+)/이며, "Opera"가 포함되어 있음을 나타내고 "Version/"다음에 오는 문자를 다음 공백까지 버전 번호로 캡처합니다.
병합
상기 서로 다른 브라우저에 대한 코드를 연결하면 jQuery를 실현할 수 있습니다.브라우저다.그러나 jQuery의 실현은 좀 더 기교적이다.다음은 jQuery의 구현과 비교적 가까운 쓰기 방법입니다.

$ = function() {
    function uaMatch(ua) {
        ua = ua.toLowerCase();

        var match = rwebkit.exec(ua)
                    || ropera.exec(ua)
                    || rmsie.exec(ua)
                    || ua.indexOf("compatible") < 0 && rmozilla.exec(ua)
                    || [];

        return {
            browser : match[1] || "",
            version : match[2] || "0"
        };
    }

    var
    rwebkit = /(webkit)\/([\w.]+)/,
    ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
    rmsie = /(msie) ([\w.]+)/,
    rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,    
    browser = {},
    ua = window.navigator.userAgent,
    browserMatch = uaMatch(ua);

    if (browserMatch.browser) {
        browser[browserMatch.browser] = true;
        browser.version = browserMatch.version;
    }

    return { browser: browser }
}();

이 JS 파일의 이름을 "jquery-browser.js"로 지정하고 html에서 참조합니다.

<script type="text/javascript" src="jquery-browser.js"></script>
<script>
document.write('$.browser.webkit: ' + $.browser.webkit + '<br />');
document.write('$.browser.opera: ' + $.browser.opera + '<br />');
document.write('$.browser.msie: ' + $.browser.msie + '<br />');
document.write('$.browser.mozilla: ' + $.browser.mozilla + '<br />');
document.write('$.browser.version: ' + $.browser.version + '<br />');
</script>

효과와 직접 인용 jquery.js는 동일합니다.
몇 가지 차이점을 살펴보겠습니다.
　　1. 사용자 에이전트가 소문자로 바뀌어 대소문자의 영향을 피합니다.
　　2. Mozilla를 판단할 때 ua가 추가되었습니다.indexOf("compatible")<0, 이것은 일부 Mozilla를 호환한다고 주장하는 브라우저의 영향(예를 들어 IE 8.0)을 배제하기 위해서이다. 일부 검색엔진의 파충류도 자주 Mozilla를 호환한다고 주장한다.
　　3. Opera와 Mozilla의 정규 표현식을 "?"로 검사합니다.'rv'나'Version'이 있을 수도 있고 없을 수도 있음을 표시하는데 이것은 서로 다른 Opera와Mozilla 내장 브라우저(또는 오래된 버전)를 호환하기 위해서일 수 있다.
　　4.match 포착 그룹은 두 가지가 있는데 첫 번째는 브라우저 내장 이름이고 두 번째는 버전 번호로 브라우저 내장 이름과 버전 번호를 동시에 추출하여 코드량을 줄였다.
지금까지 jQuery였습니다.briwser의 상대적으로 완전한 실현이 이루어졌다.주요한 기교는 윈도우를 사용하는 것이다.navigator.사용자 에이전트는 브라우저의 설명 문자열을 가져오고 정규 표현식을 통해 이 문자에서 정보를 추출합니다.