hujung hadapan web
tutorial js
Bahagian Tepi modular Termasuk komponen untuk Pengiraan JavaScript
Bahagian Tepi modular Termasuk komponen untuk Pengiraan JavaScript
Pada musim panas 2022, rakan sepasukan saya Kailan bekerja pada peti Rust untuk Fastly Compute, melaksanakan subset bahasa templat Edge Side Includes (ESI) dan menerbitkan catatan blog tentang ia. Artikel ini penting bukan sahaja kerana kami mengeluarkan pustaka yang berguna, tetapi kerana ia merupakan ilustrasi cemerlang tentang perkara yang boleh dibawa oleh Compute kepada kami: kelebihan boleh atur cara dengan fungsi modular. Dan kini JavaScript telah tersedia secara umum di Compute selama lebih daripada setahun, sudah tiba masanya kami mempunyai penyelesaian yang sama untuk pengguna JavaScript kami. Pustaka ESI Fastly untuk JavaScript, kini tersedia pada npm, membolehkan anda menambah pemprosesan ESI yang berkuasa pada aplikasi anda.
Kebolehprograman dan Modulariti
Selama hampir sedekad, CDN Fastly telah mendapat sokongan untuk Edge Side Includes (ESI), bahasa templat yang berfungsi dengan mentafsir teg khas dalam sumber HTML anda. Ia berkisar pada teg
index.html
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
header.html
<header>Welcome to the web site</header>
output
<header>Welcome to the web site</header>Content
Apabila Compute memasuki pemandangan, landskap tepi berubah dalam dua cara utama: kebolehprograman dan modulariti.
Tidak lama selepas sokongan platform kami untuk Rust telah stabil, kami menerbitkan peti untuk Rust yang melaksanakan ESI, dan menambah kebolehprograman. Anda kini boleh mengkonfigurasi, menggunakan kod, cara membina permintaan bahagian belakang tambahan dan cara mengendalikan serpihan respons. Anda juga boleh melakukan pemprosesan ESI pada dokumen yang tidak berasal dari pelayan bahagian belakang. Kebolehprograman ini membezakannya daripada sokongan ESI yang kami ada dalam VCL, yang terhad kepada set tetap ciri yang kami tawarkan.
Pada masa yang sama, pendekatan ini sangat modular, memberikan pengaturcara pilihan untuk melaksanakan pemprosesan ESI ini atas dasar setiap permintaan, dan pilihan untuk menggabungkan pemprosesan dengan modul lain yang berfungsi dengan jenis data yang serasi dan digunakan mereka dalam sebarang susunan dan/atau keadaan logik yang dinyatakan.
Sasaran seterusnya: JavaScript
Sama seperti keluaran Rust kami, kami mahu pustaka JavaScript ini boleh diprogramkan. Sokongan JavaScript Fastly sentiasa menerima API Ambil dan API Streams pendampingnya. Satu ciri berguna bagi Streams API ialah antara muka TransformStream, membenarkan data untuk "disampaikan" melalui objek untuk menggunakan transformasi—sempurna untuk ESI. Dengan melaksanakan pemproses ESI sebagai pelaksanaan TransformStream, kami dapat menyesuaikannya terus ke dalam Aplikasi Pengiraan Cepat yang ditulis dalam JavaScript.
Berikut ialah cara anda boleh menstrim melaluinya:
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
Transformasi, yang kami panggil EsiTransformStream, digunakan pada strim secara langsung, mengurangkan kebimbangan memori dan prestasi. Ini bermakna:
- Tidak perlu menampan keseluruhan respons huluan sebelum menggunakan transformasi.
- Transformer menggunakan tindak balas huluan secepat mungkin dan memproses teg ESI apabila ia muncul dalam strim. Apabila pengubah selesai memproses setiap teg ESI, hasilnya dikeluarkan serta-merta ke hiliran, jadi kami dapat menahan penimbal yang mungkin minimum. Ini membolehkan pelanggan menerima bait pertama hasil yang distrim apabila ia sedia, tanpa perlu menunggu untuk diproses sepenuhnya.
Selain itu, reka bentuk ini adalah modular, menjadikan EsiTransformStream sebagai alat lain yang boleh anda gunakan bersama dengan perkara lain. Sebagai contoh, anda mungkin mempunyai transformasi lain yang anda ingin gunakan pada respons, seperti pemampatan, dan respons boleh disalurkan melalui mana-mana bilangan strim transformasi ini, kerana ia adalah antara muka standard sepenuhnya. Jika anda mahu, anda juga boleh mendayakan ESI secara bersyarat untuk permintaan atau respons tertentu sahaja, seperti pengepala permintaan, laluan atau jenis kandungan respons.
Begini cara anda membuat seketika EsiTransformStream:
<header>Welcome to the web site</header>
Pembina mengambil URL dan objek Pengepala, dan secara pilihan mengambil beberapa pilihan sebagai parameter ketiga. Seperti yang diterangkan sebelum ini, fungsi utama ESI ialah memuat turun templat tambahan, untuk dimasukkan ke dalam strim yang dihasilkan. Menghadapi
- URL digunakan untuk menyelesaikan laluan relatif dalam src
- Pengepala digunakan semasa membuat permintaan tambahan untuk mengambil templat.
- Objek konfigurasi pilihan boleh digunakan untuk mengatasi gelagat pengambilan yang dibuat dan untuk menggunakan gelagat tersuai lain, seperti cara memproses templat yang diambil dan pengendalian ralat tersuai.
Dalam kes paling mudah, anda hanya akan menggunakan nilai pengambilan objek konfigurasi. Jika anda tidak menyediakannya, maka ia menggunakan fungsi pengambilan global sebaliknya, tetapi dalam Kira anda memerlukannya untuk menentukan hujung belakang untuk pengambilan untuk digunakan apabila menyertakan templat (melainkan anda menggunakan ciri hujung belakang dinamik). Contoh coretan di atas memberikan bahagian belakang bernama origin_0 sebelum memanggil pengambilan global.
Itu sahaja! Dengan persediaan mudah ini, anda boleh mempunyai bahagian belakang yang menyajikan teg ESI dan aplikasi Compute yang memprosesnya. Berikut ialah contoh penuh yang boleh anda jalankan:
Sokongan untuk ciri ESI
Pelaksanaan ini menawarkan lebih banyak ciri ESI daripada yang lain yang kami sediakan pada masa lalu.
Ralat pengendalian
Kadangkala, fail yang dirujuk oleh
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
Jika /templates/header.html menyebabkan ralat, pemproses ESI secara senyap mengabaikan ralat dan menggantikan keseluruhan
Anda juga boleh menggunakan pengendalian ralat yang lebih berstruktur dengan menggunakan
<header>Welcome to the web site</header>
Pemproses ESI mula-mula melaksanakan kandungan
Adalah penting untuk ambil perhatian bahawa keseluruhan
bersyarat
ESI juga membenarkan pelaksanaan bersyarat, dengan melakukan semakan masa jalan pada pembolehubah. Berikut ialah contoh cek sedemikian:
<header>Welcome to the web site</header>Content
Apabila pemproses menemui
Pemproses menyediakan set pembolehubah terhad, yang berdasarkan terutamanya pada kuki permintaan. Dalam contoh di atas, kuki HTTP dengan nama "kumpulan" disemak untuk nilainya. Pelaksanaan kami adalah berdasarkan spesifikasi bahasa ESI; rujuk padanya untuk butiran lanjut.
Senarai tag dan ciri yang disokong
Pelaksanaan ini menyokong teg berikut bagi spesifikasi bahasa ESI.
- esi:termasuk
- esi:ulasan
- esi:alih keluar
- esi:cuba / esi:percubaan / esi:kecuali
- esi:pilih / esi:bila / esi:sebaliknya
- esi:vars
Pembolehubah ESI disokong dalam atribut teg ESI dan Ungkapan ESI disokong dalam atribut ujian
Tingkah laku tersuai bermakna kemungkinan yang tidak berkesudahan
Walaupun set ciri cukup untuk teruja, bahagian yang benar-benar menarik untuk boleh diprogramkan ialah lebih banyak perkara boleh dilakukan. Membawa masuk templat ialah penggunaan utama ESI, tetapi itu bukan semua yang boleh dilakukannya. Ini contohnya.
Pertimbangkan anda mempunyai cap masa yang ditandakan dalam dokumen anda yang anda mahu diwakili sebagai tarikh relatif apabila ia dipaparkan, seperti "2 hari yang lalu". Terdapat banyak cara untuk melakukan ini, tetapi untuk mempunyai prestasi terbaik dan implikasi ingatan, adalah bagus untuk melakukan pencarian/gantian dalam strim. Pengaturcaraan perpustakaan ESI ini sebenarnya boleh digunakan sebagai pilihan yang baik untuk melakukan ini.
Kami boleh menentukan cap masa untuk dikodkan dalam dokumen hujung belakang anda menggunakan teg ESI yang dibuat khas dalam format seperti berikut:
<body> <esi:include src="./header.html" /> <main> Content </main> </body>
Sebagai contoh, coretan ini boleh mewakili tengah malam pada 1 Januari 2024, waktu Pasifik:
<header>Welcome to the web site</header>
Sekarang, sediakan EsiTransformStream untuk menyediakan dokumen gantian sintetik apabila ia melihat corak URL itu:
<header>Welcome to the web site</header>Content
Sekarang, apabila pemproses menemui contoh coretan di atas, ia akan mengeluarkan hasil yang serupa dengan yang berikut (bergantung pada berapa hari ke hadapan anda menjalankannya):
const transformedBody = resp.body.pipeThrough(esiTransformStream);
return new Response(
transformedBody,
{
status: resp.status,
headers: resp.headers,
},
);
Oleh kerana dokumen bahagian belakang boleh dicache oleh Fastly, permintaan masa hadapan boleh mendapat manfaat daripada HIT cache, manakala pemprosesan akan terus memaparkan masa relatif yang dikemas kini.
Untuk contoh langsung ini, lihat biola berikut:
Ambil pusing!
@fastly/esi kini tersedia di npm, sedia untuk ditambahkan pada mana-mana program JavaScript. Gunakannya di tepi dalam program Fastly Compute anda, sudah tentu, tetapi sebenarnya, ia juga berfungsi di luar Compute, selagi persekitaran anda menyokong API pengambilan. Kod sumber penuh tersedia di GitHub.
Mulakan dengan mengklon salah satu Fiddles di atas dan mengujinya dengan asal-usul anda sendiri, walaupun sebelum anda membuat akaun Fastly. Apabila anda bersedia untuk menerbitkan perkhidmatan anda pada rangkaian global kami, anda boleh mendaftar untuk percubaan percuma Compute dan kemudian mulakan segera dengan perpustakaan ESI pada npm.
Dengan Compute, kelebihan boleh diprogramkan dan modular – pilih dan gabungkan penyelesaian yang paling sesuai untuk anda, atau bina sendiri. Kami bukan satu-satunya yang boleh menyediakan modul seperti ini untuk Compute. Sesiapa sahaja boleh menyumbang kepada ekosistem dan mengambil daripadanya. Dan, seperti biasa, temui kami di forum komuniti Fastly dan beritahu kami perkara yang telah anda bina!
Atas ialah kandungan terperinci Bahagian Tepi modular Termasuk komponen untuk Pengiraan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Demystifying JavaScript: Apa yang berlaku dan mengapa penting
Apr 09, 2025 am 12:07 AM
JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido?
atau:
Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido?
Apr 04, 2025 pm 05:36 PM
Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...
Adakah JavaScript sukar belajar?
Apr 03, 2025 am 12:20 AM
Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.
Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan
Apr 10, 2025 am 09:33 AM
Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.
Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript?
Apr 04, 2025 pm 05:09 PM
Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...
Operasi Asynchronous Zustand: Bagaimana untuk memastikan keadaan terkini yang diperoleh oleh Usestore?
Apr 04, 2025 pm 02:09 PM
Masalah kemas kini data dalam operasi Zustand Asynchronous. Apabila menggunakan Perpustakaan Pengurusan Negeri Zustand, anda sering menghadapi masalah kemas kini data yang menyebabkan operasi tak segerak menjadi tidak lama lagi. � ...
