심과 폴리 필의 차이점은 무엇입니까?


406

둘 다 웹 개발 분야에서 사용되는 것 같습니다 (예 : HTML5 Cross Browser Polyfills 참조) .

여기에서 모든 심, 폴백 및 폴리 필을 수집합니다.

또는 es5-shim 프로젝트가 있습니다.

현재 프로젝트에서 여러 가지를 사용하고 있으며 모두 동일한 디렉토리에 고정하고 싶습니다. 그래서이 디렉토리를 무엇이라고 부를 까요 --- shims또는 polyfills?


6
다시 열기 : "이 디렉토리를 무엇이라고해야합니까?"는 의견을 기반으로 할 수 있다고 생각하지만 실제로 질문의 더 큰 맥락은 제공되지 않으며이 질문의 가장 중요한 측면도 아닙니다. 여기에있는 모든 답변은 동의 한 것으로 보이며 사실, 참조 및 특정 전문 지식이 많이 사용됩니다.
— nobar

답변:


386
  • 심은 수행은 API 호출의 방수 해당 코드의 어떤 부분이며 추상화 계층을 제공한다. 반드시 웹 애플리케이션 또는 HTML5 / CSS3으로 제한되지는 않습니다.

  • polyfill는 A는 심의 유형 현대 HTML5와 개조 레거시 브라우저 / CSS3 보통 자바 스크립트 나 플래시를 사용하여 기능 있음.

shims디렉토리를 일반으로 유지하려면 특정 질문에 대답하고 디렉토리를 호출하십시오 .


234

틈 메우는 나무

어댑터 패턴에 익숙하면 심이 무엇인지 알 수 있습니다. 심은 API 호출을 가로 채고 호출자와 대상 사이에 추상 계층을 만듭니다. 일반적으로 심은 역 호환성을 위해 사용됩니다. 예를 들어 es5-shim npm 패키지를 사용하면 ES5 (ECMAScript 5) 구문을 작성할 수 있으며 브라우저가 ES5를 실행 중인지 여부는 신경 쓰지 않습니다. 가지고 Date.now를 예로 들어. ES3의 구문이 new Date (). getTime () 인 ES5의 새로운 함수입니다 . 당신이 사용하는 경우 ES5를-심은 당신이 쓸 수 Date.now을 하고 지원에서 실행중인 브라우저가 ES5 경우는 실행됩니다. 그러나 브라우저가 ES3 엔진을 실행중인 경우 es5-shim 은 Date.now에 대한 호출을 차단합니다.대신 새 Date (). getTime ()을 반환하십시오 . 이 차단을 shimming이라고합니다. es5-shim의 관련 소스 코드는 다음과 같습니다.

if (!Date.now) {
    Date.now = function now() {
        return new Date().getTime();
    };
}

폴리 필

폴리 필링은 실제로 특수 버전의 shimming입니다. Polyfill은 API에서 누락 된 기능을 구현하는 것에 관한 것이지만 shim은 기능을 수정하는 것만으로 누락 된 기능을 구현하는 것이 아닙니다. 나는 이것이 모호한 것처럼 보이지만 shim이 더 넓은 용어로 사용되는 경우 polyfill은 이전 브라우저에 대한 하위 호환성을 제공하는 shim을 설명하는 데 사용됩니다. 따라서 심이 오래된 죄를 덮는 데 사용되는 반면, 폴리 필은 미래의 향상을 되 찾는 데 사용됩니다. 예를 들어 IE7에서는 sessionStorage를 지원하지 않지만 sessionstorage npm 패키지 의 polyfill은 데이터를 창의 name 속성에 저장하는 것과 같은 기술을 사용하거나 쿠키를 사용하여 IE7 이상에서이 기능을 추가합니다.


107
따라서 심이 오래된 죄를 덮는 데 사용되는 반면, 폴리 필은 미래의 향상을 되 찾는 데 사용됩니다. 이것은 나에게 모든 것을 요약합니다. 명확한 설명 감사합니다.
— JohnnyQ

이 답변은 도움이됩니다. 그러나 두 용어는 종종 es5-shim을 포함하여 웹에서 정확하게 사용되지 않는 것 같습니다. 나는 es5-shim이 당신의 정의에 따라 shim과 polyfills의 혼합이라고 생각합니다.
— Matt Browne

