Base Class
class Base extends HTMLElement {
constructor() {
super()
this._properties = new Map()
// 配置properties与attribute的映射
this.constructor.observedAttributes.forEach(attr => {
Object.defineProperty(this, attr, {
get() {
let _attr = this.getAttribute(attr)
return this._properties.get(_attr)
},
set(v) {
let _uni_key = new Date().getTime().toString(16)
this._properties.set(_uni_key, v)
if (v === undefined || v === null) {
this.removeAttribute(attr)
} else {
this.setAttribute(attr, _uni_key)
}
}
})
})
}
attributeChangedCallback(attr, oldValue, newValue) {
let _callbackName = `_${attr}_change`
if (this[_callbackName] && typeof this[_callbackName] === 'function') {
this[_callbackName](this._properties.get(oldValue), this._properties.get(newValue))
}
}
connectedCallback() {
if (this.mounted && typeof this.mounted === 'function') {
this.mounted()
}
}
adoptedCallback() {
if (this.moved && typeof this.moved === 'function') {
this.moved()
}
}
disconnectedCallback() {
if (this.unmounted && typeof this.unmounted === 'function') {
this.unmounted()
}
}
}