diff --git a/index.js b/index.js index 46f81cb..365ccd6 100644 --- a/index.js +++ b/index.js @@ -8,12 +8,11 @@ document.body.appendChild(div.absolute.t_2.r_2.bg_red_500.childs([ // cursor-pointer overflow-clip hover:text-pink-500 document.body.appendChild(div.cursor_pointer.bg_red_500.overflow_clip.w_1000.childs([ h1.m_2rem.pt_2rem.text('Widgets!'), - h1.m('2rem').p({ top: '2rem' }).text('Widgets!'), p.m('2rem').p({ top: '2rem' }).text('是什么, 为什么, 怎么做?'), ul.m('2rem').p({ top: '2rem' }).childs([ - li.text('也许你需要让事情变简单直观, 只使用纯粹的js代码, 整个项目只有js文件, 而不必在 js 和 html 和 css 文件之间跳来跳去'), - li.text('汲取了 pug 和 winicss 的灵感, 以及 flutter 的嵌套布局方式, pug 减少 html 冗余, winicss 减少 css 冗余'), - li.text('这个库的唯一作用就是给dom对象添加了额外的操作方法, 且每个方法的返回值都是dom自身, 从而实现对dom对象的链式操作') + li.text('让事情变简单直观, 仅使用js代码, 而不必在 js/html/css 文件之间来回翻找'), + li.text('大幅提高代码信息密度, 灵感来自 pug/winicss/flutter, 减少布局与样式冗余'), + li.text('为dom对象添加链式操作方法, 使其返回值都是dom自身') ]), new button({ textContent: '模态窗口 dialog', diff --git a/main.js b/main.js index e0ae34d..0d50592 100644 --- a/main.js +++ b/main.js @@ -339,6 +339,9 @@ export class footer extends BaseElement { } } +export const a = createProxy('a') +export const p = createProxy('p') + export const h1 = createProxy('h1') export const h2 = createProxy('h2') export const h3 = createProxy('h3') @@ -346,89 +349,12 @@ export const h4 = createProxy('h4') export const h5 = createProxy('h5') export const h6 = createProxy('h6') -//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 const ul = createProxy('ul') +export const ol = createProxy('ol') +export const dl = createProxy('dl') +export const li = createProxy('li') +export const dt = createProxy('dt') +export const dd = createProxy('dd') export class table extends BaseElement { constructor(options) {