前面的文章介绍了 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 是一个可以用于多个语言的一套模板引擎。

mustache

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

 
 
 
 

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

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

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

JSX

GitHub - OpenJSX/logo: Logo of JSX-IR

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

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

 
 
 
 

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