|
1 |
<header> <h1>Lorem ipsum dolor sit amet consectetur.</h1> <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, fuga!</h2> </header> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi aspernatur soluta sequi facilis voluptate deserunt minus pariatur necessitatibus asperiores itaque.</p> <div class="page">页脚</div> |
我们在开发 web 应用时候多半也都是在开发用户交互界面，也就是 HTML 文件，然后获取数据，填充 html。我们数据是变化的，我们 html 的结构是相对稳定的。也就是 html 中内容是变化的。我们首先要分清变化与不变的部分。
我们大部分工作就是将动态变化的内容整合到不变的 html 的结构中去。
|
1 |
function createPost(title, content) { let post = document.querySelector(".wrapper"); let header = document.createElement("h1"); let body = document.createElement("p"); header.textContent = title; body.textContent = content; post.appendChild(header); post.appendChild(body) body.addpend(div); return { post } } |
刚开始入行的时候，我想大家都是这样动态添加模板的，我么 createElement 创建一个 dom 树，然后添加到 html 中，随后数据更新了，我们在更新这些节点内容。想必大家都习惯这么做，虽然很痛苦。因为这个太抽象不直观。
|
1 |
<template id="post"> <h1>{{title}}</h1> <template is="dom-repeat" items={{items}}> <div>{{item.name}}</div> </template> </template> |
有了 template 这个标签我们工作就变得相对简单多了，template 中定义和我们最终渲染出的效果比较接近了。
模板
如果要写出一个好的模板系统并非易事，好的模板系统需要具备以下特点
- 开发体验
作为开发人员对模板的要求就是所见即所得，虽然 jsx 给我们好的体验，但是这些模板还是写在 javascript 中。开发模板我们通常需要花费精力学习一些模板的表达式才可以写出符合要求的模板。这些模板通常需要编译，所以还需要了解编译模板的工具。 - 快速启动
渲染模板的速度也是一个问题 - 即时更新
快速地 - 作为 javascript 和 html 的桥梁
如果我们 template 写在 javascript ，这样 template 一定不那么直观。如果写在 html 中，这样虽然直观了但是访问数据也成为问题，数据更新我们还需要更新模板。
好说了半天我们的今天主角出场。
- 可以在 javascript 中写的 html 模板
- 快速启动和更新
- 体积小
- 易于上手、API 支持可扩展
可以在 javascript 中写的 html 模板
- boot fast
- update Fast
- bridge javascript and html
|
1 |
const helloTemplate = (name) => html`<div>Hello ${name}!</div>`; |
这里大家可能注意到使用 es6 模版语法，支持多行我们可以得到所写即所得的效果，而且这里使用 es6 表达式${name} 我们不需要其他成本去学习
|
1 |
html` <div> <h1>${title}</h1> <body>${content}</body> </div> ` |
让后将我们的 html 的字符串赋值给 JavaScript 的变量。
- 一个问题我们 创建 html 是字符串还是 DOM 元素呢？
如果只是简单地生成 html 字符串，然后作为 innerhtml 进行赋值就失去了意义。如果返回是一个 dom 那么我们还需要重构整个 dom 树。
这里返回一个 templateResult 结果，这是一个对象，具有 template 的引用，而且具有数据。
|
1 |
render(helloTemplate('zidea'), document.body); |
render 这个方法在第一次调用时候渲染模版，随后更新模版的数据。
|
1 |
render(helloTemplate('zidea'), document.body); render(helloTemplate('matthew'), document.body); render(helloTemplate('jang'), document.body); |
和 react 有区别吗？
表面上看很想 jsx ，但是这仅是 JavaScript 的语法，并不是什么新的语法。hit-html 并没有虚拟 dom 的概念也也没有 diff 检查。
|
1 |
UI=f(state) |
这个让我们想到 redux 和 f 这里是一个纯函数，输入 state 输出 UI，根据确定的 state 输入，输出的 UI 是确定的。
|
1 |
const postTemplate =(title,content) => html` <div> <h1>${title}</h1> <body>${content}</body> <div>${index}</div> </div> ` render(postTemplate('angular tutorial','angular tutorial content '), document.body); |
|
1 |
let header = (title) => html` <h1>${title}</h1> ` const postTemplate =(title,content) => html` <div> ${header(title)} <body>${content}</body> <div>第 ${index} 页</div> </div> ` |
在 hit-html 中支持嵌套，html 方法中支持嵌套，可以层层嵌套。
|
1 |
let user = { loggedIn:true, name:'matthew' } const helloTemplate = (name) => html`<div>Hello ${name}!</div>`; let index = 0; let header = (title) => html` <h1>${title}</h1> ` let message = html` 欢迎${user.name} ` const postTemplate =(title,content) => html` <div> ${message} ${header(title)} <body>${content}</body> <div>第 ${index} 页</div> </div> ` |
可以通过分支语句控制模版，大家可以看出其好处了，我们完全不用学习一门新的模版语言就可以轻松第搞定逻辑控制。
|
1 |
if(user.loggedIn){ message = html` 欢迎${user.name} ` }else{ message = html` 请先登录 ` } |
集合的遍历也是原生的
|
1 |
<div> ${['apple','banana','cherry']} </div> |
|
1 |
<ul> ${ ['apple','banana','cherry'].map((item)=> html`<li>${item}</li>` ) } </ul> |
让我们惊叹的也是也支持 DOM 形式的嵌入，可能您已经感觉到了开发的乐趣。
|
1 |
const titleDom = document.createElement('h1'); titleDom.textContent = "标题" const postTemplate =(title,content) => html` <div> ${titleDom} </div> <ul> ${ ['apple','banana','cherry'].map((item)=> html`<li>${item}</li>` ) } </ul> <div> ${message} ${header(title)} <body>${content}</body> <div>第 ${index} 页</div> </div> ` |
