HTML5에서 폴리 필의 의미는 무엇입니까?


387

HTML5에서 폴리 필의 의미는 무엇입니까? HTML5에 대한 많은 사이트에서이 단어를 보았습니다 (예 : HTML5-Cross-Browser-Polyfills).

따라서 기본적으로 지원하지 않는 브라우저에 HTML5 기능을 이식하기 위해 모든 심, 폴백 및 폴리 필을 수집합니다.

실제로 폴리 필의 의미가 무엇인지 이해하지 못합니다.

새로운 HTML5 기술입니까 아니면 JavaScript 라이브러리입니까? HTML5 이전에는이 ​​단어를 들어 본 적이 없습니다.

심, 폴백 및 폴리 필의 차이점은 무엇입니까?



@ user3400622 링크에 감사드립니다. 링크의 설명이 매우 명확합니다.
앤드류 램

답변:


377

폴리 필은 JavaScript로 만든 브라우저 폴백으로, 최신 브라우저에서 작동 할 것으로 예상되는 기능 (예 : 이전 브라우저에서 캔버스 (HTML5 기능) 지원)을 허용합니다.

HTML5와 함께 사용되기 때문에 일종의 HTML5 기술이지만 HTML5의 일부가 아니며 HTML5가 없어도 폴리 필을 채울 수 있습니다 (예 : 원하는 CSS3 기술 지원).

다음은 좋은 게시물입니다.

http://remysharp.com/2010/10/08/what-is-a-polyfill/

다음은 폴리 필 및 심의 전체 목록입니다.

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills


6
ie7.js도 polyfill입니다.
Jitendra Vyas

1
예 : "PNG 투명도, CSS 스타일 / 선택기, 렌더링 버그 수정 등을 포함한 많은 수정 사항" 브라우저가 아직 지원하지 않는 자바 스크립트를 통해이 기능을 추가하고 있습니다.
Calvin Froedge 2

1
Polyfills라는 단어가 HTML5 이후에 나온 것 같습니다. 심이 폴리 필과 다릅니 까?
Jitendra Vyas

16
심이 더 일반화됩니다. 폴리 필은 심 유형입니다. 여기에 잘 설명하는 질문은 stackoverflow.com/questions/6599815/...
캘빈 Froedge

6
remysharp.com/2010/10/08/what-is-a-polyfill 이 링크는 단순한 "좋은 게시물"이상입니다. 실제로 단어를 만든 사람이 단어의 전체 정의 및 원점입니다. 발췌 : "Polyfilla 제품 (미국에서 포장)은 균열과 구멍을 막기 위해 벽에 넣을 수있는 페이스트입니다." 이 포스트는 또한 심이 이전의 개념을 다루고 폴리 필과 다릅니다. 꼭 읽어 봐야 할 IMO.
aaron-coding

64

먼저, polyfil이 아닌 것이 무엇인지 명확히하자. polyfill은 HTML5 표준의 일부가 아니다. 이러한 문맥에서 종종 폴리 필이 참조되는 경우에도 폴리 필은 Javascript로 제한되지 않습니다.

polyfill 자체라는 용어는 "현재 또는"현대 "브라우저에서 특정 기능을 내장하여 해당 기능을 지원하지 않는 다른 브라우저에서도 작동하도록하는 일부 코드를 말합니다."

polyfill의 출처와 예는 다음과 같습니다.

http://www.programmerinterview.com/index.php/html5/html5-polyfill/


31

폴리 필은 개발자가 브라우저가 기본적으로 제공 할 것으로 기대하는 기술을 제공하는 코드 (또는 플러그인)입니다.


2
잘 설명했다.
Eugen Sunic

16

폴리 필은 원래 호출을 심 호출로 대체 하는 심입니다.

예를 들어 navigator.mediaDevices 객체를 사용하려고하지만 모든 브라우저에서이 기능을 지원하는 것은 아닙니다. 다음과 같이 사용할 수있는 심을 제공하는 라이브러리를 상상할 수 있습니다.

<script src="js/MediaShim.js"></script>
<script>
    MediaShim.mediaDevices.getUserMedia(...);
</script>

이 경우 원래 객체 또는 메소드를 사용하는 대신 명시 적으로 shim을 호출합니다. 반면에 폴리 필은 원본 객체의 객체와 메소드를 대체합니다.

예를 들면 다음과 같습니다.

<script src="js/adapter.js"></script>
<script>
    navigator.mediaDevices.getUserMedia(...);
</script>

코드에서는 표준 navigator.mediaDevices 객체를 사용하는 것처럼 보입니다. 그러나 실제로 폴리 필 (예제에서는 adapter.js)이이 객체를 자체 객체로 대체했습니다.

그것을 대체 한 것은 심입니다. 이것은 기능이 기본적으로 지원되는지 여부를 감지하고 기능이있는 경우 사용하거나 그렇지 않은 경우 다른 API를 사용하여 문제를 해결합니다.

따라서 polyfill은 일종의 "투명한"심입니다. 그리고 이것이 " 폴리 필 스크립트를 제거하면 폴리 필을 제거하더라도 필요한 변경없이 코드가 계속 작동합니다 "라고 말할 때 Remy Sharp (용어를 만든 사람)의 의미 입니다.


9
심이 란?
Oliver Watkins

3
@Oliver Watkins 어댑터 패턴에 익숙하면 심이 무엇인지 알 수 있습니다. 심은 API 호출을 가로 채고 호출자와 대상 사이에 추상 계층을 만듭니다. 일반적으로 심은 이전 버전과의 호환성을 위해 사용됩니다
Anurag Ratna

@AnuragRatna 혼동을 피하기 위해 '절편'을 사용하지 않을 것입니다. 절편은 일반적으로 (투명하게) 가로채는 코드입니다 (예 : 발신자가 모르는 상태). 심은 이전 버전과의 호환성을위한 API 호출을 제공 합니다
Qetesh
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.