JavaScript 기능 감지는 브라우저 감지가 아닙니다_javascript 팁

기사의 일부를 대략적으로 번역했습니다. 오해가 있는 부분이 있을 수 있으니 정정해 주시기 바랍니다. 댓글 섹션의 토론도 읽을 가치가 있다는 점을 언급할 가치가 있습니다.

기능 감지
처음에는 프론트엔드 엔지니어들이 브라우저 감지를 강력하게 반대했습니다. 그들은 사용자 에이전트 스니핑과 같은 방법이 미래가 아니기 때문에 매우 나쁘다고 믿었습니다. 새로운 브라우저 버전에 적응할 수 없는 증명 코드입니다. 더 나은 접근 방식은 다음과 같이 기능 감지를 사용하는 것입니다.

코드 복사 코드는 다음과 같습니다.

if (navigator.userAgent.indexOf("MSIE 7") > -1){
//뭔가
}

더 나은 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

if(document.all){
/ /do Something
}

두 가지 방법은 동일하지 않습니다. 전자는 브라우저의 특수한 이름과 버전을 감지하는 것이고, 후자는 브라우저의 특성을 감지하는 것입니다. UA 스니핑은 브라우저의 유형과 버전(적어도 브라우저 유형)을 정확하게 얻을 수 있는 반면, 기능 탐지는 브라우저가 특정 개체를 소유하는지 또는 특정 방법을 지원하는지 확인하는 것입니다. 이 둘은 완전히 다르다는 점에 유의하세요.
기능 감지는 어떤 브라우저가 지원하는지에 따라 다르기 때문에 새 버전의 브라우저가 나타날 때 지루한 확인 작업이 필요합니다. 예를 들어 DOM 표준이 처음 등장했을 때 일부 브라우저는 getElementById() 메서드를 지원하지 않았으므로 초기 코드는 다음과 같을 수 있습니다.

코드 복사 코드는 다음과 같습니다.

if(document.getElementById){ //DOM
element = document.getElementById(id)
} else if (document .all) { //IE
element = document.all[id];
} else if (document.layers){ //Netscape < 6
element = document.layers[id]
}

이것은 기능 감지의 좋은 예입니다. 중요한 점은 다른 브라우저가 getElementById() 메소드를 지원하기 시작하면 코드를 수정할 필요가 없다는 것입니다.
혼합 방식
이후 프론트엔드 엔지니어들이 개선된 작성 방식을 고려하여 코드를 다음과 같이 변경했습니다.

코드 복사 코드는 다음과 같습니다.

//AVOID!!!
if (document.all) { //IE
id = document.uniqueID
} else {
id = Math .random();
}

이 코드의 문제점은 document.all 속성을 감지하여 IE인지 확인하는 것입니다. IE를 식별할 때 개인 document.uniqueID 속성이 사용된다고 가정하는 것이 안전합니다. 그러나 현재 수행되는 작업은 document.all이 지원되는지 여부만 확인하는 것이며 브라우저가 IE인지 확인하는 것은 아닙니다. document.all을 지원한다고 해서 document.uniqueID를 사용할 수 있다는 의미는 아닙니다.
나중에 사람들은 위의 줄을 다음 줄로 대체하여 이렇게 작성하기 시작했습니다.
var isIE = navigator.userAgent.indexOf("MSIE") >
//다음 줄이 대체되었습니다. 위 줄
var isIE = !!document.all; 이러한 변경 사항은 모든 사람이 "UA 스니핑을 사용하지 마십시오"에 대해 오해하고 있음을 나타냅니다. 브라우저의 세부 정보는 더 이상 감지되지 않지만 기능 지원을 통해 추론됩니다. 브라우저 기능을 기반으로 탐지하는 이 방법은 매우 나쁩니다.
나중에 프런트 엔드에서는 document.all이 신뢰할 수 없음을 발견했으며 IE를 감지하는 더 나은 방법은 다음과 같습니다.
var isIE = !!document.all && document.uniqueID; 이 구현은 잘못된 것입니다. 브라우저에서 추가된 기능 지원을 확인하는 데 시간과 노력이 필요할 뿐만 아니라 다른 브라우저가 동일한 기능을 지원하기 시작할지 확신하는 것도 불가능합니다.
이와 같은 코드가 널리 사용되지 않는다고 생각되면 이전 버전의 Mootools에서 다음 코드 조각을 살펴보세요.

코드 복사 코드는 다음과 같습니다.

//MooTools 1.1.2
if (window.ActiveXObject) window.ie = window[window.XMLHttpRequest ? ie6'] = true;
else if (document.childNodes && !document.all && !navigator.taintEnabled) window.webkit = window[window.xpath ? 'webkit420' : 'webkit419'] = true; else if ( document.getBoxObjectFor != null || window.mozInnerScreenX != null) window.gecko = true


특징 감지를 어떻게 사용하는지 참고하세요. window.ie를 감지하여 ie8을 ie7로 착각하는 등 일련의 문제를 지적할 수 있습니다.
여파
브라우저의 급속한 발전으로 인해 기능 감지를 사용하는 것이 점점 더 어려워지고 신뢰할 수 없게 되었습니다. 그러나 Mootools 1.2.4는 여전히 이 메소드를 사용합니다(예: getBoxObjectFor()).

코드 복사 코드는 다음과 같습니다.

//from MooTools 1.2.4
var Browser = $merge({
엔진: {name: 'unknown', version: 0},
플랫폼: {name: (window.orientation != undefine) ? 'ipod' : (navigator.platform .match( /mac|win|linux/i) || ['other'])[0].toLowerCase()},
기능: {xpath: !!(document.evaluate), air: !!( window.runtime ), 쿼리: !!(document.querySelector)},
플러그인: {},
엔진: {
presto: function(){
return (!window.opera) ? false : ( (arguments.callee.caller) ? 960: ((document.getElementsByClassName) ? 950: 925)) ((window.XMLHttpRequest)? ((document.querySelectorAll)? 6:5):4); Features.xpath) ? ((Browser.Features.query) ? 525 : 420) : 419); mozInnerScreenX == null) ? false: ((document.getElementsByClassName) ? 19: 18);
특징 감지는 피해야 하는 방법이지만 직접적인 특징 감지는 좋은 방법이고 대부분의 경우 요구 사항을 충족할 수 있습니다. 일반적으로 이 기능 간의 관계를 고려하지 않고 테스트하기 전에 이 기능이 구현되었는지 여부만 알면 충분합니다.
브라우저 기능 감지를 절대 사용하지 말라는 것이 아니라 오히려 UA 스니핑을 사용한다는 뜻입니다. 왜냐하면 여전히 많은 용도가 있다고 생각하지만 합법적인 용도가 많지 않다고 생각하기 때문입니다. UA 스니핑을 고려하고 있다면 먼저 이 아이디어를 구현하십시오. 유일한 안전한 방법은 특정 브라우저의 특정 버전을 대상으로 하는 것이며, 그 이상의 것은 신뢰할 수 없습니다(예: 새 브라우저 버전). 사실 이 역시 현명한 접근 방식이다. 불확실한 새 버전과의 상위 호환성에 비해 이전 버전과의 하위 호환성이 가장 쉬운 방법이기 때문이다.