调整代码结构

pull/1/head
yutent 2023-03-06 19:20:23 +08:00
parent 9bda193879
commit 880e355396
5 changed files with 87 additions and 69 deletions

1
.gitignore vendored
View File

@ -1,5 +1,4 @@
*.min.js *.min.js
*.min.css
.httpserver .httpserver
index.html index.html
test.js test.js

View File

@ -5,14 +5,3 @@
*/ */
export const finalize = Symbol('finalize') 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;
}
`

40
src/css.js Normal file
View File

@ -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)
}

32
src/html.js Normal file
View File

@ -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))
}

View File

@ -4,65 +4,14 @@
* @date 2023/03/03 11:21:44 * @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) { export { css, html }
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 class Component extends HTMLElement { export class Component extends HTMLElement {
// 声明要监听的属性
static get observedAttributes() { static get observedAttributes() {
this[finalize]() this[finalize]()
@ -78,6 +27,9 @@ export class Component extends HTMLElement {
this.created && this.created() this.created && this.created()
} }
/**
* 预处理rpops, styles等
*/
static [finalize]() { static [finalize]() {
if (this.finalized) { if (this.finalized) {
return return
@ -87,6 +39,11 @@ export class Component extends HTMLElement {
this.elemProps = new Map() this.elemProps = new Map()
const t = Object.getPrototypeOf(this)
console.log('>>>', t)
console.log('>>>', this)
for (let k in this.props) { for (let k in this.props) {
let prop = Symbol(k) let prop = Symbol(k)
let options = this.props[k] let options = this.props[k]
@ -107,6 +64,7 @@ export class Component extends HTMLElement {
return '' return ''
} }
// 组件节点被插入文档时触发的回调
connectedCallback() { connectedCallback() {
Object.defineProperty(this, 'root', { Object.defineProperty(this, 'root', {
value: this.shadowRoot || this.attachShadow({ mode: 'open' }), value: this.shadowRoot || this.attachShadow({ mode: 'open' }),
@ -115,7 +73,7 @@ export class Component extends HTMLElement {
adoptStyles(this.root, this.constructor.styles) adoptStyles(this.root, this.constructor.styles)
render(this.root, this.render()) renderRoot(this.root, this.render())
this.mounted && this.mounted() this.mounted && this.mounted()
} }