uce template
1.0.0
Foto media sosial oleh Federico Bottos di Unsplash
Perpustakaan Tiny Toolless dengan alat yang disertakan. Demo langsung
Silakan ajukan pertanyaan dalam repositori diskusi khusus, untuk membantu masyarakat di sekitar proyek ini tumbuh ♥
Terinspirasi oleh Vue 3 " One Piece ", UCE-Template menyediakan elemen <template> builtin khusus untuk mendefinisikan komponen dengan cara Vue .
< template is =" uce-template " >
< style scoped >
span { color: green }
</ style >
< the-green >
The < span > {{thing}} </ span > is green
</ the-green >
< script type =" module " >
export default {
setup ( ) {
return { thing : 'world' }
}
}
</ script >
</ template >Tambahkan pustaka ini ke persamaan, dan lihat itu bootstrap semua komponen yang ditentukan.
<template lazy> komponen, untuk menyelesaikan definisi mereka hanya saat hidup<custom-element shadow> Komponen, dan secara opsional Shadow <style shadow> Styles@uce virtual, untuk membuat UI reaktif dan banyak lagiresolve(name, module) yang diekspor Sementara itu disarankan untuk menginstal CLI secara global, karena beberapa ketergantungan yang tidak lebih ringan, itu masih merupakan perintah npx :
# check all options and usage
npx uce-template --help
# works with files
npx uce-template my-component.html
# works with stdin
cat my-component.html | uce-templateItu saja, tapi tentu saja kita harus yakin bahwa tata letak yang diproduksi masih berfungsi seperti yang diharapkan?
Setiap templat yang memperluas uce-template harus berisi setidaknya elemen khusus di dalamnya, baik reguler, atau perpanjangan bawaan:
<!-- register regular-element -->
< template is =" uce-template " >
< regular-element >
regular
</ regular-element >
</ template >
<!-- register builtin-element as div -->
< template is =" uce-template " >
< div is =" builtin-element " >
builtin
</ div >
</ template > Template apa pun mungkin berisi tag <script> tunggal, dan/atau satu atau lebih definisi <style> .
Jika komponen berisi {{slot.name}} definisi, node dari HTML yang hidup, sebelum komponen ditingkatkan, akan ditempatkan di sana setelah hidup.
Lihat contoh langsung ini untuk lebih memahami.
Setiap " komponen " dapat mendefinisikan dirinya dengan, atau tanpa, konten statis, atau dinamisnya sendiri.
Konten semacam itu akan digunakan untuk membuat setiap elemen khusus setelah " dipasang " (hidup) dan per setiap perubahan keadaan reaktif, tetapi hanya jika template tidak kosong.
Semua bagian dinamis harus dibungkus di dalam {{dynamic}} braket keriting seperti yang ditunjukkan di sini:
< my-counter >
< button onclick = {{dec}} > - </ button >
< span > {{state.count}} </ span >
< button onclick = {{inc}} > + </ button >
</ my-counter > Referensi state , dec , dan inc akan diteruskan melalui node skrip, jika ada.
Setiap kali komponen diterjemahkan, panggilan pembaruannya dipanggil memberikan elemen itu sendiri sebagai konteks .
< button is =" my-button " >
I am a {{this.tagName}}
</ button >Mengenai bayangan , polyfillnya tidak termasuk dalam proyek ini tetapi dimungkinkan untuk mendefinisikan komponen melalui akar bayangannya dengan menambahkan atribut bayangan :
< my-counter shadow >
<!-- this content will be in the shadowRoot -->
< button onclick = {{dec}} > - </ button >
< span > {{state.count}} </ span >
< button onclick = {{inc}} > + </ button >
</ my-counter > Atribut shadow open secara default, tetapi juga dapat ditentukan sebagai shadow=closed .
Mengenai {{JS}} , jika atribut, dan Anda ingin menggunakan {{ JS }} spasi di sekitar, atribut harus dalam kutipan, jika tidak template html memecahkan tata letak dengan cara yang tidak terduga.
<!-- OK -->
< my-counter >
< button onClick = {{dec}} > - </ button >
</ my-counter >
<!-- OK -->
< my-counter >
< button onClick =" {{ dec }} " > - </ button >
</ my-counter >
<!-- IT BREAKS!!! -->
< my-counter >
< button onClick = {{ dec }} > - </ button >
</ my-counter ><!--{{interpolation}}--> caseKarena semua yang ada di sini sebagian besar didasarkan pada perilaku HTML standar, ada kasus di mana interpolasi harus dibungkus sebagai komentar.
Aturan praktisnya adalah bahwa jika Anda tidak melihat tata letak, atau Anda membaca beberapa kesalahan template yang buruk , ada kemungkinan bahwa interpolasi Anda dapat ditelan oleh elemen template .
Ini terjadi sebagian besar dengan elemen -elemen seperti Tabel , Pilih , dan elemen -elemen lain yang hanya menerima jenis simpul anak tertentu, tetapi bukan teks.
<!-- ? this won't work as expected -->
< table is =" my-table " >
< tbody > {{rows}} </ tbody >
</ table >
<!-- ? this works ? -->
< table is =" my-table " >
< tbody > <!--{{rows}}--> </ tbody >
</ table > Dalam kasus pertama, <tbody> akan mengabaikan simpul apa pun yang bukan <tr> kecuali untuk komentar , karena komentar tidak tertelan, atau hilang, dalam prosesnya.
Anda dapat melihat definisi file dbmonster.html untuk komponen <table> khusus dan komponen <tr> khusus.
Komponen dapat memiliki satu atau lebih gaya di dalamnya, dalam ruang lingkup tertentu:
<style> akan menerapkan kontennya secara global, berguna untuk membahas kasus my-counter + my-counter {...} sebagai contoh<style scoped> akan menerapkan kontennya diawali dengan nama elemen khusus (yaitu my-counter span, my-counter button {...} )<style shadow> akan menerapkan kontennya di atas shadowroot , dengan asumsi komponen didefinisikan dengan atribut shadow Tidak ada yang istimewa untuk dipertimbangkan di sini, kecuali bahwa gaya global dapat mengganggu IE11 jika terlalu menonjol, karena sekali lagi IE11 tidak memahami tujuan dan perilaku elemen <template> .
Definisi hanya dapat berisi satu tag skrip di dalamnya, dan skrip semacam itu akan ditangani seperti modul .
Karena IE11 tidak kompatibel dengan elemen <template> , jika type tidak ditentukan, IE11 akan mencoba untuk mengevaluasi semua skrip di halaman yang tepat.
Dengan demikian, atribut type benar -benar dapat memiliki nilai apa pun, karena sama sekali tidak relevan untuk perpustakaan ini, tetapi nilai seperti itu tidak boleh kompatibel dengan IE11, dan module hanyalah satu nilai yang akan diabaikan IE11 .
Script mungkin berisi default export , atau bahkan module.exports = ... setup(element) { ... }
< script type =" module " >
import { reactive } from '@uce' ;
export default {
setup ( element ) {
const state = reactive ( { count : 0 } ) ;
const inc = ( ) => { state . count ++ } ;
const dec = ( ) => { state . count -- } ;
return { state , inc , dec } ;
}
} ;
</ script > Helper reaktif @uce memungkinkan untuk secara otomatis memperbarui tampilan setiap kali salah satu propertinya berubah.
Untuk mengetahui lebih banyak tentang perubahan reaktif, silakan baca posting medium ini.
setup Jika <script type="module" setup> ditemukan, konten skrip dipanggil dengan elemen itu sendiri sebagai konteks.
Demo langsung
< x-clock > </ x-clock >
< template is =" uce-template " >
< x-clock > {{time}} </ x-clock >
< script type =" module " setup >
let id = 0 ;
export default {
get time ( ) {
return ( new Date ) . toISOString ( ) ;
}
} ;
this . connected = e => id = setInterval ( this . render , 1000 / 30 ) ;
this . disconnected = e => clearInterval ( id ) ;
</ script >
</ template > Pintasan ini sangat berguna untuk komponen yang tidak perlu mengatur pengamatan yang diamati tetapi mungkin perlu menyiapkan alat peraga , dan untuk kasus terakhir, atribut setup harus berisi props .
< script type =" module " setup =" props " >
// props are defined as key => defaultValue pairs
export const props = {
name : this . name || 'anonymous' ,
age : + this . age || 0
} ;
</ script > Tujuan bagian ini adalah untuk menampilkan contoh dasar ke kompleks melalui UCE-template , di mana beberapa contoh mungkin menggunakan ekstensi .uce untuk membatasi komponen dalam file mereka sendiri.
.uce file sebagai html Jika Anda menggunakan kode VS, Anda dapat Ctrl+Shift+P , ketik Pengaturan JSON , pilih Buka Pengaturan (JSON) , dan tambahkan yang berikut ini ke file tersebut untuk menyorot file .uce
{
"other-settings" : "..." ,
"files.associations" : {
"*.uce" : "html"
}
} Jika kita mendefinisikan komponen sebagai view/my-component.uce
Pendekatan ini menyederhanakan banyak bundel, dependensi, kembung yang tidak perlu, dan dapat dilakukan dengan memasukkan hanya uce-template dan uce-loader kecil (364 byte) sebagai bootstrap, akhirnya mendefinisikan ketergantungan tambahan yang digunakan di seluruh komponen.
import { parse , resolve } from 'uce-template' ;
import loader from 'uce-loader' ;
// optional components dependencies
import something from 'cool' ;
resolve ( 'cool' , something ) ;
// bootstrap the loader
loader ( {
on ( component ) {
// ignore uce-template itself
if ( component !== 'uce-template' )
fetch ( `view/ ${ component } .uce` )
. then ( body => body . text ( ) )
. then ( definition => {
document . body . appendChild (
parse ( definition )
) ;
} ) ;
}
} ) ;Teknik yang sama dapat digunakan langsung pada halaman HTML apa pun, menulis beberapa kode yang mungkin kompatibel dengan IE11 juga.
<!doctype html >
< html >
< head >
< script defer src =" //unpkg.com/uce-template " > </ script >
< script defer src =" //unpkg.com/uce-loader " > </ script >
< script defer >
addEventListener (
'DOMContentLoaded' ,
function ( ) {
uceLoader ( {
Template : customElements . get ( 'uce-template' ) ,
on : function ( name ) {
if ( name !== 'uce-template' ) {
var xhr = new XMLHttpRequest ;
var Template = this . Template ;
xhr . open ( 'get' , name + '.uce' , true ) ;
xhr . send ( null ) ;
xhr . onload = function ( ) {
document . body . appendChild (
Template . from ( xhr . responseText )
) ;
} ;
}
}
} ) ;
} ,
{ once : true }
) ;
</ script >
</ head >
< body >
< my-component >
< p slot =" content " >
Some content to show in < code > my-component </ code >
</ p >
</ my-component >
</ body >
</ html >uce-templateJika sebagian besar halaman kami tidak menggunakan komponen sama sekali, menambahkan 7k+ JS di atas setiap halaman mungkin tidak diinginkan.
Namun, kita dapat mengikuti pendekatan komponen malas yang sama yang sama, kecuali loader kami akan bertugas membawa juga pustaka UCE-Template , baik ketika UCE-template itu sendiri ditemukan, atau komponen lainnya.
import loader from 'uce-loader' ;
loader ( {
on ( component ) {
// first component found, load uce-template
if ( ! this . q ) {
this . q = [ component ] ;
const script = document . createElement ( 'script' ) ;
script . src = '//unpkg.com/uce-template' ;
document . body . appendChild ( script ) . onload = ( ) => {
// get the uce-template class to use its .from(...)
this . Template = customElements . get ( 'uce-template' ) ;
// load all queued components
for ( var q = this . q . splice ( 0 ) , i = 0 ; i < q . length ; i ++ )
this . on ( q [ i ] ) ;
} ;
}
// when uce-template is loaded
else if ( this . Template ) {
// ignore loading uce-template itself
if ( component !== 'uce-template' ) {
// load the component on demand
fetch ( `view/ ${ component } .uce` )
. then ( body => body . text ( ) )
. then ( definition => {
document . body . appendChild (
this . Template . from ( definition )
) ;
} ) ;
}
}
// if uce-template is not loaded yet
// add the component to the queue
else
this . q . push ( component ) ;
}
} ) ;Dengan menggunakan teknik ini, payload JS kami per halaman sekarang akan dikurangi menjadi kurang dari 0,5K setelah kode di atas dibundel dan diminifikasi, sementara yang lainnya akan terjadi secara otomatis hanya jika ada komponen di suatu tempat di halaman.
Karena halaman dapat berisi elemen khusus lainnya dari pihak ketiga dan perpustakaan, mungkin ide yang baik untuk mendahului serangkaian komponen yang diharapkan, sebagai kebalikan dari mencoba memuat elemen khusus yang mungkin melalui view/${...}.uce .
Teknik pemuatan malas sebelumnya akan bekerja dengan baik, tetapi alih-alih memeriksa bahwa nama komponen bukan uce-template , kami dapat menggunakan satu set :
loader ( {
known : new Set ( [ 'some-comp' , 'some-other' ] ) ,
on ( component ) {
if ( this . known . has ( component ) )
fetch ( `view/ ${ component } .uce` )
. then ( body => body . text ( ) )
. then ( definition => {
document . body . appendChild (
parse ( definition )
) ;
} ) ;
}
} ) ; Keuntungan dari teknik ini adalah bahwa himpunan known dapat dihasilkan secara dinamis melalui daftar view/*.uce sehingga tidak ada yang akan rusak jika komponen yang ditemukan bukan bagian dari keluarga UCE-Template .
uce-template pasti perlu menggunakan Function untuk mengevaluasi baik parsial template atau in-script membutuhkan (...) .
Dianjurkan untuk meningkatkan keamanan menggunakan Nonce ijeLM8+5uwZ7ZXFmK+H2dwIWdiKJ1A4zhZIsq2Ffqqo= atau atribut integritas , percaya melalui skrip CSP yang hanya berasal dari domain kami sendiri.
< meta http-equiv =" Content-Security-Policy " content =" script-src 'self' 'unsafe-eval' " >
< script defer src =" /js/uce-template.js "
integrity =" sha256-ijeLM8+5uwZ7ZXFmK+H2dwIWdiKJ1A4zhZIsq2Ffqqo= "
crossorigin =" anonymous " >
</ script >Harap dicatat bahwa nilai -nilai ini berubah pada setiap rilis jadi pastikan Anda memiliki versi terbaru (readme ini mencerminkan yang terbaru).
Seperti halnya UCE, jika definisi berisi onEvent(){...} Metode, ini akan digunakan untuk menentukan komponen.
Namun, karena negara biasanya dipisahkan dari komponen itu sendiri, merupakan ide yang baik untuk menggunakan peta lemah untuk menghubungkan komponen apa pun dengan keadaan dan ... jangan khawatir, Lemah juga didukung secara alami di IE11 juga!
Demo langsung
< button is =" my-btn " >
Clicked {{times}} times!
</ button >
< script type =" module " >
const states = new WeakMap ;
export default {
setup ( element ) {
const state = { times : 0 } ;
states . set ( element , state ) ;
return state ;
} ,
onClick ( ) {
states . get ( this ) . times ++ ;
// update the current view if the
// state is not reactive
this . render ( ) ;
}
} ;
</ script >Harap perhatikan contoh ini mencakup kasus penggunaan komponen vs vs , karena menggunakan Lemah Lemah adalah rekomendasi.
Jika objek props didefinisikan, dan karena alat peraga * perbarui tampilan secara otomatis setelah berubah, kita mungkin tidak memerlukan kelemahan untuk menghubungkan keadaan komponen.
Demo langsung
< button is =" my-btn " > </ button >
< template is =" uce-template " >
< button is =" my-btn " >
Clicked {{this.times}} times!
</ button >
< script type =" module " >
export default {
props : { times : 0 } ,
onClick ( ) {
this . times ++ ;
}
} ;
</ script >
</ template > Keuntungan menggunakan alat peraga adalah bahwa dimungkinkan untuk mendefinisikan keadaan awal melalui atribut, atau melalui pengaturan langsung ketika diberikan melalui utilitas html , sehingga memiliki tombol dengan times="3" , sebagai contoh, akan ditampilkan dengan diklik 3 kali! segera.
< button is =" my-btn " times =" 3 " > </ button > import {ref} from '@uce' menyederhanakan pengambilan node oleh ref="name" atribut.
< element-details >
< span ref =" name " > </ span >
< span ref =" description " > </ span >
</ element-details >
< template is =" uce-template " >
< element-details > </ element-details >
< script type =" module " setup >
import { ref } from '@uce' ;
const { name , description } = ref ( this ) ;
name . textContent = 'element name' ;
description . textContent = 'element description' ;
</ script >
</ template > import {slot} from '@uce' menyederhanakan pengambilan slot dengan nama, mengembalikan serangkaian elemen yang dikelompokkan melalui nama yang sama.
Ini dapat digunakan baik untuk menempatkan slot tunggal dalam interpolasi, seperti yang ditunjukkan dalam contoh ini, atau untuk menempatkan beberapa slot dalam simpul yang sama.
Demo langsung
< filter-list >
Loading filter ...
< ul >
< li slot =" list " > some </ li >
< li slot =" list " > searchable </ li >
< li slot =" list " > text </ li >
</ ul >
</ filter-list >
< template is =" uce-template " >
< filter-list >
< div >
< input placeholder = filter oninput = {{filter}} >
</ div >
< ul >
{{list}}
</ ul >
</ filter-list >
< script type =" module " >
import { slot } from '@uce' ;
export default {
setup ( element ) {
const list = slot ( element ) . list || [ ] ;
return {
list ,
filter ( { currentTarget : { value } } ) {
for ( const li of list )
li . style . display =
li . textContent . includes ( value ) ? null : 'none' ;
}
} ;
}
} ;
</ script >
</ template >Namun , dalam kasus di mana urutan slot nama yang sama tidak harus divisualisasikan secara berurutan, selalu mungkin untuk melewati array node sebagai gantinya.
Artinya, nilai interpolasi apa pun dapat berupa simpul DOM, beberapa nilai, atau array node, cara yang sama μhtml bekerja.
Demo langsung
< howto-tabs >
< p > Loading tabs ... </ p >
< howto-tab role =" heading " slot =" tab " > Tab 1 </ howto-tab >
< howto-panel role =" region " slot =" panel " > Content 1 </ howto-panel >
< howto-tab role =" heading " slot =" tab " > Tab 2 </ howto-tab >
< howto-panel role =" region " slot =" panel " > Content 2 </ howto-panel >
</ howto-tabs >
< template is =" uce-template " >
< howto-tabs >
{{tabs}}
</ howto-tabs >
< script type =" module " >
import { slot } from '@uce' ;
export default {
setup ( element ) {
const { tab , panel } = slot ( element ) ;
const tabs = tab . reduce (
( tabs , tab , i ) => tabs . concat ( tab , panel [ i ] ) ,
[ ]
) ;
return { tabs } ;
}
} ;
</ script >
</ template > Sistem modul yang disediakan oleh UCE-Template sangat sederhana dan dapat diperpanjang sepenuhnya, sehingga setiap komponen dapat import any from 'thing'; Selama thing telah disediakan/diselesaikan melalui perpustakaan.
Jika kita akan menentukan titik masuk bundel tunggal, dan kita tahu bahwa setiap komponen akan membutuhkan satu atau lebih ketergantungan, kita dapat melakukan hal berikut:
import { resolve } from 'uce-template' ;
import moduleA from '3rd-party' ;
const moduleB = { any : 'value' } ;
resolve ( 'module-a' , moduleA ) ;
resolve ( 'module-b' , moduleB ) ;Setelah build ini mendarat sebagai titik masuk halaman web tunggal, semua komponen akan dapat mengimpor segera semua modul basis/default, ditambah semua yang telah diselesaikan sebelumnya.
Demo Langsung (lihat Panel HTML dan JS + Konsol)
< my-comp > </ my-comp >
< script type =" module " >
import moduleA from 'module-a' ;
import moduleB from 'module-a' ;
export default {
setup ( ) {
console . log ( moduleA , moduleB ) ;
}
}
</ script > Jika komponen yang ditentukan mengimpor sesuatu dari file eksternal, seperti import module from './js/module.js' akan dilakukan, impor seperti itu akan diselesaikan dengan malas, bersama -sama dengan modul lain yang belum diketahui, yang berarti bahwa ./js/module.js File dapat berisi sesuatu seperti ini:
// a file used to bootstrap uce-template component
// dependencies can always use the uce-template class
const { resolve } = customElements . get ( 'uce-template' ) ;
// resolve one to many modules
resolve ( 'quite-big-module' , { ... } ) ;Skrip komponen kemudian dapat mengimpor file ini dan mengakses modul yang diekspor tepat setelahnya.
Demo langsung
< script type =" module " >
import './js/module.js' ;
import quiteBigModule from 'quite-big-module' ;
export default {
setup ( ) {
console . log ( quiteBigModule ) ;
}
}
</ script > Bersama dengan komponen malas yang dimuat , pendekatan ini memungkinkan untuk mengirimkan komponen yang sepenuhnya didasarkan pada definisi file vue/comp.uce eksternal, di mana salah satu komponen ini juga dapat berbagi satu atau lebih file .js yang dapat menyelesaikan modul apa pun yang diperlukan di sini atau di sana (dependensi bersama dalam satu file, sebagai kebalikan dari dependensi per setiap komponen yang dikirim).
Sebagai file mandiri, ukuran elemen khusus saya sekitar 2.1k , tetapi karena dibagikan hampir setiap perpustakaan yang digunakan UCE juga, menggabungkannya bersama -sama tampak seperti cara terbaik untuk pergi, menghasilkan hanya 1k tambahan untuk modul yang cocok dengan anggaran sekitar 7k hingga 10k .
Di sisi lain, karena polyfill tidak menonjol dan berdasarkan deteksi fitur runtime, ini berarti bahwa tidak ada yang peduli untuk membawa polyfill lain yang pernah ada, tetapi juga Chrome , Firefox , dan Edge , akan tidak tersentuh, sehingga setiap elemen khusus akan berjalan secara asli, baik Builtin diperluas atau reguler.
Dalam kasus Safari , atau berbasis webkit , hanya elemen khusus yang dibangun yang disediakan, sedangkan di IE11 dan MS Edge lama, keduanya builtin meluas dan elemen reguler ditambal.
Itu saja: Jangan khawatir tentang Polyfill, karena semuanya sudah termasuk di sini!
Jika Anda menargetkan browser yang Anda tahu sudah menyediakan elemen kustom asli V1, Anda dapat menggunakan versi ESM ini yang mengecualikan semua polyfill dan hanya menyertakan logika.
Bundel es.js saat ini memang ~ 7k gzipped dan ~ 6.5k brotli, sehingga mungkin untuk menyimpan bahkan bandwidth tambahan dalam proyek Anda.
Nah, dalam kasus seperti itu jika itu satu-satunya browser target, modul @webreflection/custom-elements-builtin harus dimasukkan sebelum modul UCE-template mendarat di halaman.
< script defer src =" //unpkg.com/@webreflection/custom-elements-builtin " > </ script >
< script defer src =" //unpkg.com/uce-template " > </ script >Ini akan memastikan kedua dan builtin Extends akan berfungsi seperti yang diharapkan.
Sayangnya Shadowdom adalah salah satu spesifikasi yang tidak mungkin untuk polyfill, tetapi kabar baiknya adalah bahwa Anda jarang membutuhkan bayangan di UCE-template , tetapi jika browser Anda kompatibel, Anda dapat menggunakan Shadowdom sebanyak yang Anda suka.
Namun , setidaknya ada dua polyfill parsial yang mungkin untuk dipertimbangkan: lampiran, yang minimalis dan ringan, dan teduh, yang lebih dekat dengan standar, tetapi secara definitif lebih berat, meskipun kedua polyfill dapat, dan harus, hanya disuntikkan jika browser saat ini membutuhkannya.
<!-- this must be done before uce-template -->
< script >
if ( ! document . documentElement . attachShadow )
document . write ( '<script src="//unpkg.com/attachshadow"><x2fscript>' ) ;
</ script >
< script defer src =" //unpkg.com/uce-template " > </ script > Karena setiap browser modern akan memiliki document.documentElement.attachShadow , document.write akan terjadi hanya di IE11 tanpa kompromi, atau menghukum browser desktop seluler dan modern.
Ps <x2fscript> bukan kesalahan ketik, itu perlu tidak memiliki tata letak yang rusak karena tag skrip penutupan
{{...}} bukannya ${...} ? Seperti halnya saya ingin memiliki ${...} batas interpolasi, IE11 akan pecah jika elemen dalam DOM berisi ${...} sebagai atribut.
Karena {{...}} adalah alternatif yang mapan, saya telah memutuskan untuk menghindari masalah IE11 yang memuat monyet dan cukup tetap dengan alternatif standar de-facto.
Perlu juga mempertimbangkan bahwa Vue menggunakan {{...}} juga, dan begitu juga banyak mesin berbasis template lainnya.
Function diperlukan? Seperti yang dijelaskan dalam bagian " CSP & Integrity/Nonce " dari cara/contoh, perlu menggunakan Function setidaknya untuk dua alasan:
"use strict"; Petunjuk dan melewati pernyataan with(object) , perlu memahami interpolasi tanpa membuat mesin JS keseluruhan dari awalrequire fungsionalitas dalam <script type="module"> konten Tetapi bahkan jika tidak ada Function dalam persamaan, parsing dan mengeksekusi tag <script> untuk mendefinisikan elemen khusus akan menjadi setara yang sama persis dengan menggunakan Function , karena CSP akan membutuhkan aturan khusus, karena operasi pada dasarnya adalah panggilan evaluasi dalam konteks global.
Sebagai ringkasan, alih -alih menipu browser dengan praktik yang aman, atau tidak aman, sebagai panggilan Function , saya hanya menggunakan Function sebagai gantinya, menjaga ukuran kode masuk akal.
Proyek ini adalah elemen kustom asli yang performa-sebagai , kecuali untuk biaya definisi, yang merupakan operasi sekali saja per setiap kelas elemen khusus yang unik, karenanya tidak relevan dalam jangka panjang , dan ada overhead yang tidak signifikan dalam logika yang dikurung template awal, tetapi Anda akan memeriksa status terbaru.
Anda dapat memeriksa demo DBMonster klasik di sini, dan melihat bahwa itu berkinerja baik.
Tidak ada di perpustakaan ini yang memblokir, dan modul diselesaikan hanya sekali , bahkan impor jalur relatif.
Logikanya cukup sederhana: jika nama modul belum diselesaikan dan itu adalah impor relatif, permintaan asinkron akan dibuat dan dievaluasi nanti, sedangkan jika modul tidak diselesaikan, dan itu adalah nama yang memenuhi syarat, itu akan diselesaikan hanya setelah beberapa kode menyediakannya.
Semua ini, ditambah impor untuk memerlukan resolusi, ditangani oleh penolong UCE-Require, sengaja tidak digabungkan dengan modul ini sendiri, karena diharapkan dapat menginspirasi, dan digunakan oleh, proyek lain juga.
Jika Anda ingin memahami lebih lanjut tentang uce-template dan bagaimana cara kerjanya, silakan periksa halaman ini.
