From 4c8aeb57cd72e82255f1aaddc0cc383ae3b170cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A7=89?= Date: Wed, 15 May 2024 22:38:07 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 26 +++++++++++++++++++ index.js | 31 +++++++++++------------ main.js | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 114 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 30787c0..8d8b4f4 100644 --- a/README.md +++ b/README.md @@ -33,3 +33,29 @@ git clone git@git.satori.love:LaniakeaSupercluster/widgets.git npm i npm run dev ``` + +### HTML 基本概念 +对于UI书写划分为两类, 一是外观样式, 一是结构关系 +一个元素的基本构成就是其外观样式, 因此它书写在声明它的同一列 +```javascript +div.w(128).h(64) +``` + +嵌套关系则应该换行并缩进, 保持与 HTML 一致的风格 +```javascript +document.body.appendChild(div.w(128).h(64).children([ + div.text('Hello world!'), + div.text('Hello world!'), + div.text('Hello world!') +])) +``` + +有时期望复用样式 +```javascript +const option = { style: { width: '128px', height: '64px' } } +div(option).children([ + div.text('Hello world!'), + div.text('Hello world!'), + div.text('Hello world!') +]) +``` diff --git a/index.js b/index.js index 2d53253..636f2a9 100644 --- a/index.js +++ b/index.js @@ -1,21 +1,20 @@ -import { Button, Main } from "./main.js"; +//import { Button, Main } from "./main.js"; +// +//document.body.appendChild(Main({ +// children: [Button({ +// textContent: 'Hello world', +// onclick: event => console.log('Hello world') +// })] +//})); -document.body.appendChild(Main({ - children: [Button({ - textContent: 'Hello world', - onclick: event => console.log('Hello world') - })] -})); +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!') +])) -//import { div, pre } from './main.js' -// -//const demo = div.w(128).h(64) //.onclick.stop('click') -//demo.textContent = 'Hello world' -// -//console.log('demo', demo) -//document.body.appendChild(demo) -//document.body.appendChild(div.w(128).h(64).text('Hello world')) -// //fetch('./index.js').then(res => res.text()).then(text => { // document.body.appendChild(pre.text(text)) //}) diff --git a/main.js b/main.js index 2dc7da8..99b7a3a 100644 --- a/main.js +++ b/main.js @@ -18,7 +18,6 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi /* HTML5 语义标签 */ export const List = (options) => createElement(options, 'ul') export const ListItem = (options) => createElement(options, 'li') -export const Div = (options) => createElement(options, 'div') 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') @@ -80,6 +79,7 @@ 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 function Avatar(options) { const element = createElement(options, 'img') @@ -143,11 +143,82 @@ export function Dialog(options) { 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 + Col, Colgroup, Fieldset, Legend, Label, Select, TextArea, + div, pre }