html5语义标签
This commit is contained in:
parent
26ee741741
commit
3f6ddb0674
11
README.md
11
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. 额外添加的快捷方法都是缩写, 将避免与默认属性或方法冲突
|
||||
|
||||
24
index.js
24
index.js
@ -1,20 +1,10 @@
|
||||
//import { Button, Main } from "./main.js";
|
||||
//
|
||||
//document.body.appendChild(Main({
|
||||
// children: [Button({
|
||||
// textContent: 'Hello world',
|
||||
// onclick: event => console.log('Hello world')
|
||||
// })]
|
||||
//}));
|
||||
import { div, span, pre } from './main.js'
|
||||
|
||||
import { div, pre } from './main.js'
|
||||
|
||||
//const demo = div.w(128).h(64) //.onclick.stop('click').children([
|
||||
|
||||
document.body.appendChild(div.w(128).h(64).children([
|
||||
div.text('Hello world!')
|
||||
document.body.appendChild(div.w(128).h(64).childs([
|
||||
span.text('Hello world!'),
|
||||
new span({ textContent: 'Hello world!' }),
|
||||
]))
|
||||
|
||||
//fetch('./index.js').then(res => res.text()).then(text => {
|
||||
// document.body.appendChild(pre.text(text))
|
||||
//})
|
||||
fetch('/index.js').then(res => res.text()).then(text => {
|
||||
document.body.appendChild(pre.p('2rem').bg('#ececec').text(text.substring(0, text.indexOf('fetch'))))
|
||||
})
|
||||
|
||||
646
main.js
646
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 const ListItem = (options) => createElement(options, 'li')
|
||||
export const Span = (options) => createElement(options, 'span')
|
||||
export const Button = (options) => createElement({ ...options, style: { cursor: 'pointer', ...options.style } }, 'button')
|
||||
export const Form = (options) => createElement(options, 'form')
|
||||
export const Header = (options) => createElement(options, 'header')
|
||||
export const Nav = (options) => createElement(options, 'nav')
|
||||
export const Main = (options) => createElement(options, 'main')
|
||||
export const Article = (options) => createElement(options, 'article')
|
||||
export const Section = (options) => createElement(options, 'section')
|
||||
export const Aside = (options) => createElement(options, 'aside')
|
||||
export const Footer = (options) => createElement(options, 'footer')
|
||||
export const H1 = (options) => createElement(options, 'h1')
|
||||
export const H2 = (options) => createElement(options, 'h2')
|
||||
export const H3 = (options) => createElement(options, 'h3')
|
||||
export const H4 = (options) => createElement(options, 'h4')
|
||||
export const H5 = (options) => createElement(options, 'h5')
|
||||
export const H6 = (options) => createElement(options, 'h6')
|
||||
export const P = (options) => createElement(options, 'p')
|
||||
export const A = (options) => createElement(options, 'a')
|
||||
export const Strong = (options) => createElement(options, 'strong')
|
||||
export const Em = (options) => createElement(options, 'em')
|
||||
export const Small = (options) => createElement(options, 'small')
|
||||
export const Mark = (options) => createElement(options, 'mark')
|
||||
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 const Blockquote = (options) => createElement(options, 'blockquote')
|
||||
export const Q = (options) => createElement(options, 'q')
|
||||
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 const Ul = (options) => createElement(options, 'ul')
|
||||
export const Li = (options) => createElement(options, 'li')
|
||||
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 const Figcaption = (options) => createElement(options, 'figcaption')
|
||||
export const Img = (options) => createElement(options, 'img')
|
||||
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 const Math = (options) => createElement(options, 'math')
|
||||
export const Table = (options) => createElement(options, 'table')
|
||||
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 const Tr = (options) => createElement(options, 'tr')
|
||||
export const Th = (options) => createElement(options, 'th')
|
||||
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 const Legend = (options) => createElement(options, 'legend')
|
||||
export const Label = (options) => createElement(options, 'label')
|
||||
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 BaseElement {
|
||||
constructor(options) {
|
||||
return createElement(options, this.constructor.name)
|
||||
}
|
||||
static text(text) {
|
||||
return createElement({ textContent: text }, this.name)
|
||||
}
|
||||
static html(html) {
|
||||
return createElement({ innerHTML: html }, this.name)
|
||||
}
|
||||
static childs(childs) {
|
||||
return createElement({ children: childs }, this.name)
|
||||
}
|
||||
static w(width) {
|
||||
return createElement({ style: { width } }, this.name)
|
||||
}
|
||||
static h(height) {
|
||||
return createElement({ style: { height } }, this.name)
|
||||
}
|
||||
static bg(color) {
|
||||
return createElement({ style: { backgroundColor: color } }, this.name)
|
||||
}
|
||||
static p(padding) {
|
||||
return createElement({ style: { padding } }, this.name)
|
||||
}
|
||||
}
|
||||
|
||||
export class div extends BaseElement {
|
||||
constructor(options) {
|
||||
super(options)
|
||||
}
|
||||
}
|
||||
|
||||
export class span extends BaseElement {
|
||||
constructor(options) {
|
||||
super(options)
|
||||
}
|
||||
}
|
||||
|
||||
export class button extends BaseElement {
|
||||
constructor(options) {
|
||||
super({ ...options, style: { cursor: 'pointer', ...options.style } })
|
||||
}
|
||||
}
|
||||
|
||||
export class img extends BaseElement {
|
||||
constructor(options) {
|
||||
super(options)
|
||||
}
|
||||
}
|
||||
|
||||
export class pre extends BaseElement {
|
||||
constructor(options) {
|
||||
super(options)
|
||||
}
|
||||
}
|
||||
|
||||
export class input extends BaseElement {
|
||||
constructor(options) {
|
||||
super(options)
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user