调整代码结构
parent
9bda193879
commit
880e355396
|
@ -1,5 +1,4 @@
|
|||
*.min.js
|
||||
*.min.css
|
||||
.httpserver
|
||||
index.html
|
||||
test.js
|
||||
|
|
|
@ -5,14 +5,3 @@
|
|||
*/
|
||||
|
||||
export const finalize = Symbol('finalize')
|
||||
export const RESET_CSS_STYLE = css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`
|
||||
|
|
|
@ -0,0 +1,40 @@
|
|||
/**
|
||||
* {}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @date 2023/03/06 16:27:49
|
||||
*/
|
||||
|
||||
export const RESET_CSS_STYLE = css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`
|
||||
|
||||
export function css(strs, ...args) {
|
||||
let output = `
|
||||
|
||||
`
|
||||
let tmp = Array.from(strs)
|
||||
while (tmp.length) {
|
||||
output += tmp.shift() + (args.shift() || '')
|
||||
}
|
||||
return output
|
||||
}
|
||||
|
||||
export function adoptStyles(root, styles = '') {
|
||||
let sheet = new CSSStyleSheet()
|
||||
if (typeof styles === 'string') {
|
||||
styles = [styles]
|
||||
} else {
|
||||
styles = styles.flat(Infinity)
|
||||
}
|
||||
styles = (RESET_CSS_STYLE + styles.join(' ')).trim()
|
||||
sheet.replaceSync(styles)
|
||||
root.adoptedStyleSheets.push(sheet)
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
export function html(strs, ...args) {
|
||||
let output = ''
|
||||
let tmp = Array.from(strs)
|
||||
// console.log(tmp, args)
|
||||
|
||||
while (tmp.length) {
|
||||
let _ = args.shift()
|
||||
switch (typeof _) {
|
||||
case 'function':
|
||||
console.log([_], _.name)
|
||||
_ = _.name
|
||||
break
|
||||
case 'object':
|
||||
if (Array.isArray(_)) {
|
||||
_ = _.join('')
|
||||
}
|
||||
break
|
||||
}
|
||||
output += tmp.shift() + (_ === void 0 ? '' : _)
|
||||
}
|
||||
return output
|
||||
}
|
||||
|
||||
function getTemplate(html) {
|
||||
let template = document.createElement('template')
|
||||
template.innerHTML = html
|
||||
return template.content.cloneNode(true)
|
||||
}
|
||||
|
||||
export function renderRoot(root, html) {
|
||||
root.appendChild(getTemplate(html))
|
||||
}
|
72
src/index.js
72
src/index.js
|
@ -4,65 +4,14 @@
|
|||
* @date 2023/03/03 11:21:44
|
||||
*/
|
||||
|
||||
import { finalize, RESET_CSS_STYLE } from './constants.js'
|
||||
import { finalize } from './constants.js'
|
||||
import { css, adoptStyles } from './css.js'
|
||||
import { html, renderRoot } from './html.js'
|
||||
|
||||
export function css(strs, ...args) {
|
||||
let output = `
|
||||
|
||||
`
|
||||
let tmp = Array.from(strs)
|
||||
while (tmp.length) {
|
||||
output += tmp.shift() + (args.shift() || '')
|
||||
}
|
||||
return output
|
||||
}
|
||||
|
||||
export function html(strs, ...args) {
|
||||
let output = ''
|
||||
let tmp = Array.from(strs)
|
||||
// console.log(tmp, args)
|
||||
|
||||
while (tmp.length) {
|
||||
let _ = args.shift()
|
||||
switch (typeof _) {
|
||||
case 'function':
|
||||
console.log([_], _.name)
|
||||
_ = _.name
|
||||
break
|
||||
case 'object':
|
||||
if (Array.isArray(_)) {
|
||||
_ = _.join('')
|
||||
}
|
||||
break
|
||||
}
|
||||
output += tmp.shift() + (_ === void 0 ? '' : _)
|
||||
}
|
||||
return output
|
||||
}
|
||||
|
||||
function getTemplate(html) {
|
||||
let template = document.createElement('template')
|
||||
template.innerHTML = html
|
||||
return template.content.cloneNode(true)
|
||||
}
|
||||
|
||||
function adoptStyles(root, styles = '') {
|
||||
let sheet = new CSSStyleSheet()
|
||||
if (typeof styles === 'string') {
|
||||
styles = [styles]
|
||||
} else {
|
||||
styles = styles.flat(Infinity)
|
||||
}
|
||||
styles = (RESET_CSS_STYLE + styles.join(' ')).trim()
|
||||
sheet.replaceSync(styles)
|
||||
root.adoptedStyleSheets.push(sheet)
|
||||
}
|
||||
|
||||
function render(root, html) {
|
||||
root.appendChild(getTemplate(html))
|
||||
}
|
||||
export { css, html }
|
||||
|
||||
export class Component extends HTMLElement {
|
||||
// 声明要监听的属性
|
||||
static get observedAttributes() {
|
||||
this[finalize]()
|
||||
|
||||
|
@ -78,6 +27,9 @@ export class Component extends HTMLElement {
|
|||
this.created && this.created()
|
||||
}
|
||||
|
||||
/**
|
||||
* 预处理rpops, styles等
|
||||
*/
|
||||
static [finalize]() {
|
||||
if (this.finalized) {
|
||||
return
|
||||
|
@ -87,6 +39,11 @@ export class Component extends HTMLElement {
|
|||
|
||||
this.elemProps = new Map()
|
||||
|
||||
const t = Object.getPrototypeOf(this)
|
||||
|
||||
console.log('>>>', t)
|
||||
console.log('>>>', this)
|
||||
|
||||
for (let k in this.props) {
|
||||
let prop = Symbol(k)
|
||||
let options = this.props[k]
|
||||
|
@ -107,6 +64,7 @@ export class Component extends HTMLElement {
|
|||
return ''
|
||||
}
|
||||
|
||||
// 组件节点被插入文档时触发的回调
|
||||
connectedCallback() {
|
||||
Object.defineProperty(this, 'root', {
|
||||
value: this.shadowRoot || this.attachShadow({ mode: 'open' }),
|
||||
|
@ -115,7 +73,7 @@ export class Component extends HTMLElement {
|
|||
|
||||
adoptStyles(this.root, this.constructor.styles)
|
||||
|
||||
render(this.root, this.render())
|
||||
renderRoot(this.root, this.render())
|
||||
|
||||
this.mounted && this.mounted()
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue