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

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

發(fā)展歷程

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

發(fā)展階段

原生 DOM API

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

 
 
 
 

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

jQuery 操作 DOM

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

 
 
 
 

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

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

模板操作

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

mustache

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

 
 
 
 

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

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

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

JSX

GitHub - OpenJSX/logo: Logo of JSX-IR

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

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

 
 
 
 

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