前面的文章介紹了 Web Components 的基本用法，今天來(lái)看看基于這個(gè)原生技術(shù)，Google 二次封存的框架 lit-html。

其實(shí)早在 Google 提出 Web Components 的時(shí)候，就在此基礎(chǔ)上發(fā)布了 Polymer 框架。只是這個(gè)框架一直雷聲大雨點(diǎn)小，內(nèi)部似乎也對(duì)這個(gè)項(xiàng)目不太滿意，然后他們團(tuán)隊(duì)又開(kāi)發(fā)了兩個(gè)更加現(xiàn)代化的框架(或者說(shuō)是庫(kù)?)：lit-html、lit-element，今天的文章會(huì)重點(diǎn)介紹 lit-html 的用法以及優(yōu)勢(shì)。

發(fā)展歷程

在講到 lit-html 之前，我們先看看前端通過(guò) JavaScript 操作頁(yè)面，經(jīng)歷過(guò)的幾個(gè)階段：

發(fā)展階段

原生 DOM API

最早通過(guò) DOM API 操作頁(yè)面元素，操作步驟較為繁瑣，而且 JS 引擎與瀏覽器 DOM 對(duì)象的通信相對(duì)耗時(shí)，頻繁的 DOM 操作對(duì)瀏覽器性能影響較大。

 
 
 
 

  
  
  
  
var $box = document.getElementById('box') 
  
  
  
  
var $head = document.createElement('h1') 
  
  
  
  
var $content = document.createElement('div') 
  
  
  
  
$head.innerText = '關(guān)注我的公眾號(hào)' 
  
  
  
  
$content.innerText = '打開(kāi)微信搜索：『自然醒的筆記本』' 
  
  
  
  
$box.append($head) 
  
  
  
  
$box.append($content) 
 
 
 
 

jQuery 操作 DOM

jQuery 的出現(xiàn)，讓 DOM 操作更加便捷，內(nèi)部還做了很多跨瀏覽器的兼容性處理，極大的提升了開(kāi)發(fā)體驗(yàn)，并且還擁有豐富的插件體系和詳細(xì)的文檔。 

 
 
 
 

  
  
  
  
var $box = $('#box') 
  
  
  
  
 
  
  
  
  
var $head = $('
', { text: '關(guān)注我的公眾號(hào)' }) 
  
  
  
  
var $content = $('
', { text: '打開(kāi)微信搜索：『自然醒的筆記本』' }) 
  
  
  
  
 
  
  
  
  
$box.append($head, $content) 
 
 
 
 

雖然提供了便捷的操作，由于其內(nèi)部有很多兼容性代碼，在性能上就大打折扣了。而且它的鏈?zhǔn)秸{(diào)用，讓開(kāi)發(fā)者寫(xiě)出的面條式代碼也經(jīng)常讓人詬病(PS. 個(gè)人認(rèn)為這也不能算缺點(diǎn)，只是有些人看不慣罷了)。

模板操作

『模板引擎』最早是后端 MVC 框架的 View 層，用來(lái)拼接生成 HTML 代碼用的。比如，mustache 是一個(gè)可以用于多個(gè)語(yǔ)言的一套模板引擎。

mustache

后來(lái)前端框架也開(kāi)始搗鼓 MVC 模式，漸漸的前端也開(kāi)始引入了模板的概念，讓操作頁(yè)面元素變得更加順手。下面的案例，是 angluar.js 中通過(guò)指令來(lái)使用模板：

 
 
 
 

  
  
  
  
var app = angular.module("box", []); 
  
  
  
  
 
  
  
  
  
app.directive("myMessage", function (){ 
  
  
  
  
  return { 
  
  
  
  
    template : '' + 
  
  
  
  
    '
關(guān)注我的公眾號(hào)
' + 
  
  
  
  
    '
打開(kāi)微信搜索：『自然醒的筆記本』
' 
  
  
  
  
  } 
  
  
  
  
}) 
 
 
 
 

后來(lái)的 Vue 更是將模板與虛擬 DOM 進(jìn)行了結(jié)合，更進(jìn)一步的提升了 Vue 中模板的性能，但是模板也有其缺陷存在。

• 不管是什么模板引擎，在啟動(dòng)時(shí)，解析模板是需要花時(shí)間，這是沒(méi)有辦法避免的;
• 連接模板與 JavaScript 的數(shù)據(jù)比較麻煩，而且在數(shù)據(jù)更新時(shí)還需進(jìn)行模板的更新;
• 各式各樣的模板創(chuàng)造了自己的語(yǔ)法結(jié)構(gòu)，使用不同的模板引擎，就需要重新學(xué)習(xí)一遍其語(yǔ)法糖，這對(duì)開(kāi)發(fā)體驗(yàn)不是很友好;

JSX

GitHub - OpenJSX/logo: Logo of JSX-IR

React 在官方文檔中這樣介紹 JSX：

“JSX，是一個(gè) JavaScript 的語(yǔ)法擴(kuò)展。我們建議在 React 中配合使用 JSX，JSX 可以很好地描述 UI 應(yīng)該呈現(xiàn)出它應(yīng)有交互的本質(zhì)形式。JSX 可能會(huì)使人聯(lián)想到模板語(yǔ)言，但它具有 JavaScript 的全部功能。

 
 
 
 

  
  
  
  
var title = '關(guān)注我的公眾號(hào)' 
  
  
  
  
var content = '打開(kāi)微信搜索：『自然醒的筆記本』' 
  
  
  
  
 
  
  
  
  
const element = 
 
  
  
  
  
  
{title}
 
  
  
  
  
  
{content}