html5语义标签

README.md

@@ -113,3 +113,14 @@ document.body.appendChild(div.w(20).h(20).children(items))
 虽然这与 pug 中 `div.w-8.h-12` 赋予元素 class 名的概念基本相同, 但实际并不会给元素赋予 class 名, 它只是一个方法去设置元素样式, 因为在 js 的实现中过多引入 css 概念是没有意义的(至少目前我这么认为)
 
 CSS 的便捷性还有两点, 一是伪元素和伪类(:hover ::after), 一是选择器(div.text#ctx.mix > .cc { width: 12px }), 在js中目前没有很好的实现方法, 此事只能再议
+
+
+三种情境:
+div({})
+div.text('')
+new div({})
+
+符合直觉的标准
+1. 元素在初始化前是 class 而不是 function, 这在编辑器中渲染的样式也将不同
+2. 直接导出 html5 语义标签
+3. 额外添加的快捷方法都是缩写, 将避免与默认属性或方法冲突

index.js

@@ -1,20 +1,10 @@
-//import { Button, Main } from "./main.js";
+import { div, span, pre } from './main.js'
-//
-//document.body.appendChild(Main({
-//    children: [Button({
-//        textContent: 'Hello world',
-//        onclick: event => console.log('Hello world')
-//    })]
-//}));
 
-import { div, pre } from './main.js'
+document.body.appendChild(div.w(128).h(64).childs([
-
+    span.text('Hello world!'),
-//const demo = div.w(128).h(64) //.onclick.stop('click').children([
+    new span({ textContent: 'Hello world!' }),
-
-document.body.appendChild(div.w(128).h(64).children([
-    div.text('Hello world!')
 ]))
 
-//fetch('./index.js').then(res => res.text()).then(text => {
+fetch('/index.js').then(res => res.text()).then(text => {
-//    document.body.appendChild(pre.text(text))
+    document.body.appendChild(pre.p('2rem').bg('#ececec').text(text.substring(0, text.indexOf('fetch'))))
-//})
+})

main.js

@@ -12,74 +12,512 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
     if (innerHTML) element.innerHTML = innerHTML
     if (readOnly) element.readOnly = readOnly
     if (children) children.forEach(child => element.appendChild(child))
+
+    element.w = (width) => { element.style.width = width; return element }
+    element.h = (height) => { element.style.height = height; return element }
+    element.text = (text) => { element.textContent = text; return element }
+    element.html = (html) => { element.innerHTML = html; return element }
+    element.childs = (childs) => { childs.forEach(child => element.appendChild(child)); return element }
+    element.bg = (color) => { element.style.backgroundColor = color; return element }
+    element.p = (padding) => { element.style.padding = padding; return element }
     return element
 }
 
 /* HTML5 语义标签 */
-export const List = (options) => createElement(options, 'ul')
+export class BaseElement {
-export const ListItem = (options) => createElement(options, 'li')
+    constructor(options) {
-export const Span = (options) => createElement(options, 'span')
+        return createElement(options, this.constructor.name)
-export const Button = (options) => createElement({ ...options, style: { cursor: 'pointer', ...options.style } }, 'button')
+    }
-export const Form = (options) => createElement(options, 'form')
+    static text(text) {
-export const Header = (options) => createElement(options, 'header')
+        return createElement({ textContent: text }, this.name)
-export const Nav = (options) => createElement(options, 'nav')
+    }
-export const Main = (options) => createElement(options, 'main')
+    static html(html) {
-export const Article = (options) => createElement(options, 'article')
+        return createElement({ innerHTML: html }, this.name)
-export const Section = (options) => createElement(options, 'section')
+    }
-export const Aside = (options) => createElement(options, 'aside')
+    static childs(childs) {
-export const Footer = (options) => createElement(options, 'footer')
+        return createElement({ children: childs }, this.name)
-export const H1 = (options) => createElement(options, 'h1')
+    }
-export const H2 = (options) => createElement(options, 'h2')
+    static w(width) {
-export const H3 = (options) => createElement(options, 'h3')
+        return createElement({ style: { width } }, this.name)
-export const H4 = (options) => createElement(options, 'h4')
+    }
-export const H5 = (options) => createElement(options, 'h5')
+    static h(height) {
-export const H6 = (options) => createElement(options, 'h6')
+        return createElement({ style: { height } }, this.name)
-export const P = (options) => createElement(options, 'p')
+    }
-export const A = (options) => createElement(options, 'a')
+    static bg(color) {
-export const Strong = (options) => createElement(options, 'strong')
+        return createElement({ style: { backgroundColor: color } }, this.name)
-export const Em = (options) => createElement(options, 'em')
+    }
-export const Small = (options) => createElement(options, 'small')
+    static p(padding) {
-export const Mark = (options) => createElement(options, 'mark')
+        return createElement({ style: { padding } }, this.name)
-export const Del = (options) => createElement(options, 'del')
+    }
-export const Ins = (options) => createElement(options, 'ins')
+}
-export const Pre = (options) => createElement(options, 'pre')
+
-export const Code = (options) => createElement(options, 'code')
+export class div extends BaseElement {
-export const Blockquote = (options) => createElement(options, 'blockquote')
+    constructor(options) {
-export const Q = (options) => createElement(options, 'q')
+        super(options)
-export const Cite = (options) => createElement(options, 'cite')
+    }
-export const Hr = (options) => createElement(options, 'hr')
+}
-export const Br = (options) => createElement(options, 'br')
+
-export const Ol = (options) => createElement(options, 'ol')
+export class span extends BaseElement {
-export const Ul = (options) => createElement(options, 'ul')
+    constructor(options) {
-export const Li = (options) => createElement(options, 'li')
+        super(options)
-export const Dl = (options) => createElement(options, 'dl')
+    }
-export const Dt = (options) => createElement(options, 'dt')
+}
-export const Dd = (options) => createElement(options, 'dd')
+
-export const Figure = (options) => createElement(options, 'figure')
+export class button extends BaseElement {
-export const Figcaption = (options) => createElement(options, 'figcaption')
+    constructor(options) {
-export const Img = (options) => createElement(options, 'img')
+        super({ ...options, style: { cursor: 'pointer', ...options.style } })
-export const Video = (options) => createElement(options, 'video')
+    }
-export const Audio = (options) => createElement(options, 'audio')
+}
-export const Canvas = (options) => createElement(options, 'canvas')
+
-export const Svg = (options) => createElement(options, 'svg')
+export class img extends BaseElement {
-export const Math = (options) => createElement(options, 'math')
+    constructor(options) {
-export const Table = (options) => createElement(options, 'table')
+        super(options)
-export const Caption = (options) => createElement(options, 'caption')
+    }
-export const Thead = (options) => createElement(options, 'thead')
+}
-export const Tfoot = (options) => createElement(options, 'tfoot')
+
-export const Tbody = (options) => createElement(options, 'tbody')
+export class pre extends BaseElement {
-export const Tr = (options) => createElement(options, 'tr')
+    constructor(options) {
-export const Th = (options) => createElement(options, 'th')
+        super(options)
-export const Td = (options) => createElement(options, 'td')
+    }
-export const Col = (options) => createElement(options, 'col')
+}
-export const Colgroup = (options) => createElement(options, 'colgroup')
+
-export const Fieldset = (options) => createElement(options, 'fieldset')
+export class input extends BaseElement {
-export const Legend = (options) => createElement(options, 'legend')
+    constructor(options) {
-export const Label = (options) => createElement(options, 'label')
+        super(options)
-export const Input = (options) => createElement(options, 'input')
+    }
-export const Select = (options) => createElement(options, 'select')
+}
-export const TextArea = (options) => createElement(options, 'textarea')
+
-export const Div = (options) => createElement(options, 'div')
+export class textarea extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class select extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class option extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class label extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class form extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class nav extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class main extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class article extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class section extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class aside extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class header extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class footer extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class h1 extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class h2 extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class h3 extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class h4 extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class h5 extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class h6 extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class p extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class a extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class ul extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class ol extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class li extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class dl extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class dt extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class dd extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class table extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class caption extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class thead extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class tbody extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class tfoot extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class tr extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class th extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class td extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class colgroup extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class col extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class form extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class fieldset extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class legend extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class label extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class strong extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class small extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class em extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class mark extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class del extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class ins extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class code extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class sub extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class sup extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class i extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class b extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class u extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class s extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class cite extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class q extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class blockquote extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class address extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class time extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class dfn extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class abbr extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class ruby extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class rt extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class rp extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class bdi extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class bdo extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class hr extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class br extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class figure extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class figcaption extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class video extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class audio extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
+
+export class canvas extends BaseElement {
+    constructor(options) {
+        super(options)
+    }
+}
 
 export function Avatar(options) {
     const element = createElement(options, 'img')
@@ -142,83 +580,3 @@ export function Dialog(options) {
     observer.observe(document.body, { childList: true, subtree: true })
     return element
 }
-
-export class div extends HTMLDivElement {
-    constructor(options) {
-        super()
-        for (const key in options) {
-            if (key === 'text') {
-                this.textContent = options[key]
-                continue
-            }
-
-            if (key.startsWith('on')) this[key] = options[key]
-            else this.setAttribute(key, options[key])
-        }
-    }
-    static w(width) { return new this({ style: { width } }) }
-    static h(height) { return new this({ style: { height } }) }
-    static x(left) { return new this({ style: { left } }) }
-    static y(top) { return new this({ style: { top } }) }
-    static z(index) { return new this({ style: { zIndex: index } }) }
-    static r(radius) { return new this({ style: { borderRadius: radius } }) }
-    static b(border) { return new this({ style: { border } }) }
-    static p(padding) { return new this({ style: { padding } }) }
-    static m(margin) { return new this({ style: { margin } }) }
-    static o(opacity) { return new this({ style: { opacity } }) }
-    static flex(flex) { return new this({ style: { flex } }) }
-    static grid(grid) { return new this({ style: { grid } }) }
-    static text(text) {
-        console.log('text::', new this({ text }))
-        return new this({ text })
-    }
-    static children(children) { return new this({ children }) }
-
-    w(width) { this.style.width = width + 'px'; return this }
-    h(height) { this.style.height = height + 'px'; return this }
-    x(left) { this.style.left = left; return this }
-    y(top) { this.style.top = top; return this }
-    z(index) { this.style.zIndex = index; return this }
-    r(radius) { this.style.borderRadius = radius; return this }
-    b(border) { this.style.border = border; return this }
-    p(padding) { this.style.padding = padding; return this }
-    m(margin) { this.style.margin = margin; return this }
-    o(opacity) { this.style.opacity = opacity; return this }
-    flex(flex) { this.style.flex = flex; return this }
-    grid(grid) { this.style.grid = grid; return this }
-    text(text) {
-        console.log('text', text)
-        this.textContent = text; return this
-    }
-    children(children) {
-        children.forEach(child => {
-            console.log('child', child)
-            this.appendChild(child)
-        });
-        return this
-    }
-}
-
-export class pre extends HTMLPreElement {
-    constructor(options) {
-        super()
-        for (const key in options) {
-            if (key.startsWith('on')) this[key] = options[key]
-            else this.setAttribute(key, options[key])
-        }
-    }
-    static text(text) { return new this({ textContent: text }) }
-}
-
-customElements.define('my-div', div, { extends: 'div' })
-customElements.define('my-pre', pre, { extends: 'pre' })
-
-export default {
-    createElement, List, ListItem, Span, Button, Img, Input, TextArea, Avatar, Dialog,
-    Div, Form, Header, Nav, Main, Article, Section, Aside, Footer,
-    H1, H2, H3, H4, H5, H6, P, A, Strong, Em, Small, Mark, Del, Ins, Pre, Code,
-    Blockquote, Q, Cite, Hr, Br, Ol, Ul, Li, Dl, Dt, Dd, Figure, Figcaption,
-    Video, Audio, Canvas, Svg, Math, Table, Caption, Thead, Tfoot, Tbody, Tr, Th, Td,
-    Col, Colgroup, Fieldset, Legend, Label, Select, TextArea,
-    div, pre
-}