网站建设 事迹,上海网站建设 百家号,乐陵seo,南阳网站建设icp备您可能实际上并不需要所有这些#xff1b;通常有一个更简单的方法。如果有意使用#xff0c;此处显示的技术可能仍然对您的工具集有用。
为了保持一致性#xff0c;我们希望我们的自动加载器也成为一个自定义元素——这也意味着我们可以通过 HTML 轻松配置它。但首先#…您可能实际上并不需要所有这些通常有一个更简单的方法。如果有意使用此处显示的技术可能仍然对您的工具集有用。
为了保持一致性我们希望我们的自动加载器也成为一个自定义元素——这也意味着我们可以通过 HTML 轻松配置它。但首先让我们逐步确定那些未解决的自定义元素
span stylebackground-color:#1b1b1bspan stylecolor:#f5d67bcode classlanguage-javascriptspan stylecolor:#83ba52class/span AutoLoader span stylecolor:#83ba52extends/span HTMLElement span stylecolor:#72e0d1{/spanconnectedCallbackspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52let/span scope span stylecolor:#aa7ee1/span span stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spanparentNodespan stylecolor:#72e0d1;/spanspan stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spandiscoverspan stylecolor:#72e0d1(/spanscopespan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/span
span stylecolor:#72e0d1}/span
customElementsspan stylecolor:#72e0d1./spandefinespan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52ce-autoloader/spanspan stylecolor:#72e0d1,/span AutoLoaderspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/span/code/span/span
假设我们已经预先加载了这个模块使用async是理想的我们可以将一个ce-autoloader元素放入body我们的文档中。这将立即启动 的所有子元素的发现过程body这些子元素现在构成了我们的根元素。ce-autoloader我们可以通过添加到相应的容器元素来将发现限制在文档的子树中——实际上我们甚至可以为不同的子树设置多个实例。
当然我们仍然必须实现该discover方法作为上面类的一部分AutoLoader
span stylebackground-color:#1b1b1bspan stylecolor:#f5d67bcode classlanguage-javascriptdiscoverspan stylecolor:#72e0d1(/spanscopespan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52let/span candidates span stylecolor:#aa7ee1/span span stylecolor:#72e0d1[/spanscopespan stylecolor:#72e0d1,/span span stylecolor:#aa7ee1.../spanscopespan stylecolor:#72e0d1./spanquerySelectorAllspan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52*/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1]/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#83ba52for/spanspan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52let/span el span stylecolor:#83ba52of/span candidatesspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52let/span tag span stylecolor:#aa7ee1/span elspan stylecolor:#72e0d1./spanlocalNamespan stylecolor:#72e0d1;/spanspan stylecolor:#83ba52if/spanspan stylecolor:#72e0d1(/spantagspan stylecolor:#72e0d1./spanincludesspan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52-/spanspan stylecolor:#72e0d1)/span span stylecolor:#aa7ee1/span span stylecolor:#aa7ee1!/spancustomElementsspan stylecolor:#72e0d1./spanspan stylecolor:#83ba52get/spanspan stylecolor:#72e0d1(/spantagspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spanloadspan stylecolor:#72e0d1(/spantagspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#72e0d1}/span
span stylecolor:#72e0d1}/span/code/span/span
在这里我们检查我们的根元素以及每个后代 ( *)。如果它是一个自定义元素——如带连字符的标签所示——但尚未升级我们将尝试加载相应的定义。以这种方式查询 DOM 可能代价高昂所以我们应该小心一点。我们可以通过推迟这项工作来减轻主线程上的负载
span stylebackground-color:#1b1b1bspan stylecolor:#f5d67bcode classlanguage-javascriptconnectedCallbackspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52let/span scope span stylecolor:#aa7ee1/span span stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spanparentNodespan stylecolor:#72e0d1;/spanrequestIdleCallbackspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1)/span span stylecolor:#aa7ee1/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spandiscoverspan stylecolor:#72e0d1(/spanscopespan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/span
span stylecolor:#72e0d1}/span/code/span/span
requestIdleCallback还没有得到普遍支持但我们可以使用requestAnimationFrame作为后备
span stylebackground-color:#1b1b1bspan stylecolor:#f5d67bcode classlanguage-javascriptspan stylecolor:#83ba52let/span defer span stylecolor:#aa7ee1/span windowspan stylecolor:#72e0d1./spanrequestIdleCallback span stylecolor:#aa7ee1||/span requestAnimationFramespan stylecolor:#72e0d1;/spanspan stylecolor:#83ba52class/span AutoLoader span stylecolor:#83ba52extends/span HTMLElement span stylecolor:#72e0d1{/spanconnectedCallbackspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52let/span scope span stylecolor:#aa7ee1/span span stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spanparentNodespan stylecolor:#72e0d1;/spandeferspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1)/span span stylecolor:#aa7ee1/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spandiscoverspan stylecolor:#72e0d1(/spanscopespan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#5e7671em// .../em/span
span stylecolor:#72e0d1}/span/code/span/span
现在我们可以继续实现缺少的load方法来动态注入script元素
span stylebackground-color:#1b1b1bspan stylecolor:#f5d67bcode classlanguage-javascriptloadspan stylecolor:#72e0d1(/spantagspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52let/span el span stylecolor:#aa7ee1/span documentspan stylecolor:#72e0d1./spancreateElementspan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52script/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#83ba52let/span res span stylecolor:#aa7ee1/span span stylecolor:#83ba52new/span Promisespan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1(/spanresolvespan stylecolor:#72e0d1,/span rejectspan stylecolor:#72e0d1)/span span stylecolor:#aa7ee1/span span stylecolor:#72e0d1{/spanelspan stylecolor:#72e0d1./spanaddEventListenerspan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52load/spanspan stylecolor:#72e0d1,/span ev span stylecolor:#aa7ee1/span span stylecolor:#72e0d1{/spanresolvespan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52null/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanelspan stylecolor:#72e0d1./spanaddEventListenerspan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52error/spanspan stylecolor:#72e0d1,/span ev span stylecolor:#aa7ee1/span span stylecolor:#72e0d1{/spanrejectspan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52new/span Errorspan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52failed to locate custom-element definition/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanelspan stylecolor:#72e0d1./spansrc span stylecolor:#aa7ee1/span span stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spanelementURLspan stylecolor:#72e0d1(/spantagspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spandocumentspan stylecolor:#72e0d1./spanheadspan stylecolor:#72e0d1./spanappendChildspan stylecolor:#72e0d1(/spanelspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#83ba52return/span resspan stylecolor:#72e0d1;/span
span stylecolor:#72e0d1}/spanelementURLspan stylecolor:#72e0d1(/spantagspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52return/span span stylecolor:#83ba52/spanspan stylecolor:#72e0d1${/spanspan stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spanrootDirspan stylecolor:#72e0d1}/spanspan stylecolor:#83ba52//spanspan stylecolor:#72e0d1${/spantagspan stylecolor:#72e0d1}/spanspan stylecolor:#83ba52.js/spanspan stylecolor:#72e0d1;/span
span stylecolor:#72e0d1}/span/code/span/span
请注意elementURL. 该src属性的 URL 假设有一个目录所有自定义元素定义都位于该目录中例如my-widget→ /components/my-widget.js。我们可以提出更详尽的策略但这足以满足我们的目的。将此 URL 委托给一个单独的方法允许在需要时进行特定于项目的子类化
span stylebackground-color:#1b1b1bspan stylecolor:#f5d67bcode classlanguage-javascriptspan stylecolor:#83ba52class/span FancyLoader span stylecolor:#83ba52extends/span AutoLoader span stylecolor:#72e0d1{/spanelementURLspan stylecolor:#72e0d1(/spantagspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#5e7671em// fancy logic/em/spanspan stylecolor:#72e0d1}/span
span stylecolor:#72e0d1}/span/code/span/span
无论哪种方式请注意我们依赖于this.rootDir. 这就是前面提到的可配置性的用武之地。让我们添加一个相应的 getter
span stylebackground-color:#1b1b1bspan stylecolor:#f5d67bcode classlanguage-javascriptspan stylecolor:#83ba52get/span rootDirspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52let/span uri span stylecolor:#aa7ee1/span span stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spangetAttributespan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52root-dir/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#83ba52if/spanspan stylecolor:#72e0d1(/spanspan stylecolor:#aa7ee1!/spanurispan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52throw/span span stylecolor:#83ba52new/span Errorspan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52cannot auto-load custom elements: missing root-dir/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#83ba52if/spanspan stylecolor:#72e0d1(/spanurispan stylecolor:#72e0d1./spanendsWithspan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52//spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/span span stylecolor:#5e7671em// remove trailing slash/em/spanspan stylecolor:#83ba52return/span urispan stylecolor:#72e0d1./spansubstringspan stylecolor:#72e0d1(/spanspan stylecolor:#fc94630/spanspan stylecolor:#72e0d1,/span urispan stylecolor:#72e0d1./spanlength span stylecolor:#aa7ee1-/span span stylecolor:#fc94631/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#83ba52return/span urispan stylecolor:#72e0d1;/span
span stylecolor:#72e0d1}/span/code/span/span
您现在可能正在考虑observedAttributes但这并没有真正让事情变得更容易。另外root-dir在运行时进行更新似乎是我们永远不需要的。
现在我们可以——而且必须——配置我们的元素目录ce-autoloader root-dir/components.
有了这个我们的自动加载器就可以完成它的工作了。除了它只工作一次对于初始化自动加载器时已经存在的元素。我们可能还想考虑动态添加的元素。这就是MutationObserver发挥作用的地方
span stylebackground-color:#1b1b1bspan stylecolor:#f5d67bcode classlanguage-javascriptconnectedCallbackspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52let/span scope span stylecolor:#aa7ee1/span span stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spanparentNodespan stylecolor:#72e0d1;/spandeferspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1)/span span stylecolor:#aa7ee1/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spandiscoverspan stylecolor:#72e0d1(/spanscopespan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#83ba52let/span observer span stylecolor:#aa7ee1/span span stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./span_observer span stylecolor:#aa7ee1/span span stylecolor:#83ba52new/span MutationObserverspan stylecolor:#72e0d1(/spanmutations span stylecolor:#aa7ee1/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52for/spanspan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52let/span span stylecolor:#72e0d1{/span addedNodes span stylecolor:#72e0d1}/span span stylecolor:#83ba52of/span mutationsspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52for/spanspan stylecolor:#72e0d1(/spanspan stylecolor:#83ba52let/span node span stylecolor:#83ba52of/span addedNodesspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spandeferspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1)/span span stylecolor:#aa7ee1/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./spandiscoverspan stylecolor:#72e0d1(/spannodespan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#72e0d1}/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/spanobserverspan stylecolor:#72e0d1./spanobservespan stylecolor:#72e0d1(/spanscopespan stylecolor:#72e0d1,/span span stylecolor:#72e0d1{/span subtreespan stylecolor:#72e0d1:/span span stylecolor:#fc9463true/spanspan stylecolor:#72e0d1,/span childListspan stylecolor:#72e0d1:/span span stylecolor:#fc9463true/span span stylecolor:#72e0d1}/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/span
span stylecolor:#72e0d1}/spandisconnectedCallbackspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1)/span span stylecolor:#72e0d1{/spanspan stylecolor:#83ba52this/spanspan stylecolor:#72e0d1./span_observerspan stylecolor:#72e0d1./spandisconnectspan stylecolor:#72e0d1(/spanspan stylecolor:#72e0d1)/spanspan stylecolor:#72e0d1;/span
span stylecolor:#72e0d1}/span/code/span/span
这样每当 DOM 中出现新元素时浏览器就会通知我们——或者更确切地说我们各自的子树——然后我们使用它来重新启动发现过程。你可能会争辩说我们在这里重新发明了自定义元素你是对的。
我们的自动装载机现在功能齐全。未来的增强可能会研究潜在的竞争条件并研究优化。但对于大多数情况来说这可能已经足够好了。
