urlpattern polyfill
1.0.0
URLPattern은 URL과 일치하는 새로운 웹 API입니다. 웹 개발자에게 편리한 API를 제공하고 URL과 일치 해야하는 다른 웹 API에서 사용할 수 있도록 의도되었습니다. 예를 들어 서비스 근로자. 설명자는 동기 부여 사용 사례에 대해 설명합니다.
이것은 URLPattern API의 폴리 필로이 기능을 기본적으로 지원하지 않는 브라우저에서 사용할 수 있도록합니다. 이 Polyfill은 동일한 웹 플랫폼 테스트 스위트를 통과합니다.
PolyFill은 브라우저 (ESM 모듈) 및 Node.js에서 가져 오기 (ESM 모듈) 또는 요구 사항 (CJS 모듈)에서 작동합니다.
Polyfill은 URLPattern이 Global Object에 아직 존재하지 않는 경우에만로드 되며이 경우 전역 객체에 추가됩니다.
// Conditional ESM module loading (Node.js and browser)
// @ts-ignore: Property 'UrlPattern' does not exist
if ( ! globalThis . URLPattern ) {
await import ( "urlpattern-polyfill" ) ;
}
/**
* The above is the recommended way to load the ESM module, as it only
* loads it on demand, thus when not natively supported by the runtime or
* already polyfilled.
*/
import "urlpattern-polyfill" ;
/**
* In case you want to replace an existing implementation with the polyfill:
*/
import { URLPattern } from "urlpattern-polyfill" ;
globalThis . URLPattern = URLPattern 메모:
일부 환경에는
// @ts-ignore: Property 'UrlPattern' does not exist폴리 필드를로드하기 전에 사용할 수없고 IF 문의 기능 검사는 TypeScript 오류를 제공하기 때문에 일부 환경에는 필요하지 않습니다. 전체 아이디어는 그것이 없을 때로드된다는 것입니다.
// Conditional CJS module loading (Node.js)
if ( ! globalThis . URLPattern ) {
require ( "urlpattern-polyfill" ) ;
}
/**
* The above is the recommended way to load the CommonJs module, as it only
* loads it on demand, thus when not natively supported by the runtime or
* already polyfilled.
*/
require ( "urlpattern-polyfill" ) ;
/**
* In case you want to replace an existing implementation with the polyfill:
*/
const { URLPattern } = require ( "urlpattern-polyfill" ) ; ;
globalThis . URLPattern = URLPattern 메모:
폴리 필드를 어떻게로드하든 환경에 구현이 없을 때 항상 글로벌 객체에 추가됩니다.
let p = new URLPattern ( { pathname : '/foo/:name' } ) ;
let r = p . exec ( 'https://example.com/foo/bar' ) ;
console . log ( r . pathname . input ) ; // "/foo/bar"
console . log ( r . pathname . groups . name ) ; // "bar"
let r2 = p . exec ( { pathname : '/foo/baz' } ) ;
console . log ( r2 . pathname . groups . name ) ; // "baz" // Match same-origin jpg or png URLs.
// Note: This uses a named group to make it easier to access
// the result later.
const p = new URLPattern ( {
pathname : '/*.:filetype(jpg|png)' ,
baseURL : self . location
} ) ;
for ( let url in url_list ) {
const r = p . exec ( url ) ;
// skip non-matches
if ( ! r ) {
continue ;
}
if ( r . pathname . groups [ 'filetype' ] === 'jpg' ) {
// process jpg
} else if ( r . pathname . groups [ 'filetype' ] === 'png' ) {
// process png
}
}이 경우 패턴은 BaseUrl을 떠나서 원점 점검없이 더 간단하게 만들 수 있습니다.
// Match any URL ending with 'jpg' or 'png'.
const p = new URLPattern ( { pathname : '/*.:filetype(jpg|png)' } ) ; URLPattern 객체를 초기화하기위한 "짧은 형식"도 지원할 계획입니다. 이것은 폴리 필드에 의해 지원되지만 아직 크롬 구현에 의해 지원되지는 않습니다.
예를 들어:
const p = new URLPattern ( "https://*.example.com/foo/*" ) ;또는:
const p = new URLPattern ( "foo/*" , self . location ) ;TypeScript 유형 주석이 포함 된 API 개요는 아래에 있습니다. 관련 브라우저 웹 IDL은 여기에서 찾을 수 있습니다.
type URLPatternInput = URLPatternInit | string ;
class URLPattern {
constructor ( init ?: URLPatternInput , baseURL ?: string ) ;
test ( input ?: URLPatternInput , baseURL ?: string ) : boolean ;
exec ( input ?: URLPatternInput , baseURL ?: string ) : URLPatternResult | null ;
readonly protocol : string ;
readonly username : string ;
readonly password : string ;
readonly hostname : string ;
readonly port : string ;
readonly pathname : string ;
readonly search : string ;
readonly hash : string ;
}
interface URLPatternInit {
baseURL ?: string ;
username ?: string ;
password ?: string ;
protocol ?: string ;
hostname ?: string ;
port ?: string ;
pathname ?: string ;
search ?: string ;
hash ?: string ;
}
interface URLPatternResult {
inputs : [ URLPatternInput ] ;
protocol : URLPatternComponentResult ;
username : URLPatternComponentResult ;
password : URLPatternComponentResult ;
hostname : URLPatternComponentResult ;
port : URLPatternComponentResult ;
pathname : URLPatternComponentResult ;
search : URLPatternComponentResult ;
hash : URLPatternComponentResult ;
}
interface URLPatternComponentResult {
input : string ;
groups : {
[ key : string ] : string | undefined ;
} ;
}여기의 Pattern Syntax는 인기있는 경로 대 레지스 라이브러리에서 사용되는 내용을 기반으로합니다.
"/" 문자입니다.":" 문자와 이름으로 시작합니다. 예를 들어, "/:foo/:bar" 에는 두 개의 명명 된 그룹이 있습니다."/:foo(.*)" 다음 분배기와 일치하는 기본값을 무시합니다."?" 입니다. , "*" 또는 "+" 기능은 정기적 인 표현식에서와 마찬가지로 기능합니다. 그룹이 선택적이거나 반복되고 분배기가 앞에있을 때 분배기도 선택 사항이거나 반복됩니다. 예를 들어, "/foo/:bar?" "/foo" , "/foo/" 또는 "/foo/baz" 와 일치합니다. 분배기를 탈출하면 대신 필요합니다."(.*)" (소위 이름없는 그룹)을 사용하여 분배기 전체에 걸쳐 캐릭터를 탐욕스럽게 일치시키는 방법.현재 우리는 경로 대 레지스와의 알려진 차이점을 가질 계획입니다.
URL은 ASCII를 기반으로하는 표준 형식을 가지고 있으며, 이는 국제화 된 도메인 이름 (호스트 이름)에도 표준 ASCII 기반 표현이 있으며 hash , search 및 pathname 과 같은 다른 구성 요소는 백분율 인코딩을 사용하여 인코딩됨을 의미합니다.
현재 URLPattern 패턴의 인코딩 또는 정규화를 수행하지 않습니다. 따라서 개발자는 패턴을 생성자로 전달하기 전에 URL 유니 코드 문자를 인코딩해야합니다. 마찬가지로, 생성자는 /foo/../bar to /bar와 같은 평평한 패스 이름과 같은 작업을 수행하지 않습니다. 현재 패턴은 표준 URL 출력을 수동으로 대상으로 작성해야합니다.
그러나 test() 및 exec() 입력에 대해 이러한 작업을 수행합니다.
인코딩 구성 요소는 수동으로 쉽게 수행 할 수 있지만 패턴 구문을 인코딩하지는 않습니다.
encodeURIComponent ( "?q=æøå" )
// "%3Fq%3D%C3%A6%C3%B8%C3%A5" new URL ( "https://ølerlækkernårdetermit.dk" ) . hostname
// "xn--lerlkkernrdetermit-dubo78a.dk"https://github.com/intel의 인텔 메신저 오픈 소스 프로젝트를 통한 보안 문제 또는 취약성에 대한 정보가 있으면 보안 @intel.com으로 이메일을 보내주십시오. PGP 공개 키를 사용하여 민감한 정보를 암호화합니다. 인텔 제품과 관련된 문제는 https://security-center.intel.com을 방문하십시오.
