uce template
1.0.0
صورة وسائل التواصل الاجتماعي من قبل فيديريكو بوتوس
مكتبة TOOLLESS الصغيرة مع الأدوات المدرجة. عرض مباشر
يرجى طرح الأسئلة في مستودع المناقشات المخصصة ، لمساعدة المجتمع حول هذا المشروع على نمو ♥
مستوحاة من Vue 3 " One Piece " ، يوفر UCE-TEMPLATE عنصرًا مخصصًا <template> قالب> لتحديد المكونات بطريقة 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 >أضف هذه المكتبة إلى المعادلة ، وشاهدها قم بتمهيد جميع المكونات المحددة.
<template lazy> ، لحل تعريفها فقط عند العيش<custom-element shadow> ، و sypes <style shadow> مظللة اختياريا@uce ، لإنشاء واجهة مستخدم تفاعلية وأكثر من ذلك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}} ، فسيتم وضع العقد من HTML المعيشية ، قبل ترقية المكون ، هناك مرة واحدة.
شاهد هذا المثال الحي لفهم المزيد.
قد يعرّف كل " مكون " نفسه بمحتوى ثابت أو ديناميكي أو بدونه.
سيتم استخدام هذا المحتوى لتقديم كل عنصر مخصص بمجرد " تثبيت " (Live) و لكل تغيير في حالة تفاعلية ، ولكن فقط إذا لم يكن القالب فارغًا.
يجب أن يتم لف جميع الأجزاء الديناميكية داخل {{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 >فيما يتعلق بالظلال ، لا يتم تضمين polyfill في هذا المشروع ولكن من الممكن تحديد مكون من خلال جذر الظل عن طريق إضافة سمة الظل :
< 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 }} ، يجب أن تكون السمة في اقتباسات ، وإلا
<!-- 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 القياسي ، فهناك حالات يجب أن يتم فيها إدخال الاستيفاء كتعليق.
قاعدة الإبهام هي أنه إذا لم ترى التصميم ، أو قرأت بعض خطأ القالب السيئ ، فمن المحتمل أن يكون الاستيفاء قد تم ابتلاعه بواسطة عنصر القالب .
يحدث هذا في الغالب مع عناصر مثل الجدول ، والاختيار ، والعناصر الأخرى التي تقبل فقط نوع معين من عقدة الطفل ، ولكن ليس النص.
<!-- ? 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> باستثناء التعليقات ، لأن التعليقات لا يتم ابتلاعها أو ضياعها في هذه العملية.
يمكنك رؤية تعريف ملف DBMonster.html لكل من مخصص <table> ومكون <tr> المخصص.
يمكن أن يكون للمكون أحد الأنماط أو أكثر ، ضمن نطاق محدد:
<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 .
قد يحتوي البرنامج النصي على default export ، أو حتى 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 > يتيح المساعد التفاعلي @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 > هذا الاختصار مفيد بشكل خاص للمكونات التي لا تحتاج إلى إعداد OsderAttributes ولكنها قد تحتاج إلى إعداد الدعائم ، وللحالة الأخيرة ، يجب أن تحتوي سمة 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 Code ، فيمكنك CTRL+Shift+P ، اكتب الإعدادات JSON ، واختر الإعدادات المفتوحة (JSON) ، وإضافة ما يلي إلى هذا الملف لتسليط الضوء على ملفات .uce
{
"other-settings" : "..." ,
"files.associations" : {
"*.uce" : "html"
}
} إذا حددنا المكونات على أنها view/my-component.uce فقد نقرر أيضًا تضمينها بتكاسل ، أو أفضل ، فقط عندما توجد هذه في الصفحة الحالية.
يبسط هذا النهج الكثير من الحزم ، والتبعيات ، والفتحة غير الضرورية ، ويمكن القيام به من خلال تضمين فقط uce-template و uce-uptes tiny (364 بايت) كحمل ، في نهاية المطاف ، يحدد توعية إضافية تستخدم عبر المكونات.
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.5 كيلو واحد مرة واحدة فوق الرمز المليء بالتجميع ومُعجَّل ، في حين أن كل شيء آخر سيحدث تلقائيًا فقط إذا كانت هناك مكونات في مكان ما في الصفحة.
نظرًا لأن الصفحة يمكن أن تحتوي على عناصر مخصصة أخرى من الطرف الثالث والمكتبات ، فقد يكون من الجيد تحديد مجموعة معروفة من المكونات المتوقعة ، على عكس محاولة تحميل أي عناصر مخصصة محتملة عبر طلب 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 لتقييم أي من القالب الجزئي أو الحاجة إلى النصف (...) .
يوصى بزيادة الأمان باستخدام إما غير 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 >يرجى ملاحظة أن هذا المثال يغطي أي حالة استخدام مكون VS ، حيث أن استخدام الخريطة الضعيفة هو توصية.
إذا تم تعريف كائن 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 > تتمثل ميزة استخدام الدعائم في أنه من الممكن تحديد الحالة الأولية من خلال السمات ، أو عبر إعدادها المباشر عند تقديمها من خلال الأداة المساعدة html ، بحيث يكون وجود زر مع times="3" ، على سبيل المثال ، عرضًا تم النقر فوقه 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 Panel + Console)
< 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 > في حالة قيام المكون المحدد باستيراد شيء ما من ملف خارجي ، مثل import module from './js/module.js' ./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 > جنبا إلى جنب مع المكون المحمّل كسول ، يجعل هذا النهج من الممكن شحن المكونات التي تعتمد بالكامل على تعريف ملف vue/comp.uce خارجي ، حيث يمكن لأي من هذه المكونات أيضًا مشاركة ملف واحد أو أكثر من ملفات .js قادرة على حل أي وحدة نمطية مطلوبة هنا أو هناك (تبعيات مشتركة في ملف واحد ، على عكس التبعيات لكل مكونات كل شحن).
كملف مستقل ، يبلغ حجم العناصر المخصصة حوالي 2.1 كيلو ، ولكن نظرًا لأنه يشارك تقريبًا كل مكتبة تستخدمها UCE أيضًا ، فقد بدا أن تجميعه معًا أفضل طريقة للذهاب ، مما يؤدي إلى 1K إضافي فقط لوحدة تناسب ما يقرب من 7 كيلو إلى 10 كيلو بميزانية.
من ناحية أخرى ، نظرًا لأن polyfill ليس أمرًا غريبًا ويستند إلى اكتشاف ميزات وقت التشغيل ، فهذا يعني أنه لا ينبغي لأحد أن يهتم بجلب أي ملق آخر على الإطلاق ، ولكن أيضًا من كروم و Firefox و Edge .
في علبة Safari ، أو WebKit المستندة ، يتم توفير العناصر المخصصة التي تم تصميمها فقط ، بينما في IE11 و MS Edge القديمة ، يتم تصحيح كل من العناصر المصممة والعناصر العادية.
هذا كل شيء: لا تقلق بشأن أي ملفي ، لأن كل شيء مدرج بالفعل هنا!
إذا كنت تستهدف المتصفحات التي تعرفها بالفعل توفر عناصر مخصصة أصلية V1 ، فيمكنك استخدام إصدار ESM هذا الذي يستبعد جميع المواد المتعددة وتضمين المنطق فقط.
حزمة es.js الحالية هي بالفعل ~ 7K Gzipped و ~ 6.5k Brotli ، بحيث يمكن توفير النطاق الترددي الإضافي في مشروعك.
حسنًا ، في مثل هذه الحالة ، إذا كان هذا هو المتصفح الهدف الوحيد ، فيجب تضمين وحدة @WebReplection/Custom-Celements-Builtin قبل هبوط وحدة UCE-Templet في الصفحة.
< script defer src =" //unpkg.com/@webreflection/custom-elements-builtin " > </ script >
< script defer src =" //unpkg.com/uce-template " > </ script >سيضمن ذلك أن يمتد كل من تمديده العادي والمبني كما هو متوقع.
لسوء الحظ ، يعد Shadowdom أحد هذه المواصفات المستحيلة بالنسبة إلى Polyfill ، ولكن الأخبار السارة هي أنك نادرًا ما تحتاج إلى ظلال في UCE-Template ، ولكن إذا كان متصفحك متوافقًا ، فيمكنك استخدام Shadowdom بقدر ما تريد.
ومع ذلك ، هناك ما لا يقل عن اثنين من البوليفيات الجزئية الممكنة التي يجب مراعاتها: attachshadow ، وهو الحد الأدنى وخفيف الوزن ، و shadydom ، وهو أقرب إلى المعايير ، ولكن الأثقل بشكل نهائي ، على الرغم من أن كلا من polyfills يمكن ، وينبغي أن يتم حقنها فقط إذا كان المتصفح الحالي يحتاج إليها ، لذلك فإن هذا الرمز على رأس صفحة 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.write لأن كل متصفح حديث سيكون له document.documentElement.attachShadow .
ps < <x2fscript> ليس خطأً مطبعي
{{...}} بدلاً من ${...} ؟ بقدر ما أحب أن يكون لدي حدود ${...} الاستيفاء ، سوف يكسر IE11 إذا كان عنصر DOM يحتوي على ${...} سمة.
نظرًا لأن {{...}} هو بديل راسخ ، فقد قررت تجنب مشكلات IE11 المحتملة التي تصطدم بالقرد وببساطة بديل قياسي لا يتجزأ.
تجدر الإشارة أيضًا إلى أن Vue يستخدم {{...}} أيضًا ، وكذلك القيام بالعديد من المحركات القائمة على القالب الأخرى.
Function ضرورية؟ كما هو موضح في جزء " CSP & Integrity/NonCe " من كيفية/أمثلة ، من الضروري استخدام Function لسببين على الأقل:
"use strict"; التوجيه والمرور عبر بيان with(object) ، مطلوب لفهم الاستيفاءات دون إنشاء محرك JS بالكامل من الصفرrequire وظائف داخل <script type="module"> ولكن حتى لو لم تكن هناك Function في المعادلة ، فإن تحليل وتنفيذ علامة <script> لتحديد العناصر المخصصة سيكون هو نفس المكافئ بالضبط لاستخدام Function ، لأن CSP كانت بحاجة إلى قواعد خاصة على أي حال ، لأن العملية هي في الأساس دعوة تقييم في السياق العالمي.
كملخص ، بدلاً من خداع المتصفح بممارسات آمنة ، أو غير آمنة ، كمكالمة Function ، لقد استخدمت Function ببساطة بدلاً من ذلك ، مع الحفاظ على حجم الكود معقولًا.
هذا المشروع - يمكن أن يكون العناصر المخصصة الأصلية ، باستثناء تكلفة التعريف ، وهي عملية لمرة واحدة لكل فئة مخصصة فريدة من نوعها ، وبالتالي غير ذي صلة على المدى الطويل ، وهناك وجود ضئيل ضئيل في منطق القالب الأولي ، ولكن تنفيذها المتكرر يكون سريعًا كما يمكن أن يكون UHTML ، وإذا كنت ستجد أحدث حالة من الحافظة ، فستجد أن يكون أحدهما أسرع.
يمكنك التحقق من عرض DBMonster الكلاسيكي هنا ، ويرى أنه يعمل بشكل جيد.
لا شيء في هذه المكتبة يحظر ، ويتم حل الوحدات النمطية مرة واحدة فقط ، وحتى واردات المسار النسبي.
المنطق بسيط للغاية: إذا لم يتم حل اسم الوحدة النمطية وكان استيراد نسبيًا ، فسيتم تقديم طلب غير متزامن وتقييمه لاحقًا ، بينما إذا لم يتم حل الوحدة ، وسيكون اسمًا مؤهلاً ، فسيتم حله فقط بمجرد توفرها بعض الرمز.
كل هذا ، بالإضافة إلى الاستيراد الذي يتطلب حلًا ، يتم التعامل معه من قبل المساعد الذي يتردد في uce ، غير مقترن بهذه الوحدة نفسها ، حيث يمكن أن تلهم ، وأن تستخدم من قبل مشاريع أخرى أيضًا.
إذا كنت ترغب في فهم المزيد حول uce-template وكيف تعمل ، فيرجى التحقق من هذه الصفحة.
