142. lit-html 1 - tagged templates

JavaScriptlit-html
觉得这个题有帮助吗?

容易  -通过 / -执行

根据lit-html 官网,

lit-html lets you write HTML templates in JavaScript, then efficiently render and re-render those templates together with data to create and update DOM

这个视频 很浅显易懂地介绍了lit-html是如何工作的。我们看一下示例代码:

import {html, render} from 'lit-html'
const helloTemplate = (name) => html`<div>Hello ${name}!</div>`

// This renders <div>Hello Steve!</div> to the document body
render(helloTemplate('Steve'), document.body)

// This updates to <div>Hello Kevin!</div>, but only updates the ${name} part
render(helloTemplate('Kevin'), document.body);

魔法发生在第二次的render() ,其只更新了需要更新的部分。

不过关于这个魔法,BFE.dev会出一系列题目来实现,在本题目中,需要你做到:

实现 html() 和 render() 来让示例代码运作,同时不需要考虑rerender,也就是说html() 可以返回HTML字符串。

测试中不含异常数据。

争取10分钟以内搞定这个问题

讨论(11)