urlpattern polyfill
1.0.0
UrlPattern adalah API Web baru untuk mencocokkan URL. Ini dimaksudkan untuk memberikan API yang nyaman bagi pengembang web dan dapat digunakan di API web lain yang perlu mencocokkan URL; misalnya pekerja layanan. Penjelajah membahas kasus penggunaan yang memotivasi.
Ini adalah polyfill untuk API urlpattern sehingga fitur tersedia di browser yang tidak mendukungnya secara asli. Polyfill ini melewati suite tes platform web yang sama.
Polyfill bekerja di browser (modul ESM) dan di node.js baik melalui impor (modul ESM) atau melalui Modul Persyaratan (Modul CJS).
Polyfill hanya akan dimuat jika urlpattern belum ada pada objek global, dan dalam hal ini akan menambahkannya ke objek global.
// 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 Catatan:
Garis dengan
// @ts-ignore: Property 'UrlPattern' does not existdi beberapa lingkungan karena sebelum Anda memuat polyfill, mungkin tidak tersedia, dan periksa fitur dalam pernyataan IF memberikan kesalahan TypeScript. Seluruh idenya adalah bahwa ia memuat saat tidak ada di sana.
// 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 Catatan:
Tidak peduli bagaimana Anda memuat polyfill, ketika tidak ada implementasi di lingkungan Anda, itu akan selalu menambahkannya ke objek global.
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
}
}Pola dalam kasus ini dapat dibuat lebih sederhana tanpa cek asal dengan meninggalkan baseurl.
// Match any URL ending with 'jpg' or 'png'.
const p = new URLPattern ( { pathname : '/*.:filetype(jpg|png)' } ) ; Kami berencana untuk juga mendukung "formulir pendek" untuk menginisialisasi objek urlpattern. Ini didukung oleh polyfill tetapi belum oleh implementasi kromium.
Misalnya:
const p = new URLPattern ( "https://*.example.com/foo/*" ) ;Atau:
const p = new URLPattern ( "foo/*" , self . location ) ;Tinjauan API dengan Anotasi Jenis TypeScript ditemukan di bawah ini. IDL Web browser terkait dapat ditemukan di sini.
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 ;
} ;
}Sintaks pola di sini didasarkan pada apa yang digunakan dalam perpustakaan path-to-regexp yang populer.
"/" .":" dan kemudian nama. Misalnya, "/:foo/:bar" memiliki dua grup bernama."/:foo(.*)" akan mengesampingkan default pencocokan dengan pembagi berikutnya."?" , "*" , atau "+" berfungsi seperti yang mereka lakukan dalam ekspresi reguler. Ketika suatu kelompok opsional atau diulang dan didahului oleh pembagi maka pembagi juga opsional atau diulang. Misalnya, "/foo/:bar?" akan cocok dengan "/foo" , "/foo/" , atau "/foo/baz" . Melarikan diri dari pembagi akan membuatnya diperlukan sebagai gantinya."(.*)" (Yang disebut kelompok yang tidak disebutkan namanya).Saat ini kami berencana untuk memiliki perbedaan yang diketahui dengan path-to-regexp:
URL memiliki bentuk kanonik yang didasarkan pada ASCII, yang berarti bahwa nama domain terasionalisasi (nama host) juga memiliki representasi berbasis ASCII kanonik, dan bahwa komponen lain seperti hash , search dan pathname dikodekan menggunakan pengkodean persen.
Saat ini URLPattern tidak melakukan pengkodean atau normalisasi pola. Jadi pengembang perlu URL mengkode karakter unicode sebelum meneruskan pola ke dalam konstruktor. Demikian pula, konstruktor tidak melakukan hal -hal seperti meratakan nama path seperti /foo/../bar ke /bar. Saat ini pola harus ditulis untuk menargetkan output URL kanonik secara manual.
Namun, ia melakukan operasi ini untuk input test() dan exec() .
Komponen pengkodean dapat dengan mudah dilakukan secara manual, tetapi tidak mengkode sintaks pola:
encodeURIComponent ( "?q=æøå" )
// "%3Fq%3D%C3%A6%C3%B8%C3%A5" new URL ( "https://ølerlækkernårdetermit.dk" ) . hostname
// "xn--lerlkkernrdetermit-dubo78a.dk"Jika Anda memiliki informasi tentang masalah keamanan atau kerentanan dengan proyek open source yang dipertahankan Intel di https://github.com/intel, silakan kirim email ke [email protected]. Mengenkripsi informasi sensitif menggunakan kunci publik PGP kami. Untuk masalah yang terkait dengan produk Intel, silakan kunjungi https://security-center.intel.com.
