Jakie jest znaczenie wypełniania w HTML5?

387

Jakie jest znaczenie wypełniania w HTML5? Widziałem to słowo na wielu stronach o HTML5, np. HTML5-Cross-Browser-Polyfills.

Więc tutaj zbieramy wszystkie podkładki, awarie i wypełnienia, aby zaimplementować funkcjonalność HTML5 w przeglądarkach, które nie obsługują ich natywnie.

Właściwie nie rozumiem, co to znaczy polypełniacze.

Czy to nowa technika HTML5 czy biblioteka JavaScript? Nigdy nie słyszałem tego słowa przed HTML5.

Jaka jest różnica między podkładkami, awariami i wypełniaczami?

javascript html fallback polyfills shim Jitendra Vyas
źródło
1
Możesz sprawdzić, aby lepiej zrozumieć blogs.msdn.com/b/jennifer/archive/2011/08/04/…
@ user3400622 Dzięki za link, wyjaśnienie w linku jest bardzo jasne.
Andrew Lam

Odpowiedzi:

377

Wielokrotne wypełnianie jest rezerwową wersją przeglądarki, wykonaną w JavaScript, która pozwala na funkcjonalność, której oczekujesz w nowoczesnych przeglądarkach, na działanie w starszych przeglądarkach, np. W celu obsługi kanwy (funkcja HTML5) w starszych przeglądarkach.

Jest to swego rodzaju technika HTML5, ponieważ jest używana w połączeniu z HTML5, ale nie jest częścią HTML5, i możesz mieć wypełnienia bez HTML5 (na przykład w celu obsługi pożądanych technik CSS3).

Oto dobry post:

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

Oto pełna lista Polyfillów i podkładek:

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

Calvin Froedge
źródło
6
To znaczy, że ie7.js jest również polifillem
Vyas
1
Tak: „Wiele poprawek, w tym przezroczystość PNG, style / selektory CSS, poprawki błędów renderowania itp.” Dodaje tę funkcję za pomocą javascript, której przeglądarka jeszcze nie obsługuje.
Calvin Froedge,
1
Myślę, że słowo Polyfills pojawiło się po HTML5. Czy Shim różni się od Polyfills?
Jitendra Vyas,
16
Podkładka dystansowa jest bardziej uogólniona. Polyfill jest rodzajem podkładki. Oto pytanie, które dobrze to wyjaśnia: stackoverflow.com/questions/6599815/…
Calvin Froedge
6
remysharp.com/2010/10/08/what-is-a-polyfill ten link jest czymś więcej niż tylko „dobrym postem”, to w rzeczywistości pełna definicja i pochodzenie słowa przez osobę, która je utworzyła. Fragment: „produkt Polyfilla (spakowanie w USA) to pasta, którą można nakładać na ściany, aby zakryć pęknięcia i dziury”. Słup obejmuje również koncepcję, która poprzedza podkładkę dystansową i różni się od wypełniacza. To trzeba przeczytać, IMO.
kodowanie
64

Najpierw wyjaśnijmy, czym nie jest polyfil: wypełnienie nie jest częścią standardu HTML5. Wielokrotne wypełnienie nie ogranicza się również do Javascript, nawet jeśli w tych kontekstach często pojawia się odniesienie.

Sam termin polyfill odnosi się do jakiegoś kodu, który „pozwala mieć określoną funkcjonalność, której oczekujesz w obecnych lub„ nowoczesnych ”przeglądarkach, aby działała również w innych przeglądarkach, które nie mają wbudowanej obsługi tej funkcji”.

Źródło i przykład wypełnienia tutaj:

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

Jarvis
źródło
31

Wielokrotne wypełnienie to fragment kodu (lub wtyczki), który zapewnia technologię, którą Ty, deweloper, oczekujesz od przeglądarki w sposób natywny.

Ranjeet Mane
źródło
2
Dobrze wyjaśnione.
Eugen Sunic,
16

Polyfill to podkładka zastępcza, która zastępuje oryginalne wezwanie wezwaniem do podkładki.

Powiedzmy, że chcesz użyć obiektu navigator.mediaDevices, ale nie wszystkie przeglądarki obsługują to. Możesz sobie wyobrazić bibliotekę, która zapewnia podkładkę, której możesz użyć w następujący sposób:

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

W takim przypadku jawnie wywołujesz podkładkę zamiast używać oryginalnego obiektu lub metody. Z drugiej strony, wypełniacz zastępuje obiekty i metody na obiektach oryginalnych.

Na przykład:

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

W twoim kodzie wygląda to tak, jakbyś używał standardowego obiektu navigator.mediaDevices. Ale tak naprawdę polyfill (w tym przykładzie adapter.js) zastąpił ten obiekt własnym.

Ten, który zastąpił, to podkładka dystansowa. Wykryje to, czy funkcja jest natywnie obsługiwana i użyje jej, jeśli jest, lub obejdzie ją przy użyciu innych interfejsów API, jeśli nie jest.

Zatem wypełnienie jest rodzajem „przezroczystego” podkładki. I to właśnie miał na myśli Remy Sharp (który ukuł ten termin) mówiąc: „ jeśli usuniesz skrypt wypełniania, kod będzie działał, bez żadnych zmian wymaganych pomimo usunięcia wypełnienia ”.

Richard Shepherd
źródło
9
co to jest shim?
Oliver Watkins
3
@Oliver Watkins Jeśli znasz wzór adaptera, to wiesz, czym jest podkładka. 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
Anurag Ratna
@AnuragRatna Nie użyłbym „przechwytywania”, aby uniknąć nieporozumień. Przechwytywanie zwykle odnosi się do kodu, który (transparentnie) przechwytuje, tj. Bez wiedzy dzwoniącego. Podkładki podają wywołania API dla kompatybilności wstecznej
Qetesh