// router.js
constIndex=()=>import(/* webpackChunkName: "index" */'./pages/Index.vue');
constDetail=()=>import(/* webpackChunkName: "detail" */'./pages/Detail.vue');
constroutes=[
{
path:'/',
component: Index
},
{
path:'/detail',
component: Detail
}
];
constrouter=newRouter({
mode:'history',
routes
});

// Index.vue
asyncData({ store }) {
returnthis.methods.dispatch(store);// 核心模塊數(shù)據(jù)預(yù)取，服務(wù)端渲染
}
mounted() {
this.initOtherModules();// 非核心模塊，客戶端渲染，在 mounted 生命周期鉤子里觸發(fā)
}

// page-level caching
constmicroCache=LRU({
max:100,
maxAge:1000// 重要提示：條目在 1 秒后過期。
})
server.get('*', (req, res)=> {
consthit=microCache.get(req.url)
if(hit) {// 命中緩存，直接返回頁面
returnres.end(hit)
}
// 服務(wù)端渲染邏輯
...
})

// component-level caching
// server.js
constLRU=require('lru-cache')
constrenderer=createRenderer({
cache: LRU({
max:10000,
maxAge: ...
})
});
// component.js
exportdefault{
name:'item',// 必填選項
props: ['item'],
serverCacheKey:props=>props.item.id,
render (h) {
returnh('div',this.item.id)
}
};

、為什么xml

需要服務(wù)器端返回少量的、單一的數(shù)據(jù)

用戶名是否可用 1 / 0

返回兩個數(shù)的和 400

登錄是否成功 true/false

數(shù)據(jù)插是否成功 true/false

如果我們需要從服務(wù)器端返回大量、復(fù)雜的數(shù)據(jù)，如何實現(xiàn)？

xml：服務(wù)器端返回xml數(shù)據(jù)

json：服務(wù)器端返回json數(shù)據(jù)

2、格式：

(1)php解析xml

$dom=new DOMDocument();
$dom->loadXML($str);
$nd=$dom->getElementsByTagName("TagName");
$value=$nd->item(0)->nodeValue
$xml=simplexml_load_string($str);
$first=$xml->first;
$second=$xml->second;

(2)js解析xml

var xml=xmlHttp.responseXML;
node=xml.getElementsByTagName("TagName");
node[0].childNodes[0].nodeValue;

3 、案例1：

實現(xiàn)兩個數(shù)的四則運(yùn)算

HTML代碼:

<script language="javascript" src="public.js"></script>
<script>
window.onload=function(){
        $('btnOk').onclick=function(){
        var f=$('first').value;
        var s=$('second').value;
        var data='first='+f+'&second='+s;
        var xhr=createxhr();
        xhr.open('post','demo01.php');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                        //xml --->xml dom對象
                        var xml=xhr.responseXML;
                        var str=xml.getElementsByTagName('jia')[0].childNodes[0].nodeValue;
                        str+='|'+xml.getElementsByTagName('jian')[0].childNodes[0].nodeValue;
                        str+='|'+xml.getElementsByTagName('cheng')[0].childNodes[0].nodeValue;
                        str+='|'+xml.getElementsByTagName('chu')[0].childNodes[0].nodeValue;
                        $('result').innerHTML=str;
                }
        };
        xhr.send(data);
        };
};
</script>
<input type="text" id="first" /><br>
<input type="text" id='second' /><br>
<div id='result'></div>
<input type="button" id="btnOk" value="計算" />

理解:

var xml=xhr.responseXML; 得到ajax返回的xmldom對象

xml.getElementsByTagName('jia')[0] ：是表示獲取jia這個元素

xml.getElementsByTagName('jia')[0].childNodes：表示獲取jia元素下的所有子節(jié)點

xml.getElementsByTagName('jia')[0].childNodes[0] ：表示獲取jia元素下的唯一文本節(jié)點

xml.getElementsByTagName('jia')[0].childNodes[0].nodeValue：文本節(jié)點的值

php代碼:

