上一篇介绍了WebComponents的基本用法。今天我们就来看看lit-html，这是谷歌基于这种原生技术的二次归档框架。其实早在Google提出WebComponents的时候，就在此基础上发布了Polymer框架。只是这个框架一直雷声大雨点小，内部好像对这个项目不满意，然后他们的团队开发了两个比较现代的框架（或者库？）：lit-html，lit-element，今天的文章将重点介绍lit-html的用法和优点。发展历程在讲lit-html之前，我们先来看看前端通过JavaScript操作页面。我们经历了几个阶段：在开发阶段，原生DOMAPI最早是通过DOMAPI来操作页面元素。操作步骤比较繁琐，JS引擎与浏览器浏览器DOM对象的通信也比较耗时，频繁的DOM操作对浏览器性能影响很大。var$box=document.getElementById('box')var$head=document.createElement('h1')var$content=document.createElement('div')$head.innerText='关注我的公众号'$内容.innerText='打开微信搜索：《自然醒的笔记本》'$box.append($head)$box.append($content)jQuery操作DOMjQuery的出现让DOM操作更加方便，很多横切内部做了浏览器兼容性处理，大大提升了开发体验，同时也有丰富的插件系统和详尽的文档。var$box=$('#box')var$head=$('

',{text:'关注我的公众号'})var$content=$('

',{text:'打开微信搜索：“自然觉醒笔记本”'})$box.append($head,$content)虽然提供了方便的操作，但是因为里面有很多兼容代码，所以性能大大降低了。而且它的链式调用让开发者写的面条代码经常被诟病（PS，个人觉得这不是缺点，只是有些人看不懂）。模板操作“模板引擎”原本是后端MVC框架的View层，用于拼接生成HTML代码。例如，mustache是一组可用于多种语言的模板引擎。后来小胡子的前端框架也开始摆弄MVC模式，渐渐的前端也开始引入模板的概念，让操作页面元素变得更加简单。在以下情况下，模板通过angluar.js中的指令使用：varapp=angular.module("box",[]);app.directive("myMessage",function(){return{template:''+'

关注我的公众号

'+'

打开微信搜索：“自然觉醒笔记本”

'}}）后来Vue将模板与虚拟DOM结合，进一步完善了Vue中模板的性能，但模板也有其缺陷。不管是什么模板引擎，启动时都需要花时间解析模板，这是无法避免的；连接模板和JavaScript数据比较麻烦，更新数据时需要更新模板；有各种模板创建自己的语法结构。使用不同的模板引擎，需要重新学习其语法糖，对开发体验不是很友好；JSXGitHub-OpenJSX/logo:LogoofJSX-IRReact在官方文档中是这样介绍JSX的：“JSX，是对JavaScript的语法扩展。我们建议将JSX与React结合使用。JSX是描述JSX本质的好方法一个UI应该以它应该交互的方式表现。JSX可能让人想起模板语言，但它具有JavaScript的全部功能。vartitle='关注我公众号'varcontent='打开微信搜索：“自然觉醒笔记本”'constelement=

{title}

{content}

/div>;ReactDOM.render(element,document.getElementById('root'))JSX的出现给前端开发模式带来了更多的想象空间，引入了函数式编程的思想。UI=fn(state)但这也带来了一个问题，必须对JSX语法进行转义处理成React.createElement的形式，这也增加了React的上手难度，令很多新手望而却步。lit-html简介lit-html的出现尽可能的避免了之前模板引擎存在的问题，通过现代浏览器的原生能力构建模板。ES6提供的模板字面量；