当前位置：网站首页>Web Components
Web Components
2022-07-05 10:47:00 【Code Bruce Lee】
Web Components
Introduce
Google has mastered Chrome browser , So we have been promoting the native components of browsers , That is to say Web Components API
Compared with third-party frameworks , Native components are simple and straightforward , No external modules are loaded , Small amount of code
Allows you to create reusable custom elements , And in our web Use them directly in applications
Core technology composition
Custom elements Custom elements
A group of JavaScript API, Allow definition of custom elements And their behavior , Then use them as needed in the user interface
Shadow DOM shadow DOM
A group of JavaScript API, Used to encapsulate the shadow DOM Trees are attached to elements ( With the main document DOM Present separately ), And control its associated functions
In this way , We can keep the function of elements private , So they can be scripted and stylized , Don't worry about conflicts with other parts of the document
HTML template html Templates
And elements allow you to write markup templates that are not displayed in rendering pages , Then they can be reused many times as the basis for a custom element structure
Life cycle function
connectedCallback
When a custom element is first connected to a document DOM When called
disconnectedCallback
When custom elements and documents DOM Called when disconnected
adoptedCallback
Called when a custom element is moved to a new document
attributeChangedCallback
When the first attribute of the custom element is added 、 Called when removed or changed
Instance development
example 1： The date of the component
01.png
Directory structure
|-scripts
|–date.time.js
|-index.html
Development date component
(() => {
// Create a template
const template = document.createElement(‘template’)
// The tag element contains the specific styles and DOM
template.innerHTML = `
`
// Create custom datetime Component class DateTime, As long as inherit HTMLElement Class can write custom tags / Elements
class DateTime extends HTMLElement {
/**
* constructor Life cycle function
* @description Element creates , But not added to the page
* @description Generally speaking, it needs to be in constructor Create initialization state in , Event monitoring and shadow creation DOM
*/
constructor () {
// call super Method , You need to use it to call the parent constructor
super()
/**
* attachShadow shadow DOM
* @param open Allow access to
* @param closed Close the external access
*/
this.attachShadow({ mode: ‘open’ })
/**
* shadowRoot shadow DOM The root node
* @description template.content Is a free document fragment
* @description cloneNode(params) params -> boolean [true|false]
* true -> Deep traversal cloning
*/
this.shadowRoot.appendChild(template.content.cloneNode(true))
}
// Initialization time
initDateTime () {
// Get the current time object
let date = new Date()
// Create an English month enumeration array
let month = [‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’]
// The year, month, and day that the packaging configuration needs to be used
let dateConfig = {
date: date.getDate() >= 10 ? date.getDate() : ‘0’ + date.getDate(),
month: month[date.getMonth()],
year: date.getFullYear()
}
// console.log(dateConfig)
// datetime Content rendering display
this.shadowRoot.querySelector(‘.datetime-box__wrap–day’).innerText = dateConfig.date
this.shadowRoot.querySelector(‘.datetime-box__wrap–month’).innerText = dateConfig.month
this.shadowRoot.querySelector(‘.datetime-box__wrap–year’).innerText = dateConfig.year
}
/**
* connectedCallback Life cycle function
* @description When a custom element is first connected to a document DOM When called
* @description Element inserted DOM When it comes to execution , Generally speaking, it is used to obtain data , Set the default display style or content
*/
connectedCallback () {
this.initDateTime()
}
}
/**
* Global registration component
* @description Mount the component class to DOM Up , Custom tag names use our components
*/
window.customElements.define(‘date-time’, DateTime)
})()
Page references
example 2： list ( details ) Components
02.png
Directory structure
|-images
|-scripts
|–article-info.js
|–article-info-detail.js
|–article-data.js
|–script.js
|-index.html
html structure
-
-
Comment -
-
- *
-
`
class ArticleInfo extends HTMLElement {
constructor () {
super()
this.attachShadow({ mode: ‘open’ })
this.shadowRoot.appendChild(template.content.cloneNode(true))
this.initEvent()
}
/**
* Initialize event
* @description Use CustomEvent Define custom events
*/
initEvent () {
const cardInfo = this.$(‘.card-info’)
cardInfo.addEventListener(‘click’, (ev) => {
let myEventInfo = new CustomEvent(‘card-click’, {
composed: true,
bubbles: true
})
this.dispatchEvent(myEventInfo)
})
}
$(selector) {
return this.shadowRoot.querySelector(selector)
}
initRender () {
this.KaTeX parse error: Expected group after '_' at position 13: ('.card-info_̲_cover--image')…(‘.card-info__cover–title’).innerText = this.getAttribute(‘theme’)
this.KaTeX parse error: Expected group after '_' at position 13: ('.card-info_̲_avatar').src =…(‘.card-info__author’).innerText = this.getAttribute(‘author’)
this.$(‘.card-info__title’).innerText = this.getAttribute(‘title’)
}
connectedCallback () {
this.initRender()
}
}
window.customElements.define(‘arcitle-info’, ArticleInfo)
})()
Develop detail components
(() => {
const template = document.createElement(‘template’)
template.innerHTML = <img class="cover" src=""/> <span class="theme"></span> <img class="avatar" src=""/> <span class="author"></span> <span class="title"></span> <span class="comments"></span> <span class="likes"></span> <span class="shares"></span> <p class="p"></p> <button class="back">Back</button>
class ArticleInfoDetail extends HTMLElement {
constructor () {
super()
this.attachShadow({ mode: ‘open’ })
this.shadowRoot.appendChild(template.content.cloneNode(true))
this.initEvent()
}
initEvent () {
const backBtn = this.$(‘.back’)
backBtn.addEventListener(‘click’, (ev) => {
let myEvent = new CustomEvent(‘card-back-click’, {
composed: true,
bubbles: true
})
this.dispatchEvent(myEvent)
})
}
$(selector) {
return this.shadowRoot.querySelector(selector)
}
initRender () {
this. ( ′ . c o v e r ′ ) . s r c = t h i s . g e t A t t r i b u t e ( ′ c o v e r ′ ) t h i s . ('.cover').src = this.getAttribute('cover') this. (′.cover′).src=this.getAttribute(′cover′)this.(‘.theme’).innerText = this.getAttribute(‘theme’)
this. ( ′ . a v a t a r ′ ) . s r c = t h i s . g e t A t t r i b u t e ( ′ a v a t a r ′ ) t h i s . ('.avatar').src = this.getAttribute('avatar') this. (′.avatar′).src=this.getAttribute(′avatar′)this.(‘.author’).innerText = this.getAttribute(‘author’)
this. ( ′ . t i t l e ′ ) . i n n e r T e x t = t h i s . g e t A t t r i b u t e ( ′ t i t l e ′ ) t h i s . ('.title').innerText = this.getAttribute('title') this. (′.title′).innerText=this.getAttribute(′title′)this.(‘.comments’).innerText = this.getAttribute(‘comments’)
this. ( ′ . l i k e s ′ ) . i n n e r T e x t = t h i s . g e t A t t r i b u t e ( ′ l i k e s ′ ) t h i s . ('.likes').innerText = this.getAttribute('likes') this. (′.likes′).innerText=this.getAttribute(′likes′)this.(‘.shares’).innerText = this.getAttribute(‘shares’)
this.$(‘.p’).innerText = this.getAttribute(‘p’)
}
connectedCallback () {
this.initRender()
}
/**
* attributeChangedCallback Life cycle function
* @param name
* @param oldValue
* @param newValue
* @description When the first attribute of the custom element is added 、 Called when removed or changed
*/
attributeChangedCallback (name, oldValue, newValue) {
// console.log(name, oldValue, newValue)
this.initRender()
}
// Changes in listening properties - The property value corresponding to each returned property name changes , Will trigger the corresponding attributeChangedCallback Method
static get observedAttributes () {
return [‘id’, ‘cover’, ‘theme’, ‘avatar’, ‘author’, ‘title’, ‘comments’, ‘likes’, ‘shares’, ‘p’]
}
}
window.customElements.define(‘arcitle-info-detail’, ArticleInfoDetail)
})()
scripts.js
(() => {
let container = document.querySelector(‘.container’)
let str = ‘’
// Traverse to get all the article information
cardData.forEach(item => {
str += <arcitle-info id="${item.id}" cover="${item.cover}" theme="${item.theme}" avatar="${item.avatar}" author="${item.author}" title="${item.title}"> <span slot="comments">${item.comments}</span> <span slot="likes">${item.likes}</span> <span slot="shares">${item.shares}</span> </arcitle-info>
})
// append To container in
container.innerHTML = str
document.body.addEventListener(‘card-click’, (ev) => {
let id = ev.target.id
let detailWrap = document.querySelector(‘.container-detail-wrap’)
let cardDetail = document.querySelector(‘arcitle-info-detail’)
// get arcitle data from id
let articleSelectData = cardData.filter(v => v.id === id)[0]
Object.keys(articleSelectData).forEach(key => {
cardDetail.setAttribute(key, articleSelectData[key])
})
// The animation shows the article details page
detailWrap.style.left = 0;
detailWrap.style.opacity = 1;
})
document.body.addEventListener(‘card-back-click’, (ev) => {
let detailWrap = document.querySelector(‘.container-detail-wrap’)
// The animation shows the article details page
detailWrap.style.left = ‘100%’;
detailWrap.style.opacity = 0;
})
})()
边栏推荐
猜你喜欢
九、磁盘管理
Go语言-1-开发环境配置
How can non-technical departments participate in Devops?
![[dark horse morning post] Luo Yonghao responded to ridicule Oriental selection; Dong Qing's husband Mi Chunlei was executed for more than 700million; Geely officially acquired Meizu; Huawei releases M](/img/d7/4671b5a74317a8f87ffd36be2b34e1.jpg)
[dark horse morning post] Luo Yonghao responded to ridicule Oriental selection; Dong Qing's husband Mi Chunlei was executed for more than 700million; Geely officially acquired Meizu; Huawei releases M
Ad20 make logo
DGL中异构图的一些理解以及异构图卷积HeteroGraphConv的用法
赛克瑞浦动力电池首台产品正式下线
微信核酸检测预约小程序系统毕业设计毕设（7）中期检查报告
【DNS】“Can‘t resolve host“ as non-root user, but works fine as root
Go language-1-development environment configuration
随机推荐
QT implements JSON parsing
双向RNN与堆叠的双向RNN
Broyage · fusion | savoir que le site officiel de chuangyu mobile end est en ligne et commencer le voyage de sécurité numérique!
Lazy loading scheme of pictures
2022鹏城杯web
基于昇腾AI丨以萨技术推出视频图像全目标结构化解决方案，达到业界领先水平
LSTM应用于MNIST数据集分类(与CNN做对比)
PWA (Progressive Web App)
Crawler (9) - scrape framework (1) | scrape asynchronous web crawler framework
Buried point 111
[可能没有默认的字体]Warning: imagettfbbox() [function.imagettfbbox]: Invalid font filename……
websocket
PHP solves the problems of cache avalanche, cache penetration and cache breakdown of redis
GO项目实战 — Gorm格式化时间字段
App各大应用商店/应用市场网址汇总
Nine degrees 1480: maximum ascending subsequence sum (dynamic programming idea for the maximum value)
【tcp】服务器上tcp连接状态json形式输出
Golang应用专题 - channel
非技術部門，如何參與 DevOps？
微信核酸检测预约小程序系统毕业设计毕设（6）开题答辩PPT