Custom Elements 是 Web Components 技术的核心之一,它可以帮助开发者更加自由地组织自己的网页元素。然而,与此同时,我们也会发现,在自己的元素内使用第三方库并不是一件易事,本文将提供一些实用的指导方案。
基础知识
Custom Elements 允许我们通过继承 HTMLElement
或 HTMLButtonElement
等内置元素,并实现自定义的生命周期回调函数,从而创建我们自己的元素。
----- --------- ------- ----------- - ------------- - -------- -- --- - ------------------- - -- --- - ---------------------- - -- --- - ------------------------------ --------- --------- - -- --- - ----------------- - -- --- - - ----------------------------------- -----------
问题与解决方案
在以上基础上,我们可以继续扩展自己的元素。但是,如果我们使用了第三方库,我们就会发现在定义元素时,我们需要以某种方式将该组件及其依赖项打包成一个 JavaScript 包,并引入它。在这里,我们提供几种解决方案。
解决方案一:在元素上添加属性
我们可以将第三方库作为属性添加到自定义元素上:
----- --------- ------- ----------- - ------------- - -------- ---------- - ------------- -- -------- ---------- ------ --- -- --- - - ----------------------------------- -----------
这种方式包含了很多缺点:
- 在当前作用域内,
myLib
必须至少存在一个全局变量,而这通常无法满足我们的需求。 - 在引入的
myLib
这个库发生改变时,我们需要在每个引用了它的元素上做出相应调整,非常不利于维护。 - 直接在元素实例上添加属性的方式非常不规范。
解决方案二:使用 npm
,然后依赖注入
------ ----- ---- --------- ----- --------- ------- ----------- - ------------- - -------- ---------- - ------ -- --- - - ----------------------------------- -----------
与解决方案一相比,这种方式更具可维护性和可读性。
但是,在一些场景下,这种方式仍然存在问题:
- 如果我们需要将这个组件打包成一个单独的库,并且在未安装依赖的情况下,让它能够正常工作,那么这种方式就没办法处理了。
- 有时,我们想要在但一个库中引用多个第三方库,如果每个元素中都依赖注入一遍,那该怎么办?
解决方案三:使用动态 import()
解决方案三非常简单,使用 import()
方式来导入库:
----- --------- ------- ----------- - ------------- - -------- --------------------------- -- - -- ---------- ---------- - ------ -- --- --- - - ----------------------------------- -----------
使用动态 import()
的方法可以在元素首次创建时将库导入,这通常是一个可行的解决方案。
注意:动态
import()
目前在一些浏览器中还未完全支持,请在使用前仔细查看兼容性报告。
最佳实践
最佳实践是解决方案的终极形式,请仔细阅读以确保您的元素能够正确工作。
方案一的最佳实践
------ ----- ---- --------- ----- ----- - --- -------- ----- --------- ------- ----------- - ------------- - -------- ----------- - ----- - ----- ------------------- - -- --------- -- -------- - ----- ----------------- - -- ---- -- -------------- - -- ------------- -------- --------------- ----------- - --- -------- - -- --- - - ----------------------------------- -----------
方案二的最佳实践
----- --------- ------- ----------- - ------------- - -------- ----------- - ----- - ----- ------------------- - -- --------- -- -------------- - -- ----- ----- - -------- ----- - - ----- ----------------- -- ---- ----------- - --- -------- - -- --- - - ----------------------------------- -----------
方案三的最佳实践
----- --------- ------- ----------- - ------------- - -------- ----------- - ----- - ----- ------------------- - -- ----- ----- - -------- ----- - - ----- ----------------- -- ---- ----------- - --- -------- -- --- - - ----------------------------------- -----------
结论
本文介绍了三种在 Custom Elements 中使用第三方库的解决方案,并提供了最佳实践。对于使用 Web Components 的开发者来说,这些方案应该足够解决大多数开发问题。当然,不同的情况下,不同的方案可能更具优势。请根据个人需求作出选择。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/672394c02e7021665e109f19