<?php
$first=$_POST['first'];
$second=$_POST['second'];
$result1=$first+$second;
$result2=$first-$second;
$result3=$first*$second;
$result4=$first/$second;
//要想返回xml，首先連接一個xml格式的字符串
$str='<root>';
$str.='<jia>'.$result1.'</jia>';
$str.='<jian>'.$result2.'</jian>';
$str.='<cheng>'.$result3.'</cheng>';
$str.='<chu>'.$result4.'</chu>';
$str.='</root>';
/*$str=<<<str
<root>
<jia>$result1</jia>
</root>
str;*/
header('Content-type:text/xml');
echo $str;

理解:

得到結(jié)果后，需要使用字符串連接成一個xml格式的字符串，如：需要一個根元素，下面子元素，最后是具體的值，

連接時也可以使用<<<str創(chuàng)建xml字符串

str;

輸出這個字符串時，默認(rèn)的響應(yīng)內(nèi)容類型：text/html，也就是說客戶端仍把代碼當(dāng)做html來進(jìn)行解析，

ajax對象的responeXML是不能得到一個xmldom對象，必須設(shè)置響應(yīng)頭類型為:text/xml,其代碼:header('Content-type:text/xml');

public.js:

function createxhr() {
        /*var xhr;
        var str=window.navigator.userAgent;
        if (str.indexOf('MSIE') > 0) {
        xhr=new ActiveXObject('Microsoft.XMLHTTP');
        } else {
        xhr=new XMLHttpRequest();
        }
        return xhr;*/

        try{return new XMLHttpRequest();}catch(e){}
        try{return new ActiveXObject('Microsoft.XMLHTTP'); }catch(e){}
        alert('請更換瀏覽器！');
        }
        function $(id){
        return document.getElementById(id);
}

4、案例2

在頁面加載之后，將mysql數(shù)據(jù)庫goods表中所有數(shù)據(jù)顯示在表格中

<root>
<goods>
<name>222</name>
<price>55.00</price>
</goods>
<goods>
<name>諾 E661</name>
<price>205.00</price>
</goods>
<goods>
<name>諾 E661</name>
<price>200.00</price>
</goods>
</root>

HTML代碼:

<style>
tr{
background-color:#ffffff;
height:30px;
font-size:12px;
}
</style>
<script language="javascript" src='public.js'></script>
<script>
window.onload=function(){
        var xhr=createxhr();
        xhr.open('post','demo02.php');
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200)
                        var xml=xhr.responseXML;
                        var goods=xml.getElementsByTagName('goods');
                        for(var i=0;i<goods.length;i++){
                        //創(chuàng)建行元素
                        var tr=document.createElement('tr');
                        //創(chuàng)建序號td元素
                        var tdID=document.createElement('td');
                        tdID.innerHTML=i+1;
                        //創(chuàng)建名稱td元素
                        var tdName=document.createElement('td');
                        tdName.innerHTML=goods[i].childNodes[0].childNodes[0].nodeValue;
                        //創(chuàng)建價格td元素
                        var tdPrice=document.createElement('td');
                        tdPrice.innerHTML=goods[i].childNodes[1].childNodes[0].nodeValue;
                        //將三個td追加到tr元素
                        tr.appendChild(tdID);
                        tr.appendChild(tdName);
                        tr.appendChild(tdPrice);
                        document.getElementsByTagName('TBODY')[0].appendChild(tr);
                }
};
xhr.send(null);
}
</script>
<table id='tbData' width="800" cellspacing="1" cellpadding="4" bgcolor="#336699">
<tr>
<td>序號</td>
<td>商品名稱</td>
<td>商品價格</td>
</tr>
</table>

理解:

創(chuàng)建行元素，

創(chuàng)建單元格元素

將單元格元素追加到行元素中

將行元素追加到表格元素中

php代碼:

