如何优雅地在 Custom Elements 中使用第三方库

Custom Elements 是 Web Components 技术的核心之一,它可以帮助开发者更加自由地组织自己的网页元素。然而,与此同时,我们也会发现,在自己的元素内使用第三方库并不是一件易事,本文将提供一些实用的指导方案。

基础知识

Custom Elements 允许我们通过继承 HTMLElementHTMLButtonElement 等内置元素,并实现自定义的生命周期回调函数,从而创建我们自己的元素。

----- --------- ------- ----------- -
  ------------- -
    --------
    -- ---
  -

  ------------------- -
    -- ---
  -

  ---------------------- -
    -- ---
  -

  ------------------------------ --------- --------- -
    -- ---
  -

  ----------------- -
    -- ---
  -
-

----------------------------------- -----------

问题与解决方案

在以上基础上,我们可以继续扩展自己的元素。但是,如果我们使用了第三方库,我们就会发现在定义元素时,我们需要以某种方式将该组件及其依赖项打包成一个 JavaScript 包,并引入它。在这里,我们提供几种解决方案。

解决方案一:在元素上添加属性

我们可以将第三方库作为属性添加到自定义元素上:

----- --------- ------- ----------- -
  ------------- -
    --------

    ---------- - -------------
    -- -------- ---------- ------ ---
    -- ---
  -
-

----------------------------------- -----------

这种方式包含了很多缺点:

  • 在当前作用域内,myLib 必须至少存在一个全局变量,而这通常无法满足我们的需求。
  • 在引入的 myLib 这个库发生改变时,我们需要在每个引用了它的元素上做出相应调整,非常不利于维护。
  • 直接在元素实例上添加属性的方式非常不规范。

解决方案二:使用 npm,然后依赖注入

------ ----- ---- ---------

----- --------- ------- ----------- -
  ------------- -
    --------

    ---------- - ------
    -- ---
  -
-

----------------------------------- -----------

与解决方案一相比,这种方式更具可维护性和可读性。

但是,在一些场景下,这种方式仍然存在问题:

  • 如果我们需要将这个组件打包成一个单独的库,并且在未安装依赖的情况下,让它能够正常工作,那么这种方式就没办法处理了。
  • 有时,我们想要在但一个库中引用多个第三方库,如果每个元素中都依赖注入一遍,那该怎么办?

解决方案三:使用动态 import()

解决方案三非常简单,使用 import() 方式来导入库:

----- --------- ------- ----------- -
  ------------- -
    --------

    --------------------------- -- -
      -- ----------
      ---------- - ------
      -- ---
    ---
  -
-

----------------------------------- -----------

使用动态 import() 的方法可以在元素首次创建时将库导入,这通常是一个可行的解决方案。

注意:动态 import() 目前在一些浏览器中还未完全支持,请在使用前仔细查看兼容性报告。

最佳实践

最佳实践是解决方案的终极形式,请仔细阅读以确保您的元素能够正确工作。

方案一的最佳实践

------ ----- ---- ---------

----- ----- - --- --------

----- --------- ------- ----------- -
  ------------- -
    --------

    ----------- - -----
  -

  ----- ------------------- -
    -- ---------
    -- -------- -
      ----- -----------------
    -

    -- ----
    -- -------------- -
      -- ------------- -------- ---------------
      ----------- - --- --------
    -

    -- ---
  -
-

----------------------------------- -----------

方案二的最佳实践

----- --------- ------- ----------- -
  ------------- -
    --------

    ----------- - -----
  -

  ----- ------------------- -
    -- ---------
    -- -------------- -
      -- -----
      ----- - -------- ----- - - ----- -----------------

      -- ----
      ----------- - --- --------
    -

    -- ---
  -
-

----------------------------------- -----------

方案三的最佳实践

----- --------- ------- ----------- -
  ------------- -
    --------

    ----------- - -----
  -

  ----- ------------------- -
    -- -----
    ----- - -------- ----- - - ----- -----------------

    -- ----
    ----------- - --- --------

    -- ---
  -
-

----------------------------------- -----------

结论

本文介绍了三种在 Custom Elements 中使用第三方库的解决方案,并提供了最佳实践。对于使用 Web Components 的开发者来说,这些方案应该足够解决大多数开发问题。当然,不同的情况下,不同的方案可能更具优势。请根据个人需求作出选择。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/672394c02e7021665e109f19