uce template
1.0.0
Unsplash의 Federico Bottos의 소셜 미디어 사진
도구가 포함 된 작은 toolless 라이브러리. 라이브 데모
이 프로젝트 주변의 커뮤니티가 성장하도록 돕기 위해 전용 토론 저장소에 질문을하십시오 ♥
Vue 3 " One Piece "에서 영감을 얻은 UCE-Template은 VUE 방식으로 구성 요소를 정의하기위한 사용자 정의 내장 <template> 요소를 제공합니다.
< 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 >이 라이브러리를 방정식에 추가하고 정의 된 모든 구성 요소를 부트 스트랩하는 것을보십시오.
<template lazy> 구성 요소, 살아있는 경우에만 자신의 정의를 해결합니다.<custom-element shadow> 구성 요소 및 선택적으로 섀도우 <style shadow> 스타일@uce 모듈을 포함하여 다양한 사전 정의 된 모듈이 반응성 UI를 생성하기 위해resolve(name, module) 내보낸 유틸리티를 통해 사전 정의 될 수 있습니다. 전 세계적으로 CLI를 설치하는 것이 제안되었지만, 조명이없는 의존성으로 인해 여전히 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-template그것이 바로 그렇지만 물론 생산 된 레이아웃이 여전히 예상대로 작동하는지 확인해야합니까?
uce-template 확장하는 모든 템플릿은 규칙적이거나 내장 확장에 적어도 사용자 정의 요소를 포함 해야합니다 .
<!-- 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 > 모든 템플릿에는 단일 <script> 태그 및/또는 하나 이상의 <style> 정의가 포함될 수 있습니다.
구성 요소에 {{slot.name}} 정의가 포함 된 경우, Living HTML 의 노드는 구성 요소가 업그레이드되기 전에 한 번 살아있는 일단 거기에 배치됩니다.
더 많은 것을 이해하려면이 살아있는 예를 참조하십시오.
각 " 구성 요소 "는 고유 한 정적 또는 동적 컨텐츠로 스스로를 정의 할 수 있습니다.
이러한 컨텐츠는 각 사용자 지정 요소를 한 번 " 장착 "(라이브) 및 각 반응성 상태 변경에 따라 렌더링하는 데 사용되지만 템플릿이 비어있는 경우에만 해당됩니다 .
모든 동적 부품은 여기에 표시된대로 {{dynamic}} 곱슬 브래킷 내에 래핑해야합니다.
< my-counter >
< button onclick = {{dec}} > - </ button >
< span > {{state.count}} </ span >
< button onclick = {{inc}} > + </ button >
</ my-counter > state , dec 및 inc 참조는 스크립트 노드를 통해 전달됩니다.
구성 요소가 렌더링 될 때마다 업데이트 콜백이 호출되어 요소 자체를 컨텍스트 로 제공합니다.
< button is =" my-button " >
I am a {{this.tagName}}
</ button >Shadowdom 과 관련하여 Polyfill 은이 프로젝트에 포함되어 있지 않지만 Shadow 속성을 추가하여 Shadow Root를 통해 구성 요소를 정의 할 수 있습니다.
< my-counter shadow >
<!-- this content will be in the shadowRoot -->
< button onclick = {{dec}} > - </ button >
< span > {{state.count}} </ span >
< button onclick = {{inc}} > + </ button >
</ my-counter > shadow 속성은 기본적으로 open 있지만 shadow=closed 로 지정할 수도 있습니다.
{{JS}} 과 관련하여 속성이면 {{ JS }} 주변의 공간을 사용하려는 경우 속성은 따옴표로되어야 하며 , 그렇지 않으면 HTML 템플릿은 예상치 못한 방식으로 레이아웃을 중단시켜야합니다.
<!-- 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}}--> case여기의 모든 것이 주로 표준 HTML 동작을 기반으로하기 때문에 보간을 주석으로 포장 해야하는 경우가 있습니다.
경험의 규칙은 레이아웃이 보이지 않거나 템플릿 오류가 잘못 되면 템플릿 요소에 의해 보간을 삼킬 수 있다는 것입니다.
이것은 주로 테이블 , select 및 특정 유형의 하위 노드 만 허용하는 텍스트와 같은 다른 요소와 같은 요소에서 발생합니다.
<!-- ? this won't work as expected -->
< table is =" my-table " >
< tbody > {{rows}} </ tbody >
</ table >
<!-- ? this works ? -->
< table is =" my-table " >
< tbody > <!--{{rows}}--> </ tbody >
</ table > 첫 번째 경우, <tbody> 는 댓글을 제외하고 <tr> 가 아닌 노드를 무시합니다. 주석이 프로세스에서 삼키거나 손실되지 않기 때문입니다.
Custom <table> 및 Custom <tr> 구성 요소 모두에 대한 DBMONSTER.HTML 파일 정의를 볼 수 있습니다.
구성 요소는 특정 범위 내에서 하나 이상의 스타일을 가질 수 있습니다.
<style> 전 세계적으로 컨텐츠를 적용하여 my-counter + my-counter {...} 사례를 해결하는 데 유용합니다.<style scoped> 사용자 정의 요소 이름으로 접두사를 적용합니다 (예 : my-counter span, my-counter button {...} )<style shadow> 구성 요소가 shadow 속성으로 정의되어 있다고 가정하면 섀도우 루트 위에 내용을 적용합니다. IE11이 다시 <template> 요소 목적과 동작을 이해하지 못하기 때문에 글로벌 스타일이 너무 눈에 띄는 경우 IE11 을 방해 할 수 있다는 점을 제외하고는 여기에서 고려해야 할 특별한 것은 없습니다.
정의에는 하나의 스크립트 태그 만 포함 할 수 있으며 이러한 스크립트는 모듈 처럼 사실상 처리됩니다.
IE11은 <template> 요소와 호환되지 않으므로 type 지정하지 않으면 IE11은 페이지의 모든 스크립트를 오른쪽으로 평가하려고합니다.
따라서 type 속성은이 라이브러리와 완전히 관련이 없기 때문에 유형 속성은 실제로 값을 가질 수 있지만, 그러한 값은 IE11 호환이어서는 안되며 module IE11이 무시할 수있는 하나의 값 일뿐입니다.
setup(element) { ... } 에는 default export 또는 module.exports = ... .
< 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 > @uce 반응식 도우미를 사용하면 속성 중 하나가 변경 될 때마다보기를 자동으로 업데이트 할 수 있습니다.
반응성 변화에 대한 자세한 내용은이 중간 게시물을 읽으십시오.
setup 속성 <script type="module" setup> 이 발견되면 스크립트의 내용이 요소 자체와 함께 컨텍스트로 호출됩니다.
라이브 데모
< 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 > 이 바로 가기는 관찰 된 Attributes를 설정할 필요가 없지만 소품을 설정해야 할 수있는 구성 요소에 특별히 편리하며, 후자의 경우 setup 속성에는 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 > 이 섹션 목표는 UCE-Template을 통해 기본의 복잡한 예제를 보여주는 것입니다. 여기서 일부 예는 .uce 확장자를 사용하여 자체 파일 내의 구성 요소를 제한 할 수 있습니다.
.uce 파일을 html로 봅니다 VS 코드를 사용하는 경우 CTRL+SHINST+P , 설정을 입력하고 설정을 입력하고 열린 설정 (JSON)을 선택한 다음 해당 파일에 다음을 추가하여 .uce 파일을 HTML 로 강조 표시 할 수 있습니다.
{
"other-settings" : "..." ,
"files.associations" : {
"*.uce" : "html"
}
} 구성 요소를 view/my-component.uce 로 정의하면 현재 페이지에서 찾을 때만이 더 게으른 또는 더 나은 것을 포함시키기로 결정할 수도 있습니다.
이 접근법은 많은 번들, 종속성, 불필요한 부풀어 오르고, uce-template 와 작은 (364 바이트) UCE- 로더를 부트 스트랩으로 포함 시켜서 결국 구성 요소에 사용되는 추가 종속성을 정의하여 수행 할 수 있습니다.
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 )
) ;
} ) ;
}
} ) ;동일한 기술이 모든 HTML 페이지에서 직접 사용할 수 있으며 IE11 과도 호환 될 수있는 일부 코드를 작성할 수 있습니다.
<!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-template대부분의 페이지가 구성 요소를 전혀 사용하지 않으면 각 페이지 위에 7k+의 JS를 추가하면 바람직하지 않을 수 있습니다.
그러나 UCE-TemPlate 자체가 발견 될 때 또는 다른 구성 요소가있는 경우 로더가 UCE-Template 라이브러리를 가져 오는 것을 제외하고는 동일한 게으른로드 구성 요소 접근 방식을 따라갈 수 있습니다.
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 ) ;
}
} ) ;이 기술을 사용하면 페이지 당 JS 페이로드가 이제 0.5k 미만으로 줄어들면 코드 위의 코드가 번들 및 조정되면 다른 모든 것은 페이지 어딘가에 구성 요소가있는 경우에만 자동으로 발생합니다.
이 페이지에는 타사 및 라이브러리의 다른 사용자 정의 요소가 포함될 수 있으므로 view/${...}.uce 요청을 통해 가능한 사용자 정의 요소를로드하려고 시도하는 것과 반대되는 반대와 같이 잘 알려진 예상 구성 요소 세트를 사전 정의하는 것이 좋습니다.
이전 게으른 로딩 기술은 이미 잘 작동하지만 구성 요소 이름이 uce-template 아닌지 확인하는 대신 세트를 사용할 수 있습니다.
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 )
) ;
} ) ;
}
} ) ; 이 기술의 장점은 known 세트가 view/*.uce 파일 목록을 통해 동적으로 생성 될 수 있으므로 발견 된 구성 요소가 UCE-Template 패밀리의 일부가 아닌 경우 아무것도 깨지지 않도록합니다.
uce-template 필연적으로 템플릿 부분 또는 스크립트 요구 사항을 평가하기 위해 Function 사용해야합니다 (...) .
Nonce ijeLM8+5uwZ7ZXFmK+H2dwIWdiKJ1A4zhZIsq2Ffqqo= 또는 자체 도메인에서 오는 CSP만을 통한 무결성 속성을 사용하여 보안을 높이는 것이 좋습니다.
< 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 >이러한 값은 모든 릴리스에서 변경되므로 최신 버전이 있는지 확인하십시오 (이 readme는 최신을 반영합니다).
UCE와 마찬가지로 정의에 onEvent(){...} 메소드가 포함되어 있으면 구성 요소를 정의하는 데 사용됩니다.
그러나 상태는 일반적으로 구성 요소 자체에서 분리되므로 약점을 사용하여 상태와 관련된 구성 요소를 사용하는 것이 좋습니다. 걱정하지 마십시오. 약점은 IE11 에서도 기본적으로 지원됩니다!
라이브 데모
< 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 >이 예제는 약점을 사용하는 것이 권장 사항이므로 모든 상태 대 구성 요소 사용 사례를 다룹니다.
props 객체가 정의되고 Props *가 한 번 변경되면 뷰를 자동으로 업데이트하면 구성 요소의 상태를 연관시키기 위해 약점이 필요하지 않을 수 있습니다.
라이브 데모
< 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 > Props를 사용하는 장점은 초기 상태를 속성을 통해 또는 html 유틸리티를 통해 렌더링 할 times="3" 직접 설정을 통해 정의 할 수 있다는 것입니다 . 곧.
< button is =" my-btn " times =" 3 " > </ button > import {ref} from '@uce' ref="name" 속성으로 노드 검색을 단순화합니다.
< 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' 이름별로 슬롯 검색을 단순화하여 동일한 이름을 통해 그룹화 된 요소 배열을 반환합니다.
이것은이 예제에 표시된 것처럼 보간에 단일 슬롯을 배치하거나 동일한 노드 내에 여러 슬롯을 배치하는 데 사용할 수 있습니다.
라이브 데모
< 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 >그러나 동일한 이름 슬롯 순서가 반드시 순차적으로 시각화되지는 않는 경우, 대신 대신 많은 노드를 전달할 수 있습니다.
즉, 모든 보간 값은 dom 노드, 일부 값 또는 µhtml 작동 방식과 같은 노드 배열 일 수 있습니다.
라이브 데모
< 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 > uce-template 에서 제공하는 모듈 시스템은 매우 간단하고 완벽하게 확장 가능하므로 각 구성 요소는 import any from 'thing'; 도서관을 통해 thing 제공/해결되는 한.
단일 번들 진입 점을 정의하려고하고 각 구성 요소가 하나 이상의 종속성이 필요하다는 것을 알고 있다면 다음을 수행 할 수 있습니다.
import { resolve } from 'uce-template' ;
import moduleA from '3rd-party' ;
const moduleB = { any : 'value' } ;
resolve ( 'module-a' , moduleA ) ;
resolve ( 'module-b' , moduleB ) ;이 빌드는 단일 웹 페이지 입력 지점으로 착륙하면 모든 구성 요소는 모든 기본/기본 모듈과 사전 분해 된 모든 모듈을 즉시 가져올 수 있습니다.
라이브 데모 (HTML 및 JS 패널 + 콘솔 참조)
< 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 > 정의 된 구성 요소가 ' ./js/module.js import module from './js/module.js' 과 같은 외부 파일에서 무언가를 가져 오는 경우, 그러한 가져 오기는 아직 알려지지 않은 다른 모듈과 함께 게으르게 해결 될 것입니다.
// 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' , { ... } ) ;그런 다음 구성 요소 스크립트 가이 파일을 가져 와서 바로 내보내는 모듈에 액세스 할 수 있습니다.
라이브 데모
< script type =" module " >
import './js/module.js' ;
import quiteBigModule from 'quite-big-module' ;
export default {
setup ( ) {
console . log ( quiteBigModule ) ;
}
}
</ script > Lazy Loaded Component 와 함께이 접근법을 사용하면 외부 vue/comp.uce 파일 정의를 기반으로 한 구성 요소를 배송 할 수 있습니다. 여기서 이러한 구성 요소 중 하나 이상이 필요한 모듈을 해결할 수있는 하나 이상의 .js 파일 (각각 배송 된 구성 요소의 종속성과 반대)을 공유 할 수 있습니다.
독립형 파일로서 내 사용자 정의 요소 크기는 약 2.1k 이지만 거의 모든 라이브러리가 공유하기 때문에 UCE가 사용하는 거의 모든 라이브러리가 함께 사용하는 가장 좋은 방법처럼 보였으므로 대략 7K ~ 10K 예산에 맞는 모듈의 경우 1K 에 불과합니다.
반면에, 폴리 필은 눈에 띄지 않고 런타임 기능을 기반으로하기 때문에 다른 폴리 필드뿐만 아니라 Chrome , Firefox 및 Edge 도 손대지 않아 모든 사용자 정의 요소가 기본적으로 확장되거나 규칙적으로 실행될 수 없다는 것을 의미합니다.
Safari 사례 또는 WebKit 기반의 경우 내장 된 사용자 정의 요소 만 제공되는 반면 IE11 및 기존 MS Edge 에는 내장 확장 및 일반 요소가 패치됩니다.
그게 다야 : 모든 폴리 필에 대해 걱정하지 마세요. 모든 것이 이미 여기에 포함되어 있기 때문입니다!
이미 기본 사용자 정의 요소 v1을 제공하는 브라우저를 대상으로하는 경우 모든 폴리 플릴을 제외하고 논리 만 포함하는이 ESM 버전을 사용할 수 있습니다.
현재 es.js 번들은 실제로 ~ 7k Gzipped와 ~ 6.5k Brotli이므로 프로젝트에서 추가 대역폭을 절약 할 수 있습니다.
그러한 경우 유일한 대상 브라우저 인 경우 @webreflection/custom-elements-builtin 모듈이 페이지의 UCE-Template 모듈이 착륙하기 전에 포함되어야합니다.
< script defer src =" //unpkg.com/@webreflection/custom-elements-builtin " > </ script >
< script defer src =" //unpkg.com/uce-template " > </ script >이를 통해 정기 및 내장 확장이 예상대로 작동합니다.
불행히도 Shadowdom 은 Polyfill에 불가능한 사양 중 하나이지만 좋은 소식은 UCE-Template 에서 Shadowdom이 거의 필요하지 않지만 브라우저가 호환되면 원하는만큼 Shadowdom을 사용할 수 있다는 것입니다.
그러나 최소한 두 가지 가능한 부분 폴리 플릴이 고려할 수 있습니다. 첨부 파일은 최소화적이고 가벼운 첨부이지만 표준에 더 가깝지만 현재 브라우저가 필요한 경우에만 폴리 플리저가 필요할 경우 에만 주입되어야하지만, html 페이지 위에이 코드를 고착 시키면 IE11에도 그림자를 가져옵니다.
<!-- 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 > 모든 최신 브라우저에는 document.documentElement.attachShadow 가 있으므로 document.write 는 IE11 에서만 타협하거나 모바일 및 최신 데스크톱 브라우저 없이 발생합니다.
추신 <x2fscript> 오타가 아니므로 스크립트 태그를 마감 해야하는 레이아웃이 깨지지 않아야합니다.
{{...}} 대신 ${...} 사용합니까? 내가 ${...} 보간 경계를 갖고 싶었던만큼, DOM의 요소에 속성으로 ${...} 포함 된 경우 ie11이 끊어집니다.
{{...}} 잘 확립 된 대안이기 때문에 원숭이를 패치 할 수있는 IE11 문제를 피하고 단순히 요점 표준 대안을 고수하기로 결정했습니다.
Vue가 {{...}} 도 사용하고 다른 많은 템플릿 기반 엔진도 사용한다는 것을 고려할 가치가 있습니다.
Function 필요한 이유는 무엇입니까? " CSP & Integrity/Nonce "부분에 설명 된 바와 같이,/예제 방법의 부분에 따르면, 최소한 두 가지 이유로 Function 사용해야합니다.
"use strict"; with(object) 문을 통해 지시어와 전달, 스크래치에서 전체 JS 엔진을 만들지 않고 보간을 이해해야합니다.<script type="module"> content 내에서 기능을 require 것과 같은 유일한 방법입니다. 그러나 방정식에 Function 없더라도 사용자 정의 요소를 정의하기 위해 <script> 태그를 구문 분석하고 실행하는 것은 Function 사용하는 것과 정확히 동일했을 것입니다. CSP는 기본적으로 전 세계 컨텍스트에서 평가 호출이기 때문에 CSP는 특별한 규칙이 필요했기 때문입니다.
요약하면, 브라우저를 안전하거나 안전하지 않은 관행으로 브라우저를 속이는 대신 Function 호출만큼 단순히 Function 사용하여 코드 크기를 합리적으로 유지했습니다.
이 프로젝트는 정의 비용을 제외하고 는 각 고유 한 사용자 지정 요소 클래스 당 일회성 작업 인 정의 비용을 제외하고는 기본 사용자 정의 요소가 될 수 있으며, 따라서 장기적으로는 관련이 없으며 초기 템플릿 구문 분석 논리 내에 무의미한 오버 헤드가 있지만 UHTML이 UHTML이 될 수있는 것만 큼 빠르며 최신 상태를 확인하면 빠른 상태를 확인할 수 있습니다.
여기에서 클래식 DBMonster 데몬을 확인하고 그것이 잘 작동하는지 확인할 수 있습니다.
이 라이브러리의 어떤 것도 차단되지 않으며, 모듈은 상대 경로 수입도 한 번만 해결됩니다.
논리는 매우 간단합니다. 모듈 이름이 해결되지 않고 상대적으로 가져 오면 나중에 비동기 요청이 이루어지고 평가되는 반면 모듈이 해결되지 않고 자격을 갖춘 이름이면 일부 코드가 제공 한 후에 만 해결됩니다.
이 모든 것이 해결을 요구하는 수입은 UCE 수수료 도우미에 의해 처리되며, 의도적 으로이 모듈 자체와 결합되지 않으며, 희망적으로 다른 프로젝트에도 영감을주고 사용할 수 있습니다.
uce-template 에 대해 더 많이 이해하고 어떻게 작동하는지 확인하려면이 페이지를 확인하십시오.