<?php
        //查詢goods表中所有數(shù)據(jù)并返回
        $sql="select name,price from goods order by id desc";
        mysql_connect('localhost','root','111111');
        mysql_select_db('shop');
        mysql_query('set names gb2312');
        $result=mysql_query($sql); //發(fā)送sql語句
        $num=mysql_num_rows($result); //總行數(shù)
        $str='<root>';
        for($i=0;$i<$num;$i++){
        $row=mysql_fetch_assoc($result);
        $str.='<goods>';
        $str.='<name>'.iconv('gb2312','utf-8',$row['name']).'</name>';
        $str.='<price>'.$row['price'].'</price>';
        $str.='</goods>';
        }
        $str.='</root>';
        header('Content-Type:text/xml');
        echo $str;
?>

理解:

查詢goods表中所有數(shù)據(jù)

連接xml格式的字符串

表中有多少條數(shù)據(jù)

xml字符串就有幾對goods標(biāo)簽

其中, name字段出現(xiàn)中文，所以需要進(jìn)行轉(zhuǎn)碼 gb2312--utf-8

最后, 輸出xml字符串

譯 ｜ 核子可樂、Tina

技術(shù)和軟件開發(fā)領(lǐng)域存在一種有趣的現(xiàn)象，就是同樣的模式迭起興衰、周而復(fù)始。

htmx 的走紅

過去Web非常簡單。URL 指向服務(wù)器，服務(wù)器將數(shù)據(jù)混合成 html，然后在瀏覽器上呈現(xiàn)該響應(yīng)。圍繞這種簡單范式，誕生了各種Javascript框架，以前可能需要數(shù)月時間完成的一個應(yīng)用程序基本功能，現(xiàn)在借助這些框架創(chuàng)建相對復(fù)雜的項目卻只需要數(shù)小時，我們節(jié)省了很多時間，從而可以將更多精力花在業(yè)務(wù)邏輯和應(yīng)用程序設(shè)計上。

但隨著 Web 不斷地發(fā)展，Javascript 失控了。不知何故，我們決定向用戶拋出大量 App，并在使用時發(fā)出不斷增加的網(wǎng)絡(luò)請求；不知何故，為了生成 html，我們必須使用 JSON，發(fā)出數(shù)十個網(wǎng)絡(luò)請求，丟棄我們在這些請求中獲得的大部分?jǐn)?shù)據(jù)，用一個越來越不透明的 JavaScript 框架黑匣子將 JSON 轉(zhuǎn)換為 html，然后將新的 html 修補(bǔ)到 DOM 中......

難道大家快忘記了我們可以在服務(wù)器上渲染 html 嗎？更快、更一致、更接近應(yīng)用程序的實際狀態(tài)，并且不會向用戶設(shè)備發(fā)送任何不必要的數(shù)據(jù)？但是如果沒有 Javascript，我們必須在每次操作時重新加載頁面。

現(xiàn)在，有一個新的庫出現(xiàn)了，摒棄了定制化的方法，這就是 htmx。作為 Web 開發(fā)未來理念的一種實現(xiàn)，它的原理很簡單：

• 從任何用戶事件發(fā)出 AJAX 請求。
• 讓服務(wù)器生成代表該請求的新應(yīng)用程序狀態(tài)的 html。
• 在響應(yīng)中發(fā)送該 html。
• 將該元素推到它應(yīng)該去的 DOM 中。

htmx 出現(xiàn)在 2020 年，創(chuàng)建者 Carson Gross 說 htmx 來源自他于 2013 年研究的一個項目 intercooler.js。2020 年，他重寫了不依賴 jQuery 的 intercooler.js，并將其重命名為 htmx。然后他驚訝的發(fā)現(xiàn) Django 社區(qū)迅速并戲劇性地接受了它！

Carson Gross 認(rèn)為 htmx 設(shè)法抓住了開發(fā)者對現(xiàn)有 Javascript 框架不滿的浪潮，“這些框架非常復(fù)雜，并且經(jīng)常將 Django 變成一個愚蠢的 JSON 生產(chǎn)者”，而 htmx 與開箱即用的 Django 配合得更好，因為它通過 html 與服務(wù)器交互，而 Django 非常擅長生成 html。

對于 htmx 的迅速走紅，Carson Gross 發(fā)出了一聲感嘆：這真是“十年窗下無人問，一舉成名天下知（this is another example of a decade-long overnight success）”。

htmx 的實際效果

