Jaka jest różnica między podkładką a wypełnieniem?

406

Oba wydają się być używane w kręgach programistycznych, patrz np. HTML5 Cross Browser Polyfills , który mówi:

Więc tutaj zbieramy wszystkie podkładki, awarie i wypełnienia ...

Lub istnieje projekt es5-shim .

W moim obecnym projekcie korzystamy z wielu z nich i chcę je wszystkie umieścić w tym samym katalogu. Jak mam nazwać ten katalog --- shimslub polyfills?

Domenic
źródło
6
ponownie: Przypuszczam, że „jak powinienem nazwać ten katalog” może być oparte na opiniach, ale tak naprawdę nie ma szerszego kontekstu pytania - ani nie jest to najważniejszy aspekt tego pytania. Wszystkie odpowiedzi tutaj wydają się zgodne, a faktów, referencji i wiedzy specjalistycznej używa się w znacznym stopniu.
nobar

Odpowiedzi:

386
  • Podkładkę jakikolwiek fragment kodu wykonuje przechwycenie wywołania API i zawiera warstwę abstrakcji. Niekoniecznie ogranicza się do aplikacji internetowej lub HTML5 / CSS3.

  • Polyfill to rodzaj podkładki że modernizacja starszych przeglądarek z nowoczesnym HTML5 / CSS3 funkcje zwykle przy użyciu JavaScript lub Flash.

Odpowiadając na konkretne pytanie, zadzwoń do swojego katalogu, shimsjeśli chcesz zachować ogólny katalog.

Arsalan Ahmed
źródło
234

Podkładka

Jeśli znasz wzór adaptera, wiesz, czym jest podkładka dystansowa. Podkładki przechwytują połączenia API i tworzą warstwę abstrakcyjną między dzwoniącym a celem. Zazwyczaj podkładki dystansowe są używane dla kompatybilności wstecznej. Na przykład pakiet npm esim-shim pozwoli ci napisać składnię ECMAScript 5 (ES5) i nie będzie miało znaczenia, czy przeglądarka działa na ES5, czy nie. Jako przykład weź Date.now . Jest to nowa funkcja w ES5, w której składnią w ES3 będzie nowa Date (). GetTime () . Jeśli używasz podkładki es5 , możesz napisać Date.now i jeśli przeglądarka, w której korzystasz, obsługuje ES5, po prostu uruchomi się. Jeśli jednak w przeglądarce działa silnik ES3 , es5-shim przechwyci połączenie do Date.nowi zamiast tego zwracamy nową Date (). getTime () . To przechwycenie nazywa się shimmingiem. Odpowiedni kod źródłowy z es5-shim wygląda następująco:

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

Polyfill

Polyfilling to tak naprawdę tylko specjalna wersja shimingu. Polyfill polega na implementowaniu brakujących funkcji w interfejsie API, podczas gdy podkładka niekoniecznie musi dotyczyć zarówno implementacji brakujących funkcji, jak i poprawiania funkcji. Wiem, że wydaje się to zbyt niejasne, ale tam, gdzie podkładki są używane jako szerszy termin, polyfill jest używany do opisywania podkładek, które zapewniają wsteczną kompatybilność dla starszych przeglądarek. Podczas gdy podkładki są używane do zakrycia starych grzechów, wypełniacze są używane do przywrócenia przyszłych ulepszeń w czasie. Jako przykład nie ma obsługi sessionStorage w IE7, ale funkcja wypełniania w pakiecie npm sessionstorage doda tę funkcję w IE7 (i starszych) za pomocą technik takich jak przechowywanie danych we właściwości nazwy okna lub ciasteczka.

Kjetil Klaussen
źródło
107
Podczas gdy podkładki są używane do zakrycia starych grzechów, wypełniacze są używane do przywrócenia przyszłych ulepszeń w czasie. To wszystko podsumowuje dla mnie. Dziękuję za jasne wyjaśnienie.
JohnnyQ,
Ta odpowiedź jest pomocna, dzięki. Wydaje mi się jednak, że te dwa terminy często nie są używane dokładnie w Internecie, w tym w wersji es5-shim. Myślę, że według twojej definicji es5-shim to mieszanka podkładek i wypełnień.
Matt Browne,
WOW -> Tak więc podczas gdy podkładki służą do ukrywania starych grzechów, wypełniacze służą do przywracania przyszłych ulepszeń w czasie. <- Wielkie dzięki!
zeppelin
3
Przykład daty wygląda dla mnie jak polifill. Dlaczego myślę, że jest to Polyfill? Ponieważ Date.now jest rodzimym połączeniem. Polyfill doda tę funkcję z tym samym interfejsem API bezproblemowo w przeglądarce. Przekładka ma nowy interfejs API, taki jak: MyShim.Date.now(); Proszę mnie poprawić, jeśli się mylę.
TatzyXY,
99

