您现在的位置是：网站首页> 编程资料编程资料
Web Components实现类Element UI中的Card卡片_JavaScript_
2023-05-24
421人已围观
简介 Web Components实现类Element UI中的Card卡片_JavaScript_
引言
Web Components 是一个浏览器原生支持的组件化方案，允许你创建新的自定义、可封装、可重用的HTML 标记。不用加载任何外部模块，直接就可以在浏览器中跑。本文就简单介绍一下：使用 Web Components 实现一个类 Element UI 中的 Card 卡片组件。
随着前端工程化生态日益成熟，出现了很多优秀的框架，如：Vue、React、Angular等等，极大的提高了日常开发效率。
其中组件化开发发挥了至关重要的作用，但是这些组件化开发都需要依赖第三方框架，编译打包之后才能在浏览器正常使用。
而原生组件 Web Components ，相比与第三方框架使用起来更简单直接，符合直觉，不用加载任何外部模块，代码量小。
Web Components 核心组成
- 自定义元素（custom element），使用
window.customElements.defineAPI注册 - Shadow DOM隔离，影藏标记结构、样式和行为
- 可以在
中定义标记结构、样式，多次重用。利用slot插槽、命名插槽，可以传入定制化的结构UI，使用上类似Vue中的slot插槽
1. Custom Elements
自定义的 HTML 标签，称为自定义元素（custom element）。根据规范，自定义元素的名称必须包含连词线-，用与区别原生的 HTML 元素。所以，
这样就注册了浏览器可识别渲染的一个自定义元素标签。
2. Shadow DOM
Shadow DOM 是对DOM的一个封装。可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。
使用自定义元素的 this.attachShadow() 方法可以开启 Shadow DOM。
class ComCard extends HTMLElement { constructor() { super() var shadow = this.attachShadow({mode: 'closed'}) // open var tplEle = document.getElementById('custom-card') shadow.appendChild(tplEle) } } window.customElements.define('com-card', ComCard); 其中参数{ mode: 'closed' }，表示 Shadow DOM 是封闭的，不允许外部访问。
3. templates 和 slots
因为组件的样式应该与代码封装在一起，只对自定义元素生效，不影响外部的全局样式。所以，可以把样式写在里面，这样作为自定义元素结构的基础可以被多次重用。
完整代码
最终效果如上图所示
Web Components vs Vue Components
| Vue Component | Web Component |
|---|---|
| data | 实例属性 |
| props | attributes |
| watch | observedAttributes、attributeChangedCallback |
| computed | getters |
| methods | class methods |
| mounted | connectedCallback |
| destroyed | disconnectedCallback |
| style scoped | template中的style |
| template | template |
Web Components 生命周期回调函数
connectedCallback：当 custom element首次被插入文档DOM时，被调用。
disconnectedCallback：当 custom element从文档DOM中删除时，被调用。
adoptedCallback：当 custom element被移动到新的文档时，被调用。
attributeChangedCallback: 当 custom element增加、删除、修改自身属性时，被调用。
优点 and 缺点
优点：
- 浏览器原生支持，不需要引入额外的第三方库
- 语义化
- 复用性，移植性高
- 不同团队不同项目可以共用组件
缺点：
- 需要操作DOM
- 目前浏览器兼容性、性能方面不够友好
- 和外部css交互比较难
基于web components的框架
LitElement 是一个快速、轻量级的 Web UI 框架。使用 lit-html 来渲染元素。
Polymer 是一款实用、基于事件驱动、封装性和交互性强的 Web UI 框架。
Omi 是基于 Web 组件的跨框架跨平台框架 。移动端 & 桌面 & 小程序。
以上就是Web Components实现类Element UI中的Card卡片的详细内容，更多关于Web Components实现Element UI的资料请关注其它相关文章！
相关内容
- 关于JavaScript使用export和import的两个报错解决_javascript技巧_
- vue项目中 jsconfig.json概念及使用步骤_vue.js_
- Yarn与Lerna管理monorepo使用详解_vue.js_
- package.json管理依赖包版本详解_javascript技巧_
- vue+element 多个相同的select不允许重复选择问题_vue.js_
- 微信小程序实现简单弹框效果_javascript技巧_
- 高级前端必会的package.json字段知识详解_JavaScript_
- 微信小程序自定义弹框效果_javascript技巧_
- 微信小程序实现计时器开始和结束功能_javascript技巧_
- 微信小程序实现获取手机号60s倒计时_javascript技巧_
点击排行
本栏推荐
