JavaScript에서 폴리필을 사용하는 방법은 무엇입니까?

JavaScript 개발자는 성능을 향상하고 더 나은 기능을 추가하기 위해 항상 JavaScript 언어에 새로운 기능을 추가하고 있습니다. 때로는 이전 브라우저 버전이 새로운 기능을 지원하지 않는 경우가 있습니다.

예를 들어, 지수 연산자는 ES7에서 도입되었으며 객체의 후행 쉼표도 ES7에서 유효합니다. 이제 애플리케이션을 개발하는 동안 애플리케이션에 지수 연산자를 추가했습니다. 최신 버전의 브라우저에서는 작동하지만 누군가 아주 오래된 버전의 브라우저를 사용하는 경우 브라우저 엔진이 지수 연산자를 지원하지 않는 등의 오류가 발생할 수 있습니다.

그래서 polyfill을 사용하면 이 오류를 피할 수 있습니다. 의미를 이해하기 위해 폴리필이라는 단어를 두 부분으로 나누어 보겠습니다. 폴리(Poly)는 많다는 뜻이고, 채우기(Fill)는 빈칸을 채우는 것을 의미합니다. 이는 브라우저가 JavaScript의 기본 기능을 지원하지 않는 경우 브라우저 기능의 공백을 메우기 위해 다양한 기술이 필요하다는 것을 의미합니다.

브라우저가 해당 기능을 지원하지 않는 문제를 해결하는 방법은 두 가지가 있습니다. 하나는 폴리필이고 다른 하나는 트랜스파일러입니다. 변환기는 브라우저가 지원할 수 있도록 코드를 낮은 버전으로 변환합니다. 예를 들어, ES7 버전의 JavaScript로 코드를 작성한 다음 트랜스파일러를 사용하여 이전 브라우저에서 지원되도록 ES6 또는 ES5로 변환할 수 있습니다.

여기에서는 폴리필 개념을 사용하는 다양한 예를 배웁니다.

문법

사용자는 다음 구문에 따라 폴리필 개념을 사용하여 JavaScript 메서드를 수동으로 구현할 수 있습니다.

으아악

위 구문에서 문자열 프로토타입에 메서드를 추가했습니다. method_name은 메소드 이름을 나타냅니다. 여러 매개변수가 있는 함수를 메소드에 할당합니다.

예제 1(폴리필이 없는 Includes() 메서드)

아래 예에서는 String 객체의 내장 contain() 메서드를 사용했습니다. 문자열을 정의하고 include() 메서드를 사용하여 문자열에 특정 단어나 하위 문자열이 포함되어 있는지 확인했습니다.

으아악

예제 2(폴리필을 사용한 include() 메서드)

위의 예에서는 내장된 include() 메서드를 사용했습니다. 이 예에서는 include() 메서드에 대한 폴리필을 정의합니다. include() 메소드를 지원하지 않는 브라우저가 있는 경우 사용자 정의 include() 메소드를 실행합니다.

여기서는 문자열 객체의 프로토타입에 include() 메서드를 추가합니다. 함수에서 검색 문자열이 정규식 유형인 경우 오류가 발생합니다. 또한 "pos" 매개변수는 옵션이므로 사용자가 전달하지 않으면 nil로 처리됩니다. 마지막으로 indexof() 메서드를 사용하여 문자열에 단어가 포함되어 있는지 확인하고 결과에 따라 부울 값을 반환합니다.

으아악

예제 3(filter() 메서드에 대한 폴리필 구현)

아래 예에서는 filter() 메서드에 대한 폴리필을 구현했습니다. 먼저 참조 배열이 비어 있지 않고 콜백이 함수인지 확인합니다. 그런 다음 배열을 반복하고 각 배열 값에 대해 콜백 함수를 실행합니다. 콜백 함수가 true를 반환하면 이를 출력 배열로 푸시합니다. 마지막으로 필터링된 값이 포함된 출력 배열을 반환합니다. ​

으아악

이 튜토리얼에서는 include() 및 filter() 메서드에 대한 폴리필을 구현하는 방법을 알려줍니다. 그러나 사용자는 if-else 문을 사용하여 브라우저가 특정 방법을 지원하는지 확인할 수 있습니다. 그렇지 않은 경우 사용자 정의 메소드가 실행되고, 그렇지 않으면 내장 메소드가 실행됩니다.

위 내용은 JavaScript에서 폴리필을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!