HTML5 크로스 브라우저 폴리 플릴에 대한 초보자 가이드-JS 튜토리얼-php.cn

A Beginner's Guide to HTML5 Cross-Browser Polyfills 키 포인트

polyfill은 개발자가 최신 웹 기능을 지원하지 않는 이전 브라우저에서 이러한 기능을 사용할 수 있도록하여 이러한 브라우저의 사용자가 기능이나 경험을 잃지 않고도 웹 사이트에 여전히 액세스하고 사용할 수 있도록하는 도구입니다. <..> polyfill.io는 주문시 PolyFill 라이브러리를 제공하는 오픈 소스 프로젝트로, 개발자는 이전 브라우저와의 호환성을 유지하면서 최신 표준을 사용할 수 있습니다. 사용자 에이전트 HTTP 헤더를 읽고 필요한 폴리 필드 만 제공하여 최신 브라우저의 팽만감을 줄입니다.

PolyFill은 이전 브라우저에서 현대적인 기능을 활성화하는 데 도움이되지만 웹 페이지의 무게를 늘리는 것과 같은 잠재적 인 단점이 있습니다. 의도 된 목적으로 Polyfill의 기능은 불일치 또는 오류를 초래합니다.

웹 페이지가 빠르게 발전하고 있습니다. 새로운 프레임 워크, 도구, 심지어 언어조차도 떠오르고 있습니다. 그러나 많은 개발자들은 사용자의 가장 느린 속도로 앞으로 나아가 야한다고 생각합니다. 최신 브라우저는 "상록수"입니다. 백그라운드에서 자동으로 업데이트되고 권한 요청이 필요하며 새로운 API를 개선하는 데 큰 진전을 보였습니다.

그러나 최신 브라우저조차도 모든 기능을 동시에 구현하지는 않습니다. 현대 개발에서 최첨단 기술에 관한 기사를 읽는 것은 실망스럽고 이러한 기술은 앞으로 몇 년 동안 이용할 수 없다는 것을 알게됩니다. 아마도 웹 사이트의 분석 데이터를 확인한 후 아직도 IE9를 사용하는 사용자가 있습니까? 2011 년에했던 것처럼 코드를 작성하거나 jQuery 또는 일부 프레임 워크에 모든 것을 위임해야합니까? 다른 옵션이 있습니다. 그것은 polyfill 입니다. polyfill이란 무엇입니까? 왜 우리는 그들을 필요로합니까?

Remy Sharp는 2009 년 책과 블로그 게시물 에서이 용어를 만들었습니다. 이 기능이 브라우저에 존재하는 경우 PolyFill을 사용하면 브라우저가 작동하지 않으면 FolyFill이 누락 된 기능을 보충합니다. 오래된 브라우저의 취약성, 오늘날 사용하려는 누락 된 기능을 채 웁니다. 비 천연 코드를 사용하여 기본 API를 복사합니다.

우리가 말하는 누락 된 기능은 무엇입니까?

2009 년 ECMAScript 버전 5가 출시되었습니다. 이것은 언어의 거대하고 급진적 인 발전입니다. ECMAScript 2015도 비슷한 주요 업데이트를 가져 왔습니다. 앞으로이 언어의 개선은 점진적이며 매년 일어날 것입니다. 새로운 기능이 끊임없이 언어에 추가 된 흥미로운 시간입니다. 핵심 언어 자체 외에도 DOM 및 웹 플랫폼에 대한 다양한 API가 있습니다. 현대식 브라우저와 구형 브라우저의 차이점을 강조하기 위해 최신 Chrome 버전과 Internet Explorer 9 (일부 회사는 여전히 유감스럽게도 지원)를 비교하는 것이 있습니다. ECMAScript 6에 대한 지원을 보여주는 테이블도 있습니다. 두 번째 테이블은 IE 11로만 추적되며, 볼 수 있듯이 거의 ES6 기능이 없습니다. 이것은 많은 누락 된 함수입니다 ...

polyfill 및 번역 따라서 위의 표에서 코드를 번역해야한다는 것이 분명합니다. 반짝이는 새로운 구문과 구식 ECMAScript 5를 출력합니다. 화살표 기능을 사용하려면 Async/Await, Rest 및 Spread 매개 변수, 클래스 등을 사용하려면 코드에서 Babel과 같은 도구를 사용하여 ES6 코드를 ES5로 변환해야합니다. 그러나 JavaScript의 구문을 다리 채색 할 수 없습니다. Babel은 화살표 기능을 일반 기능으로 변환하는 반면 Polyfill은 글로벌 범위 및 기본 프로토 타입에 방법을 추가합니다. Babel은 Babel 웹 사이트에서 자체 ES6 PolyFill을 제공합니다. Babel 웹 사이트에서는 "Promise 또는 WeakMap과 같은 새로운 내장 객체, Array.From.From.From.Assign, Asray.Prototype.includes와 같은 인스턴스 방법 및 및 인스턴스 방법을 제공합니다. 발전기 함수 "Babel Polyfill은 우리가 원하는 모든 ES6 기능을 제공 할 수 있습니다. 그러나 그것은 많이 그리워요. 클래스리스트 API를 사용하여 클래스를 추가하고 제거하거나 미디어 쿼리에 MatchMedia를 사용하지만 여전히 IE9를 지원해야합니다. 다행스럽게도 Babel Polyfill 커버 등을 제공하는 서비스가 있습니다.

polyfill.io로 인생을 단순화하십시오 <.> polyfill.io는 Financial Times가 개발 한 오픈 소스 프로젝트입니다. 현재 하루에 최대 2 억 2 천만 건의 요청을 받고 있으며 그 자체는 "PolyFill의 사양 라이브러리"라고합니다. 이 주문형 폴리 필 시스템을 사용하면

를 사용할 수 있습니까?

를 사용할 수 있습니까? 최신 표준을 사용하여 구형 브라우저와 호환됩니다.

이상적으로, 우리는 실제로 사용한 폴리 필 기능 만 제공해야하며 특정 브라우저에 실제로 필요한 폴리 플릴 만 보내야합니다. polyfill.io는 두 요구를 모두 충족시킬 수 있습니다. 이 서비스는 사용자 에이전트 HTTP 헤더를 읽으므로 최신 브라우저에 블로 된 파일을 제공하지 않고 필요한 컨텐츠 만 제공합니다. 새 브라우저는 거의 빈 파일을 받고 이전 버전의 IE는 많은 코드를받습니다. 쿼리 문자열에서 사용중인 기능 목록을 지정하여 이전 시스템으로 전송 된 코드의 가중치를 줄일 수 있습니다. 생략하면 기본값 세트가 사용됩니다. 서비스를 사용하려면 추가 차단 HTTP 요청이 필요하지만 제 생각에는 사용의 용이성이 가치가 있습니다. Google 엔지니어 Philip Walton은 Polyfill 및 Performance에 대한 자체 관점을 가지고 있으며 추가 요청에 대해 걱정할 경우 읽을 가치가 있습니다.