可以肯定的一點是 htmx 絕對能用，單從理論上講，這個方法確實值得稱道。但軟件問題終究要歸結(jié)于實踐效果：效果好嗎，能不能給前端開發(fā)帶來改善？

在 DjangoCon 2022 上，Contexte 的 David Guillot 演示了他們在真實 SaaS 產(chǎn)品上實現(xiàn)了從 React 到 htmx 的遷移，而且效果非常好，堪稱“一切 htmx 演示之母”（視頻地址：https://www.youtube.com/watch?v=3GObi93tjZI）。

Contexte 的項目開始于 2017 年，其后端相當(dāng)復(fù)雜，前端 UI 也非常豐富，但團(tuán)隊非常小。所以他們在一開始的時候跟隨潮流選擇了 React 來“構(gòu)建 API 綁定 SPA、實現(xiàn)客戶端狀態(tài)管理、前后端狀態(tài)分離”等。但實際應(yīng)用中，因為 API 設(shè)計不當(dāng)，DOM 樹太深，又需要加載很多信息，導(dǎo)致 UI“非常非常緩慢”。在敏捷開發(fā)的要求下，團(tuán)隊里唯一的 Javascript 專家對項目的復(fù)雜性表現(xiàn)得一無所措，因此他們決定試試 htmx。

九大數(shù)據(jù)提升

于是我們決定大膽嘗試，花幾個月時間用簡單的 Django 模板和 htmx 替換掉了 SaaS 產(chǎn)品中已經(jīng)使用兩年的 React UI。這里我們分享了一些相關(guān)經(jīng)驗，公布各項具體指標(biāo)，希望能幫同樣關(guān)注 htmx 的朋友們找到說服 CTO 的理由！

1. 這項工作共耗費(fèi)了約 2 個月時間（使用 21K 行代碼庫，主要是 JavaScript）
2. 不會降低應(yīng)用程序的用戶體驗（UX）
3. 將代碼庫體積減小了 67%（由 21500 行削減至 7200 行）
4. 將 Python 代碼量增加了 140%（由 500 行增加至 1200 行）;這對更喜歡 Python 的開發(fā)者們應(yīng)該是好事
5. 將 JS 總體依賴項減少了 96%（由 255 個減少至 9 個）

6. 將 Web 構(gòu)建時間縮短了 88%（由 40 秒縮短至 5 秒）

7. 首次加載交互時間縮短了 50% 至 60%（由 2 到 6 秒，縮短至 1 到 2 秒）

8. 使用 htmx 時可以配合更大的數(shù)據(jù)集，超越 React 的處理極限

9. Web 應(yīng)用程序的內(nèi)存使用量減少了 46%（由 75 MB 降低至 40 MB）

這些數(shù)字令人頗為意外，也反映出 Contexte 應(yīng)用程序高度契合超媒體的這一客觀結(jié)果：這是一款以內(nèi)容為中心的應(yīng)用程序，用于顯示大量文本和圖像。很明顯，其他 Web 應(yīng)用程序在遷移之后恐怕很難有同樣夸張的提升幅度。

但一些開發(fā)者仍然相信，大部分應(yīng)用程序在采用超媒體 /htmx 方法之后，肯定也迎來顯著的改善，至少在部分系統(tǒng)中大受裨益。

開發(fā)團(tuán)隊組成

可能很多朋友沒有注意，移植本身對團(tuán)隊結(jié)構(gòu)也有直接影響。在 Contexte 使用 React 的時候，后端與前端之間存在硬性割裂，其中兩位開發(fā)者全職管理后端，一位開發(fā)者單純管理前端，另有一名開發(fā)者負(fù)責(zé)“全棧”。（這里的「全棧」，代表這位開發(fā)者能夠輕松接手前端和后端工作，因此能夠在整個「棧」上獨立開發(fā)功能。）