와우-> 따라서 심이 오래된 죄를 덮는 데 사용되는 반면, 폴리 필은 미래의 향상을 되찾기 위해 사용됩니다. <-많은 감사합니다!
— zeppelin

3
날짜 예는 Polyfill처럼 보입니다. 왜 폴리 필이라고 생각합니까? Date.now는 기본 호출이므로 Polyfill은 브라우저와 동일한 API로 해당 기능을 추가합니다. 심에는 다음과 같은 새로운 API가 제공됩니다 MyShim.Date.now(); . 틀린 경우 수정하십시오.
— TatzyXY

99

내가 이해 한 것에서 :

폴리 필은 특정 "예상 된"API가 없는지를 감지하여 수동으로 구현하는 코드입니다. 예 :

if (!Function.prototype.bind) { Function.prototype.bind = ...; }

shim은 기존 API 호출을 가로 채고 다른 동작을 구현하는 코드입니다. 여기서 아이디어는 여러 환경에서 특정 API를 정규화하는 것입니다. 따라서 두 브라우저가 동일한 API를 다르게 구현하면 해당 브라우저 중 하나에서 API 호출을 가로 채서 다른 브라우저와 동작을 조정할 수 있습니다. 또는 브라우저 중 하나의 API에 버그가있는 경우 해당 API에 대한 호출을 다시 가로 챈 다음 버그를 피할 수 있습니다.


66

그의 책 Speaking JavaScript 에서 Axel Rauschmayer 를 인용 :

  • shim은 해당 환경의 수단 만 사용하여 이전 환경에 새 API를 제공하는 라이브러리입니다.
  • 폴리 필은 브라우저 API의 심입니다. 일반적으로 브라우저가 API를 지원하는지 확인합니다. 그렇지 않은 경우 polyfill은 자체 구현을 설치합니다. 따라서 두 경우 모두 API를 사용할 수 있습니다. 폴리 필이라는 용어는 주택 개량 제품에서 비롯됩니다. 레미 샤프 에 따르면 :

    Polyfilla는 미국에서 Spackling Paste로 알려진 영국 제품입니다. 그것을 염두에두고 : 브라우저를 균열이있는 벽으로 생각하십시오. 이 [polyfills]은 균열을 부드럽게하고 브라우저의 매끄러운 벽을 제공합니다.


9

틈 메우는 나무. shim은 해당 환경의 수단 만 사용하여 이전 환경에 새 API를 제공하는 라이브러리입니다.

폴리 필. 2010 년 10 월, Remy Sharp는 "polyfill"이라는 용어에 대해 [Rick Waldron을 통해] 블로그했습니다.

폴리 필은 개발자가 브라우저가 기본적으로 제공 할 것으로 기대하는 기술을 제공하는 코드 (또는 플러그인)입니다. 원한다면 API 환경을 평탄화하십시오.


8

몇 년 전부터 이것에 대해 설명하는 환상적인 기사 :

폴리 필이란 무엇입니까?

이 기사에서 (2)는 다음과 같이 간단히 대조됩니다.

Shim : 추가 할 수있는 코드 조각 (예 : JavaScript일부 기능을 수정하지만 대부분 자체 API가 있음) .

Polyfill : 드롭 할 수있는 것 (예 :) 은 지원되지 않는 기존 브라우저 APIJavaScript 를 모방하기 위해 자동으로 작동합니다 .


1
나는 이것이 일반적인 사용법과 당신이 링크 한 블로그 포스트에서 Remy Sharp가 실제로 말하는 것을 오도하는 것으로 생각합니다. Shim 은 요즘 polyfill 과 동의어로 가장 많이 사용되며 (특히 es5-shim 및 es6-shim 참조 ) Remy는 (와 비교하여 ) 사용자 정의 API에 대해 'shim'이라는 단어 를 언급한다는 점 을 특히 중요 합니다shim.gif . 그는 이런 방식으로 단어를 사용하도록 지시하지 않았으며 "나에게" 라고 말함으로써 그의 사용법이 보편적이지 않다는 것을 암묵적으로 인정하고 있습니다.
— Mark Amery
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.