原生js编写一个虚拟dom效果代码
代码语言:html
所属分类:布局界面
代码描述:原生js编写一个虚拟dom效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { font: 15px/1.3 system-ui,sans-serif; background: #333; overflow: hidden; } .background { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(//repo.bfw.wiki/bfwrepo/image/5e965addb956a.png) center/cover #f4f4f4; opacity: 0.5; } #demo { width: 280px; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); padding: 10px; background: #f4f4f4; border-radius: 5px; box-shadow: 0 10px 40px #000; z-index: 2; } * { animation: flash 500ms ease; } @keyframes flash { from { box-shadow: inset 0 0 2px 2px rebeccapurple, 0 0 2px 2px rebeccapurple; } } ul { font-size: 90%; } .kids { min-height: 100px; background: #eee; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); margin: 2px 0 0; border-radius: 3px; padding: 5px; } h1 { margin: 0; } h5 { margin: 0; padding: 0; font-size: 120%; } a { color: #28E; text-decoration: none; font-weight: 400; } .features { margin: 0; } h6 { margin: 0; padding: 7px 0 0; font-size: 92%; font-weight: 400; color: #666; } </style> <body> <div class="background"></div> <div id="demo"></div> <script> h = (t, p, ...c) => ({ t, p, c, k: p && p.key }); render = (e, d, t = d.t || (d.t = {}), p, r, c, m, y) => // arrays e.map ? e.map((e, p) => render(e, d, t.o && t.o[p])): // components e.t.call ? (e.i = render((render.c = e).t(Object.assign({ children: e.c }, e.p), e.s = t.s || {}, (t) => render(Object.assign(e.s, t) && e, d, e)), t.i || d, t && t.i || {}), d.t = t = e): ( // create notes m = t.d || (e.t ? document.createElement(e.t): new Text(e.p)), // diff props e.t ? Object.keys(Object.assign({}, t.p, e.p)).map((d) => (c = e.p && e.p[d]) != (t.p && t.p[d]) && (d in m ? m[d] = c: m[(c ? 'set': 'remove') + 'Attribute'](d, c))): m.data = e.p, // copy children for storage y = (t.o || []).slice(), // diff children (typed/keyed) e.o = e.c.concat.apply([], e.c).map((d, p) => render(d = d && d.c ? d: h('', d), m, y.find((e, c) => e && e.t == d.t && e.k == d.k && (c == p && (p = r), y[c] = 0, e)) || {}, p)), // insert at position t.d && p == r || d.insertBefore(e.d = m, d.childNodes[p + 1]), // remove stragglers y.map(e => (y = e.i && e.i.d || e.d) && y.remove()), Object.assign(t, e)); /**@jsx h */ function CountButton(props, { count = 0 }, update) { return h("button", { count: count, onclick: () => update({ count: count + 1 }) }, count); } // component.........完整代码请登录后点击上方下载按钮下载查看
网友评论0