而在移植至 htmx 之后，整個團(tuán)隊全都成了“全棧”開發(fā)人員。于是每位團(tuán)隊成員都更高效，能夠貢獻(xiàn)出更多價值。這也讓開發(fā)變得更有樂趣，因為開發(fā)人員自己就能掌握完整功能。最后，轉(zhuǎn)向 htmx 也讓軟件優(yōu)化度上了一個臺階，現(xiàn)在開發(fā)人員可以在棧內(nèi)的任意位置進(jìn)行優(yōu)化，無需與其他開發(fā)者提前協(xié)調(diào)。

htmx 是傳統(tǒng)思路的回歸

如今，單頁應(yīng)用（SPA）可謂風(fēng)靡一時：配合 React、Redux 或 Angular 等庫的 JS 或 TS 密集型前端，已經(jīng)成為創(chuàng)建 Web 應(yīng)用程序的主流方式。以一個需要轉(zhuǎn)譯成 JS 的 SPA 應(yīng)用為例：

但 htmx 風(fēng)潮已經(jīng)襲來，人們開始強(qiáng)調(diào)一種“傻瓜客戶端”方法，即由服務(wù)器生成 html 本體并發(fā)送至客戶端，意味著 UI 事件會被發(fā)送至服務(wù)器進(jìn)行處理。

用這個例子進(jìn)行前后對比，我們就會看到前者涉及的活動部件更多。從客戶端角度出發(fā)，后者其實回避了定制化客戶端技術(shù)，采取更簡單的方法將原本只作為數(shù)據(jù)引擎的服務(wù)器變成了視圖引擎。

后一種方法被稱為 AJAX（異步 JavaScript 與 XML）。這種簡單思路能夠讓 Web 應(yīng)用程序獲得更高的響應(yīng)性體驗，同時消除了糟糕的“回發(fā)”（postback，即網(wǎng)頁完全刷新），由此回避了極其低效的“viewstate”等.NET 技術(shù)。

htmx 在很多方面都體現(xiàn)出對 AJAX 思路的回歸，最大的區(qū)別就是它僅僅作為新的聲明性 html 屬性出現(xiàn)，負(fù)責(zé)指示觸發(fā)條件是什么、要發(fā)布到哪個端點等。

另一個得到簡化的元素是物理應(yīng)用程序的結(jié)構(gòu)與構(gòu)建管道。因為不再涉及手工編寫 JS，而且整個應(yīng)用程序都基于服務(wù)器，因此不再對 JS 壓縮器、捆綁器和轉(zhuǎn)譯器做（即時）要求。就連客戶端項目也能解放出來，一切都由 Web 服務(wù)器項目負(fù)責(zé)完成，所有應(yīng)用程序代碼都在.NET 之上運(yùn)行。從這個角度來看，這與高度依賴服務(wù)器的 Blazor Server 編程模型倒是頗有異曲同工之妙。

技術(shù)和軟件開發(fā)領(lǐng)域存在一種有趣的現(xiàn)象，就是同樣的模式迭起興衰、周而復(fù)始。隨著 SPA 的興起，人們一度以為 AJAX 已經(jīng)過氣了，但其基本思路如今正卷土重來。這其中當(dāng)然會有不同的權(quán)衡，例如更高的服務(wù)器負(fù)載和網(wǎng)絡(luò)流量（畢竟現(xiàn)在我們發(fā)送的是數(shù)據(jù)視圖，而不只是數(shù)據(jù)），但能讓開發(fā)者多個選擇肯定不是壞事。

雖然不敢確定這種趨勢是否適用于包含豐富用戶體驗的高復(fù)雜度應(yīng)用程序，但毫無疑問，相當(dāng)一部分 Web 應(yīng)用程序并不需要完整的 SPA 結(jié)構(gòu)。對于這類用例，簡單的 htmx 應(yīng)用程序可能就是最好的解決方案。

參考鏈接：

https://news.ycombinator.com/item?id=33218439

https://www.reddit.com/r/django/comments/rxjlc6/htmx_gaining_popularity_rapidly/

https://mekhami.github.io/2021/03/26/htmx-the-future-of-web/

https://www.compositional-it.com/news-blog/more-on-htmx-back-to-the-future/

聲明：本文為InfoQ編譯，未經(jīng)許可禁止轉(zhuǎn)載。