上一篇介绍了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数据比较麻烦，更新数据时需要更新模板；各种模板创建自己的语法结构。使用不同的模板引擎需要重新学习其语法糖，对开发体验不是很友好；JSXReact在官方文档中介绍了JSX：JSXisaJavaScriptsyntaxextension。我们建议将JSX与React结合使用。JSX是一种很好的方式来描述UI的基本形式应该呈现它应该具有的交互。JSX可能会让人想起模板语言，但它具有JavaScript的全部功能。vartitle='关注我的公众号'varcontent='打开微信搜索：“自然觉醒笔记本”'constelement={title}
{content};ReactDOM.render(element,document.getElementById('root'))JSX的出现给前端开发模式带来了更多的想象空间，引入了函数式编程的思想。UI=fn(state)但这也带来了一个问题，必须对JSX语法进行转义处理成React.createElement的形式，这也增加了React入门的难度，让很多新手望而却步。lit-html简介lit-html的出现尽可能的避免了之前模板引擎存在的问题，通过现代浏览器的原生能力构建模板。ES6提供的模板字面量；WebComponents提供的标签；//导入lit-htmlimport{html,render}from'lit-html';//定义一个模板consttemplate=(title,content)=>html`${title}
${content}`;//将模板渲染到documentrender(template('关注我的公众号','打开微信搜索：『自然醒笔记本''),document.body);模板语法因为使用了原生的模板字符，可以不用转义直接使用，也可以像JSX一样使用JavaScript语法进行遍历和逻辑控制。constskillTpl=(title,skills)=>html`${title||'技能列表'}
${skills.map(i=>html`- ${i}
`)}
`;render(skillTpl('我的技能',['Vue','React','Angluar']),document.body);除了这个方便之外，lit-html也为Vue提供了类似的事件绑定方法。constInput=(defaultValue)=>html`name:{console.log(evt.target.value)}}/>`;render(Input('输入你的名字'),document.body);样式绑定除了使用原生模板字符串编写模板外，lit-html还自带CSS-in-JS功能。从'lit-html'导入{html,render};从'lit-html/directives/style-map.js'导入{styleMap}；constskillTpl=(title,skills,highlight)=>{conststyles={backgroundColor:highlight?'黄色的'：''，};返回html`${标题||“技能列表”
${skills.map(i=>html`${i} `)}`};render(skillTpl('我的技能',['Vue','React','Angluar'],true),document.body);渲染过程作为一个模板引擎，lit-html的主要作用就是将模板渲染到页面上。与React、Vue等框架相比，更侧重于渲染。让我们来看看lit-html的基本工作流程。//Importlit-htmlimport{html,render}from'lit-html';//定义一个模板constmyTemplate=(name)=>html`Hello${name}
`;//渲染模板到documentrender(myTemplate('World'),document.body);从前面的案例也可以看出，lit-html常用的两个API是html和render。构造模板html是标签函数，属于ES6新语法。如果不记得label函数的用法，可以打开Mozilla文档（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals）复习。exportconsthtml=(strings,...values)=>{...};html标签函数会接受多个参数，第一个参数是由静态字符串组成的数组，后面的参数是动态传入的表达式。我们可以写个案例看看传入html标签函数的参数长什么样：constfoo='吴彦祖';constbar='梁朝伟';html`你好${foo}，我是${bar}
`；整个字符串会被动态表达式切割成三部分，三部分组成一个数组，作为第一个参数传给html标签函数，动态表达式计算后得到的值传入一次作为以下参数。我们可以把字符串和值打印出来看看：lit-html会把这两个参数传给TemplateResult进行实例化。exportconsthtml=(strings,...values)=>{returnnewTemplateResult(strings,values);};//生成一个随机字符constmarker=`{{lit-${String(Math.random()).slice(2)}}}`;constnodeMarker=``;exportclassTemplateResult{constructor(strings,values){this.strings=strings;this.values=值；}getHTML(){constl=this.strings.length-1;让html='';让isCommentBinding=false;for(leti=0;i{//先获取DOM节点前对应的缓存letpart=parts.get(container);//如果没有缓存，重新创??建if(part===undefined){part=newNodePart()parts.set(container,part);part.appendInto（容器）；}//将TemplateResult设置为零件part.setValue(result);//调用commit来创建或更新一个节点。部分提交（）；}；在render阶段，会先去parts中寻找之前构建好的partcache。Part可以理解为节点构造器，用于将模板的内容渲染成真实的DOM节点。如果part缓存不存在，则先构造一个，然后调用appendInto方法，在DOM节点前后分别插入两个注释节点，用于后续插入到模板中。constcreateMarker=()=>document.createComment('');导出类NodePart{appendInto(container){this.startNode=container.appendChild(createMarker());this.endNode=container.appendChild(createMarker());}}然后通过commit方法创建一个真正的节点，插入到两个注释节点中。我们来看看commit方法的具体操作：exportclassNodePart{setValue(result){//将templateResult放到__pendingValue属性中}commit(){constvalue=this.__pendingValue;//根据不同类型的value执行不同的操作if(valueinstanceofTemplateResult){//通过html标签方法获取的value//必须是TemplateResult类型this.__commitTemplateResult(value);}else{this.__commitText(值);}}__commitTemplateResult(value){//调用templateFactory构造模板节点consttemplate=templateFactory(value);//如果之前已经构建了模板，则更新它if(this.value.template===template){//console.log('更新DOM',value)this.value.update(value.values);}else{//通过模板节点构造模板实例constinstance=newTemplateInstance(template);//更新templateResult中的值到instance中的templateconstfragment=instance._clone();instance.update(value.values);//复制模板中的DOM节点并将其插入到页面中this.__commitNode(fragment);//模板实例将value属性放入缓存，用于后续判断是否为更新操作this.value=instance;}}}实例化后的模板会先调用instance._clone()进行复制操作，然后通过.values)将计算好的动态表达式插入其中，最后调用__commitNode将模板复制得到的节点插入到真实的DOM中.导出类NodePart{__insert(node){this.endNode.parentNode.insertBefore(node,this.endNode);}__commitNode(值){this.__insert(值);this.value=值；}}可以看出lit-HTML没有像Vue和React那样将模板或JSX构造成虚拟DOM的过程。它只提供了一个轻量级的HTML标签方法，将模板字符转换为TemplateResult，然后使用注释节点填充动态位置。TemplateResult最终是通过创建一个标签，然后通过浏览器内置的innerHTML来解析模板。这个过程也很轻量级，相当于把所有可以交给浏览器的部分都交给了浏览器，包括模板的创建。后续节点复制操作。导出类TemplateInstance{_clone(){const{element}=this.template;constfragment=document.importNode(element.content,true);//省略了一些操作...returnfragment;}}其他的lit-html只是一个高效的，如果你想用它来写业务代码，它仍然缺乏Vue和React提供的生命周期和数据绑定能力。为了完成这部分能力，Polymer项目组还提供了另一个框架：lit-element，可以用来创建WebComponents。除了官方的lit-element框架，Vue的作者还剥离了Vue的响应式部分，并与lit-html结合创建了一个vue-lit(https://github.com/yyx990803/vue-lit)框架，一共写了70行代码，有兴趣的可以看看。
上一篇：如何用CSS修改占位符样式
下一篇：将html转换为word
最新推荐
猜你喜欢
- 1下一代苹果标准耳机？ Audeze Lightning接口耳
- 2下一代健身可穿戴设备！跟踪用户生物信号
- 3分析师称iPhone 15将升级下一代超带宽芯片
- 4SAKURA以黑科技为引擎，实现创新“加速”
- 5索尼电视高层专访！论电视画质引擎还有谁？
- 6科大讯飞已经上市十年了！开发引擎在哪里？
- 7荣耀引擎耳机二代开箱图：129元，你买吗？
- 8下一代谷歌眼镜新功能揭晓！引导用户学习跳舞
- 9增强现实（AR）行业分析报告 替代手机的下一代计算平台
- 10下一代可穿戴设备要兼顾功耗和安全防护
- 11下一代高清加持 芒果TV、东芝55U36EBC电视评测
- 12从 Apple Watch 到 iPhone，Taptic
- 13国内外主流VR引擎开始出现不同的面貌，哪个 VR 引擎最好？
- 14下一代Google Glass可能会形成一系列可穿戴设备
- 15Reeves已开始与谷歌合作开发下一代智能夹克
- 16无线耳机终于变得越来越流行，高通正在帮助下一代音频需求
- 17百度云智能化转型伊始！ ABC是引擎，IoT是变速箱
- 18搜狗推出“知音”引擎，除了输入法之外，还应用于汽车导航
- 19Flyme智能思维引擎One Mind为球迷解锁最佳观看姿势
- 20打造杀手级耳机，微软正在为下一代 HoloLens MR 眼
关注我的公众号
'+'打开微信搜索：“自然醒笔记本”
'}}）后来Vue甚至将模板和虚拟DOM结合起来，进一步提升了模板在Vue中的性能，但模板也有其缺陷。不管是什么模板引擎，启动时都需要花时间解析模板，这是无法避免的；连接模板和JavaScript数据比较麻烦，更新数据时需要更新模板；各种模板创建自己的语法结构。使用不同的模板引擎需要重新学习其语法糖，对开发体验不是很友好；JSXReact在官方文档中介绍了JSX：JSXisaJavaScriptsyntaxextension。我们建议将JSX与React结合使用。JSX是一种很好的方式来描述UI的基本形式应该呈现它应该具有的交互。JSX可能会让人想起模板语言，但它具有JavaScript的全部功能。vartitle='关注我的公众号'varcontent='打开微信搜索：“自然觉醒笔记本”'constelement={title}
{content}
${title}
${content}
`;//将模板渲染到documentrender(template('关注我的公众号','打开微信搜索：『自然醒笔记本''),document.body);模板语法因为使用了原生的模板字符，可以不用转义直接使用，也可以像JSX一样使用JavaScript语法进行遍历和逻辑控制。constskillTpl=(title,skills)=>html`${title||'技能列表'}
- ${skills.map(i=>html`
- ${i} `)}
${标题||“技能列表”
Hello${name}
`;//渲染模板到documentrender(myTemplate('World'),document.body);从前面的案例也可以看出，lit-html常用的两个API是html和render。构造模板html是标签函数，属于ES6新语法。如果不记得label函数的用法，可以打开Mozilla文档（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals）复习。exportconsthtml=(strings,...values)=>{...};html标签函数会接受多个参数，第一个参数是由静态字符串组成的数组，后面的参数是动态传入的表达式。我们可以写个案例看看传入html标签函数的参数长什么样：constfoo='吴彦祖';constbar='梁朝伟';html`你好${foo}，我是${bar}
`；整个字符串会被动态表达式切割成三部分，三部分组成一个数组，作为第一个参数传给html标签函数，动态表达式计算后得到的值传入一次作为以下参数。我们可以把字符串和值打印出来看看：lit-html会把这两个参数传给TemplateResult进行实例化。exportconsthtml=(strings,...values)=>{returnnewTemplateResult(strings,values);};//生成一个随机字符constmarker=`{{lit-${String(Math.random()).slice(2)}}}`;constnodeMarker=``;exportclassTemplateResult{constructor(strings,values){this.strings=strings;this.values=值；}getHTML(){constl=this.strings.length-1;让html='';让isCommentBinding=false;for(leti=0;i上一篇：如何用CSS修改占位符样式
下一篇：将html转换为word
最新推荐
猜你喜欢
- 1下一代苹果标准耳机？ Audeze Lightning接口耳
- 2下一代健身可穿戴设备！跟踪用户生物信号
- 3分析师称iPhone 15将升级下一代超带宽芯片
- 4SAKURA以黑科技为引擎，实现创新“加速”
- 5索尼电视高层专访！论电视画质引擎还有谁？
- 6科大讯飞已经上市十年了！开发引擎在哪里？
- 7荣耀引擎耳机二代开箱图：129元，你买吗？
- 8下一代谷歌眼镜新功能揭晓！引导用户学习跳舞
- 9增强现实（AR）行业分析报告 替代手机的下一代计算平台
- 10下一代可穿戴设备要兼顾功耗和安全防护
- 11下一代高清加持 芒果TV、东芝55U36EBC电视评测
- 12从 Apple Watch 到 iPhone，Taptic
- 13国内外主流VR引擎开始出现不同的面貌，哪个 VR 引擎最好？
- 14下一代Google Glass可能会形成一系列可穿戴设备
- 15Reeves已开始与谷歌合作开发下一代智能夹克
- 16无线耳机终于变得越来越流行，高通正在帮助下一代音频需求
- 17百度云智能化转型伊始！ ABC是引擎，IoT是变速箱
- 18搜狗推出“知音”引擎，除了输入法之外，还应用于汽车导航
- 19Flyme智能思维引擎One Mind为球迷解锁最佳观看姿势
- 20打造杀手级耳机，微软正在为下一代 HoloLens MR 眼