Z tego co rozumiem:

Wielokrotne wypełnienie to kod, który wykrywa brak określonego „oczekiwanego” interfejsu API i ręcznie go implementuje. Na przykład

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

Podkładka dystansowa to kod, który przechwytuje istniejące wywołania interfejsu API i realizuje różne zachowania. Chodzi tutaj o znormalizowanie niektórych interfejsów API w różnych środowiskach. Jeśli więc dwie przeglądarki inaczej implementują ten sam interfejs API, możesz przechwytywać wywołania interfejsu API w jednej z tych przeglądarek i dopasowywać jego zachowanie do drugiej przeglądarki. Lub, jeśli przeglądarka ma błąd w jednym z interfejsów API, możesz ponownie przechwycić wywołania tego interfejsu API, a następnie obejść błąd.

Šime Vidas
źródło
66

Powołując się na Axela Rauschmayera z jego książki Speaking JavaScript :

  • Podkładka dystansowa to biblioteka, która wprowadza nowy interfejs API do starszego środowiska, używając tylko środków tego środowiska.
  • Polyfill to podkładka do interfejsu API przeglądarki. Zazwyczaj sprawdza, czy przeglądarka obsługuje interfejs API. Jeśli nie, polyfill instaluje własną implementację. To pozwala na użycie interfejsu API w obu przypadkach. Termin polyfill pochodzi od produktu do majsterkowania; według Remy Sharp :

    Polyfilla to produkt w Wielkiej Brytanii znany w USA pod nazwą Spackling Paste. Mając to na uwadze: pomyśl o przeglądarkach jak o ścianie z pęknięciami. Te [polypełniacze] pomagają wygładzić pęknięcia i dają nam ładną gładką ścianę przeglądarek do pracy.

Bergi
źródło
9

Podkładka. Podkładka dystansowa to biblioteka, która wprowadza nowy interfejs API do starszego środowiska, używając tylko środków tego środowiska.

Polyfill. W październiku 2010 roku Remy Sharp napisał na blogu o nazwie „polyfill” [przez Ricka Waldrona]:

Wielokrotne wypełnienie to fragment kodu (lub wtyczki), który zapewnia technologię, którą Ty, deweloper, oczekujesz od przeglądarki w sposób natywny. Spłaszczanie interfejsu API, jeśli chcesz.

Strzelec
źródło
8

Fantastyczny artykuł napisany na ten temat sprzed kilku lat, który dobrze to wyjaśnia:

Co to jest Polyfill?

W artykule (2) są po prostu przeciwstawione jako takie:

Shim: fragment kodu, który możesz dodać (tj. JavaScript), Który naprawiłby niektóre funkcje, ale najczęściej miałby własne API .

Wielokrotne wypełnianie: coś, w co można wpaść (tj. JavaScript), I po cichu działałoby naśladować istniejące interfejsy API przeglądarki , które w innym przypadku nie byłyby obsługiwane.

atconway
źródło
1
Myślę, że jest to myląca reprezentacja zarówno powszechnego użycia, jak i tego, co Remy Sharp tak naprawdę powiedział w poście na blogu, z którym prowadziłeś link. Shim jest najczęściej używany jako synonim PolyFill obecnie (patrz zwłaszcza ES5-podkładkę i ES6-podkładkę ) i Remy jest zwłaszcza o powiedzenie, że do niego słowo „podkładkę” nawiązywał do niestandardowego interfejsu API (w porównaniu z shim.gif). Bardzo nie dyktuje, aby używać tych słów w ten sposób, a mówiąc „do mnie” milcząco przyznaje, że jego użycie nie jest uniwersalne.
Mark Amery