引言
web components 是一个浏览器原生支持的组件化方案,允许你创建新的自定义、可封装、可重用的html 标记。不用加载任何外部模块,直接就可以在浏览器中跑。本文就简单介绍一下:使用 web components 实现一个类 element ui 中的 card 卡片组件。
随着前端工程化生态日益成熟,出现了很多优秀的框架,如:vue
、react
、angular
等等,极大的提高了日常开发效率。
其中组件化开发发挥了至关重要的作用,但是这些组件化开发都需要依赖第三方框架,编译打包之后才能在浏览器正常使用。
而原生组件 web components
,相比与第三方框架使用起来更简单直接,符合直觉,不用加载任何外部模块,代码量小。
web components 核心组成
- 自定义元素(custom element),使用
window.customelements.define
api注册 - shadow dom隔离,影藏标记结构、样式和行为
- 可以在
<template>
中定义标记结构、样式,多次重用。利用slot
插槽、命名插槽,可以传入定制化的结构ui,使用上类似vue
中的slot
插槽
1. custom elements
自定义的 html 标签,称为自定义元素(custom element)。根据规范,自定义元素的名称必须包含连词线-
,用与区别原生的 html 元素。所以,<com-card>
不能写成<comcard>
。
<div id="custom-card" class="com-card"> <div class="com-card-head"> <slot name="head"></slot> </div> <div class="com-card-body"> <slot></slot> <div class="link-wrap"> <a class="link" href="" title=" rel="external nofollow" rel="external nofollow" "></a> </div> </div> </div> <script> class comcard extends htmlelement { constructor() { super() var tplele = document.getelementbyid('custom-card') this.append(tplele) } } window.customelements.define('com-card', comcard) </script>
这样就注册了浏览器可识别渲染的一个自定义元素标签。
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
因为组件的样式应该与代码封装在一起,只对自定义元素生效,不影响外部的全局样式。所以,可以把样式写在<template>
里面,这样作为自定义元素结构的基础可以被多次重用。
<template id="custom-card-template"> <style> .com-card { } </style> <div class="com-card"> </div> </template> <script> class comcard extends htmlelement { constructor() { super(); var shadow = this.attachshadow({mode: 'closed'}) // open var tplele = document.getelementbyid('custom-card-template') var content = tplele.content.clonenode(true) shadow.appendchild(content) } } window.customelements.define('com-card', comcard); </script>
完整代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>web component</title> <style> * { box-sizing: border-box; } body { font-size: 14px; } .box { padding: 5px 0 30px; } .box .caption { display: none; } .box h1 { text-align: center; } .box li { color: #666; font-size: 14px; line-height: 1.8; margin-top: 15px; } .img { display: block; width: 80%; margin: 0 !important; } .card-head { display: flex; justify-content: space-between; align-items: center; } .card-title { color: #333; font-size: 16px; } .card-head-btn { color: #409eff; cursor: pointer; text-decoration: none !important; } .card-head-btn:hover { text-decoration: none; } </style> </head> <body> <div class="box"> <h1>web component</h1> <com-card data-show-head="0" data-url="https://tiven.cn" data-title="天问博客"> <div slot="head" class="card-head"> <div class="card-title">卡片名称</div> <a class="card-head-btn">操作按钮</a> </div> <img class="img" src="https://tiven.cn/static/img/kpl-sunwukong-a3lt-ed2ng9r4nfdm_9da.jpg" alt="天問"> </com-card> <com-card data-show-head="1" data-url="https://tiven.cn/p/de241e23/" data-title="vite+vue3+vant快速构建项目"> <div slot="head" class="card-head"> <div class="card-title">卡片名称</div> <a class="card-head-btn" onclick="hello()">操作按钮</a> </div> <img class="img" src="https://tiven.cn/static/img/kpl-xuance-jqx71qh7atflhv_gqvhic.jpg" alt="天問"> <ol> <li>君不见黄河之水天上来,奔流到海不复回。</li> <li>君不见高堂明镜悲白发,朝如青丝暮成雪。</li> <li>天生我材必有用,千金散尽还复来。</li> </ol> </com-card> </div> <template id="custom-card-template"> <style> .com-card { min-width: 200px; min-height: 100px; border-radius: 4px; border: 1px solid #ebeef5; background-color: #fff; overflow: hidden; color: #303133; transition: .3s; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .com-card-head { padding: 10px 20px; border-bottom: 1px solid #ebeef5; box-sizing: border-box; } .com-card-body { padding: 20px; } .link-wrap { text-align: left; padding-top: 20px; } .link { display: inline-block; height: 42px; line-height: 43px; padding: 0 30px; text-align: center; cursor: pointer; color: #fff; background-color: #409eff; border-color: #409eff; -webkit-appearance: none; box-sizing: border-box; outline: none; transition: .1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; font-size: 14px; border-radius: 4px; text-decoration: none !important; } </style> <div class="com-card"> <div class="com-card-head"> <slot name="head"></slot> </div> <div class="com-card-body"> <slot></slot> <div class="link-wrap"> <a class="link" href="" title=" rel="external nofollow" rel="external nofollow" "></a> </div> </div> </div> </template> <script> class comcard extends htmlelement { constructor() { super(); var shadow = this.attachshadow({mode: 'closed'}) // open var tplele = document.getelementbyid('custom-card-template') var content = tplele.content.clonenode(true) var attrlist = array.from(this.attributes); var props = attrlist.reduce((prev, item)=>{ prev[item.name] = item.value return prev }, {}) if (props['data-show-head']!=='1') { var head = content.queryselector('.com-card-head') head.remove() } var urlele = content.queryselector('.link') if (props['data-url'] && props['data-title']) { urlele.href = props['data-url'] urlele.title = props['data-title'] urlele.innertext = props['data-title'] } else { urlele.remove() } shadow.appendchild(content) } connectedcallback(){ //在这里发送数据请求(ajax) console.log('connectedcallback') } //被从文档dom中删除时调用 disconnectedcallback(){ console.log('disconnectedcallback') } //被移动到新的文档时调用 adoptedcallback(){ console.log('adoptedcallback') } //当增加、删除、修改自身的属性时被调用 attributechangedcallback(){ console.log('attributechangedcallback') } } window.customelements.define('com-card', comcard); function hello() { alert('hello,web component') } </script> </body> </html>
最终效果如上图所示
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的资料请关注其它相关文章!