분류 javascript

브라우저 polyfill madness, Mozilla 및 Internet Explorer

컨텐츠 정보

  • 조회 196 (작성일 )

본문

최근 Polyfilling Number.isSafeInteger 메서드의 진짜 고통을 경험했습니다.


https://goodguydaniel.com/blog/browser-polyfill-madness-mozilla-internet-explorer/ 


당신이 물어 보는 polyfill은 무엇입니까?


그것은 업무에서 일어났습니다. IE 11에서는 작동하지 않는 것이 있었고 많은 원인 요청이 있었지만 특히 주의를 끌었습니다. 이 풀 요청에는 Number.isSafeInteger를 사용하는 코드 행이 있었습니다.


return arr.filter(Number.isSafeInteger);


MDN 웹 문서의 유명한 브라우저 호환성 테이블에서 내 이론이 사실임을 확인할 때까지는 특별한 것이 없었습니다. IE에서 Number.isSafeInteger가 지원되지 않습니다.


polyfill 섹션을 실행하여 권장되는 polyfill 코드를 복사하고 팀에 "내가 찾았습니다!"라고 발표했습니다.


Number.isSafeInteger = Number.isSafeInteger || function (value) {
   return Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER;
};

그렇게 간단하지는 않지만 Number.isInteger도 지원되지 않았고 다시 polyfill을 사용하지 않았습니다. 동일한 실수를 두 번 반복하고 싶지 않았기 때문에 이번에 Number.isInteger에 대한 polyfill의 소스 코드를 두 번 확인했습니다.


Number.isInteger = Number.isInteger || function(value) {
  return typeof value === 'number' &&
    isFinite(value) &&
    Math.floor(value) === value;
};


그래서 뭘 생각해? 예, Number.isFinite는 IE에서도 지원되지 않습니다!


if (Number.isFinite === undefined) Number.isFinite = function(value) {
    return typeof value === 'number' && isFinite(value);
}


그게 다라고 생각할 수도 있습니다. 그는 광기를 채우는 일을 마쳤습니다. 나는 너를 비난하지 않는다고 생각했다. 내가 필사적으로 polyfill하려고 했던 원래의 방법을 기억하십니까?


Number.isSafeInteger = Number.isSafeInteger || function (value) {
   return Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER;
};


IE에서 Number.MAX_SAFE_INTEGER도 지원되지 않으므로 polyfill을 사용해야 했습니다.


if (!Number.MAX_SAFE_INTEGER) {
    Number.MAX_SAFE_INTEGER = 9007199254740991; // Math.pow(2, 53) - 1;
}