下一代的模板引擎：lit-html

前面的文章介绍了 Web Components 的基本用法，今天来看看基于这个原生技术，Google 二次封存的框架 lit-html。

其实早在 Google 提出 Web Components 的时候，就在此基础上发布了 Polymer 框架。只是这个框架一直雷声大雨点小，内部似乎也对这个项目不太满意，然后他们团队又开发了两个更加现代化的框架（或者说是库？）： lit-html、lit-element，今天的文章会重点介绍 lit-html 的用法以及优势。

发展历程

在讲到 lit-html 之前，我们先看看前端通过 JavaScript 操作页面，经历过的几个阶段：

原生 DOM API

最早通过 DOM API 操作页面元素，操作步骤较为繁琐，而且 JS 引擎与浏览器 DOM 对象的通信相对耗时，频繁的 DOM 操作对浏览器性能影响较大。

var $box = document.getElementById('box')
var $head = document.createElement('h1')
var $content = document.createElement('div')
$head.innerText = '关注我的公众号'
$content.innerText = '打开微信搜索：『自然醒的笔记本』'
$box.append($head)
$box.append($content)

jQuery 操作 DOM

jQuery 的出现，让 DOM 操作更加便捷，内部还做了很多跨浏览器的兼容性处理，极大的提升了开发体验，并且还拥有丰富的插件体系和详细的文档。

var $box = $('#box')

var $head = $('', { text: '关注我的公众号' })
var $content = $('', { text: '打开微信搜索：『自然醒的笔记本』' })

$box.append($head, $content)

虽然提供了便捷的操作，由于其内部有很多兼容性代码，在性能上就大打折扣了。而且它的链式调用，让开发者写出的面条式代码也经常让人诟病（PS. 个人认为这也不能算缺点，只是有些人看不惯罢了）。

模板操作

『模板引擎』最早是后端 MVC 框架的 View 层，用来拼接生成 HTML 代码用的。比如，mustache 是一个可以用于多个语言的一套模板引擎。

后来前端框架也开始捣鼓 MVC 模式，渐渐的前端也开始引入了模板的概念，让操作页面元素变得更加顺手。下面的案例，是 angluar.js 中通过指令来使用模板：

var app = angular.module("box", []);

app.directive("myMessage", function (){
  return {
    template : '' +
    '关注我的公众号' +
    '打开微信搜索：『自然醒的笔记本』'
  }
})

后来的 Vue 更是将模板与虚拟 DOM 进行了结合，更进一步的提升了 Vue 中模板的性能，但是模板也有其缺陷存在。

不管是什么模板引擎，在启动时，解析模板是需要花时间，这是没有办法避免的；
连接模板与 JavaScript 的数据比较麻烦，而且在数据更新时还需进行模板的更新；
各式各样的模板创造了自己的语法结构，使用不同的模板引擎，就需要重新学习一遍其语法糖，这对开发体验不是很友好；

JSX

React 在官方文档中这样介绍 JSX：

JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。

var title = '关注我的公众号'
var content = '打开微信搜索：『自然醒的笔记本』'

const element = 
  {title}
  {content}
;

ReactDOM.render(
  element,
  document.getElementById('root')
)