likes
comments
collection
share

初试webComponent

作者站长头像
站长
· 阅读数 49

今天聊一个工作中遇到的问题，其实也是很简单的一个问题。

就是领导要求我们实现一个在vue2和vue3两种语言下都能支持的组件，并且在vue2项目和vue3项目中引入这个组件，比较快捷方便。

后面做了一下调研，决定使用webComponent的方式封装这个组件。

从调研的结果来看，webComponet存在浏览器兼容性的问题，这个属性的浏览器兼容性情况如下：

初试webComponent

但是好在我们公司基于谷歌浏览器专门进行了一层封装，所以我们在使用的时候，不需要考虑浏览器的兼容性问题，封装浏览器已经帮我们处理了。

所以最后就选用了webComponent这个方案实现。

下面我举一个简单的例子，说一下他的实现方式吧。

举一个简单例子

前置知识点

这里我以封装一个Button按钮组件为例，来向大家演示这个问题。我这里通过Shadow DOM的方式创建shaDom。

在创建好了之后需要穿管模板，模板中的html和css要保持分离的状态。

最后，将这个创建好的模板插入到shaDom中。

另外，在创建整个shaDom之后，整个过程会有4个生命周期函数，这4个生命周期函数如下。

1、connectedCallback：当自定义元素第一次被连接到文档 DOM 时被调用。
2、disconnectedCallback：当自定义元素与文档 DOM 断开连接时被调用。
3、adoptedCallback：当自定义元素被移动到新文档时被调用。
4、attributeChangedCallback：当自定义元素的一个属性被增加、移除或更改时被调用。

例子的代码

结合上面的知识，我把封装的代码例子贴出来。

  • index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<lz-btn></lz-btn>
<!-- 1. 使用自定义组件的方式引入 -->
<!-- <script src="./btn.js"></script> -->
<!-- 1. 使用template模板的方式引入 -->
<script src="./template.js"></script>
<script>

</script>
</body>
</html>
  • template.js
class Btn extends HTMLElement {
  constructor() {
    super();
    // 2. 设置shadow将html和css进行隔离
    const shaDom = this.attachShadow({ mode: 'open' })
    this.template = this.h('template');
    this.template.innerHTML = `
      <style>
        .btn{
          width: 200px;
          height: 200px;
          border: 1px solid green;
        }
      </style>
      <div class="btn">我叫小明</div>
    `;
    shaDom.appendChild(this.template.content.cloneNode(true));
  }
  h(el) {
    return document.createElement(el);
  }

  //四个生命周期函数 => 当自定义元素第一次被连接到文档 DOM 时被调用。
  connectedCallback () {
      console.log('我已经插入了！！！嗷呜')
  }

  //当自定义元素与文档 DOM 断开连接时被调用。
  disconnectedCallback () {
      console.log('我已经断开了！！！嗷呜')
  }

  //当自定义元素被移动到新文档时被调用
  adoptedCallback () {
      console.log('我被移动了！！！嗷呜')
  }
  //当自定义元素的一个属性被增加、移除或更改时被调用
  attributeChangedCallback () {
      console.log('我被改变了！！！嗷呜')
  }
}

// 1. 定义自定义元素'lz-btn'
window.customElements.define('lz-btn', Btn)

演示效果

看代码效果演示。

初试webComponent

总结

在日常项目中，使用webComponent还是有一定的局限性，主要就是浏览器的兼容性问题。如果能解决这个问题，在不同的前端语言环境中使用这个功能做组件封装，也是不错的方案。

如果这篇文档对你有帮助，欢迎点赞、关注或者在评论区留言，我会第一时间对你的认可进行回应。精彩内容在后面，防止跑丢，友友们可以先关注我，每一篇文章都能及时通知不会遗失。

转载自:https://juejin.cn/post/7235109911779246141
评论
请登录