JS의 기능 및 브라우저 추론을 피하는 방법

이번에는 JS에서 기능 및 브라우저 추론을 방지하는 방법과 JS에서 기능 및 브라우저 추론을 방지하기 위한 노트에 대해 설명하겠습니다. 다음은 실제 사례입니다.

특징 감지의 부적절한 사용은 "특징 추론"입니다. 기능 추론은 여러 기능을 사용하려고 시도하지만 그 중 하나만 확인합니다. 다른 특징의 존재로부터 한 특징의 존재를 추론합니다. 문제는 추론이 사실이 아닌 가정이고 유지 관리 문제로 이어질 수 있다는 것입니다. 예를 들어 다음은 기능 추론을 사용하는 일부 오래된 코드입니다.

// 不好的写法 - 使用特性推断function getById (id) {  var el = null;  if (
document
.
getElementsByTagName
) { // DOM
    el = document.getElementById(id);
  } else if (window.ActiveX
Object
) { // IE
    el = document.all[id];
  } else { // Netscape <= 4
    el = document.layers[id];
  }  return el;
}

이 함수는 최악의 기능 추론이며 여러 가지 추론을 합니다.

document.getElementsByTagName()이 존재하면 document.getElementById도 존재합니다. 실제로, 하나의 DOM 메소드가 존재하면 모든 메소드가 존재한다는 가정이 있습니다.

window.ActiveXObject가 존재하면 document.all도 존재합니다. 이 추론은 기본적으로 window.ActiveXObject가 IE에만 ​​존재하고 document.all이 IE에만 ​​존재한다는 결론을 내립니다. 따라서 하나가 존재한다고 판단되면 다른 것도 반드시 존재해야 합니다. 실제로 일부 Opera 버전은 document.all도 지원합니다.

이 추론 중 어느 것도 사실이 아니라면 Netscape Navigator 4 이하 버전이어야 합니다. 이것은 맞는 것 같지만 매우 느슨합니다.

한 기능의 존재를 다른 기능의 존재로부터 추론할 수는 없습니다. 기껏해야 둘 사이에 약한 연결이 있고 최악의 경우 직접적인 관계가 전혀 없습니다.

2.8.4 브라우저 추론 피하기

어느 시점에서 사용자 에이전트 감지와 기능 감지는 많은 웹 개발자들을 혼란스럽게 만들었습니다. 그래서 작성된 코드는 다음과 같습니다.

// 不好的写法if (document.all) {
  id = document.uniqueID;
} else {
  id = Math.random();
}

이 코드의 문제점은 document.all을 감지하여 브라우저가 IE인지 간접적으로 결정한다는 것입니다. 브라우저가 IE라고 판단되면 IE 고유의 document.uniqueID를 안전하게 사용할 수 있다고 가정합니다. 그러나 수행하는 모든 검색은 document.all이 존재하는지 여부만 나타내며 브라우저가 IE인지 확인하는 데 사용할 수 없습니다. document.all이 존재한다고 해서 document.uniqueID도 사용할 수 있다는 의미는 아니므로 이는 코드가 제대로 실행되지 않을 수 있는 잘못된 암시적 추론입니다.

문제를 더 명확하게 표현하기 위해 코드를 다음과 같이 수정했습니다.

var isIE = navigator.userAgent.indexOf("MSIE") > -1;

다음과 같이 수정했습니다.

// 不好的写法var isIE = !!document.all;

이 변경 사항은 "사용자 에이전트 감지를 사용하지 않음"에 대한 오해를 반영합니다. 특정 브라우저를 직접적으로 감지하지는 못하더라도, 기능 감지를 통해 특정 브라우저를 유추하는 것도 좋지 않습니다. 이를 브라우저 추론이라고 하며 나쁜 습관입니다.

어떤 단계에서 개발자는 document.all이 실제로 브라우저가 IE인지 확인하는 가장 좋은 방법이 아니라는 것을 깨달았습니다. 이전 코드는 아래와 같이 더 많은 기능 감지를 추가합니다.

var isIE = !!document.all && document.uniqueID;

이 방법은 "똑똑한" 유형입니다. 점점 늘어나는 알려진 속성에서 무언가를 추론하는 것은 너무 어렵습니다. 더 나쁜 점은 다른 브라우저가 동일한 기능을 구현하는 것을 막을 수 있는 방법이 없기 때문에 이 코드가 신뢰할 수 없는 결과를 반환한다는 것입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS에서 Polyfill 주석 사용 및 수정 방지

JS 파사드 모드 사용 사례에 대한 자세한 설명

위 내용은 JS의 기능 및 브라우저 추론을 피하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!