举一个简易事例外置知识要点这儿

admin 报建百科 2024-04-24 146 15

举一个简易事例外置知识要点这儿

我正参与「程序编写·启航计划」。

今日聊一个工作上遇到的困难，其实是非常简单的一个问题。

便是领导安排大家完成一个在vue2和vue3两种语言下都可以支撑的部件，而且在vue2项目及vue3工程中引进这一部件，较为简单方便。

后面做了一下调查，确定应用webComponent的形式封装形式这一部件。

从调查的数据看，webComponet存有兼容性设置问题，这一属性兼容性设置情况如下：

不过好在本公司根据chorme专业展开了一层封装形式，因此我们在使用的过程中，不用考虑浏览器兼容问题，封装形式电脑浏览器早已帮助我们解决了。

所以最终就选用的是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还是有一定的局限，主要是浏览器兼容问题。如果可以解决这些问题，在各个的前面学习环境中应用隐私功能做组件封装，也是很不错的计划方案。

那这篇文本文档对大家有所帮助，热烈欢迎关注点赞、关心或在下方留言，我会第一时间对于你的认同开展回复。精彩文章后边，避免跑丢，家人们可以直接点击关注，每一篇文章都可以及时联系不容易丢失。

本站是一个以CSS、JavaScript、Vue、HTML为中心的前端开发技术网址。我们的使命是为众多前端工程师者提供全方位、全方位、好用的前端工程师专业知识和技术服务。在网站上，大家可以学到最新前端开发技术，掌握前端工程师最新发布的趋势和良好实践。大家提供大量实例教程和实例，让大家可以快速上手前端工程师的关键技术和程序。本站还提供了一系列好用的工具软件，帮助你更高效地开展前端工程师工作中。公司提供的一种手段和软件都要经过精心策划和改进，能够帮助你节约时间精力，提高研发效率。此外，本站还拥有一个有活力的小区，你可以在社区里与其它前端工程师者沟通交流技术性、交流经验、处理问题。我们坚信，街道的能量能够帮助你能够更好地进步与成长。在网站上，大家可以寻找你需要的一切前端工程师网络资源，使您成为一名更加出色的网页开发者。欢迎你添加我们的大家庭，一起探索前端工程师的无限潜能!