当前位置：网站首页>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;
})
})()
边栏推荐
猜你喜欢
非技术部门，如何参与 DevOps？
Solution of ellipsis when pytorch outputs tensor (output tensor completely)
Go-3-第一个Go程序
32：第三章：开发通行证服务：15：浏览器存储介质，简介；（cookie，Session Storage，Local Storage）
Comparative learning in the period of "arms race"
Go语言-1-开发环境配置
32: Chapter 3: development of pass service: 15: Browser storage media, introduction; （cookie，Session Storage，Local Storage）
Window下线程与线程同步总结
Broyage · fusion | savoir que le site officiel de chuangyu mobile end est en ligne et commencer le voyage de sécurité numérique!
Learning Note 6 - satellite positioning technology (Part 1)
随机推荐
变量///
How does redis implement multiple zones?
Lazy loading scheme of pictures
Idea create a new sprintboot project
Golang应用专题 - channel
重磅：国产IDE发布，由阿里研发，完全开源！
Sqlserver regularly backup database and regularly kill database deadlock solution
Learning notes 5 - high precision map solution
Go-2-Vim IDE常用功能
风控模型启用前的最后一道工序，80%的童鞋在这都踩坑
C language QQ chat room small project [complete source code]
How can PostgreSQL CDC set a separate incremental mode, debezium snapshot. mo
非技術部門，如何參與 DevOps？
九度 1480：最大上升子序列和(动态规划思想求最值)
Node の MongoDB Driver
磨礪·聚變｜知道創宇移動端官網煥新上線，開啟數字安全之旅！
Go语言-1-开发环境配置
小程序框架Taro
Web3基金会「Grant计划」赋能开发者，盘点四大成功项目
跨页面通讯