如何避免js拼接html片斷

背景

最近在作一個項目，其中數據的加載比較耗時，剛開始的方案是：

方案一

①，當用戶點進來時，先給其相應出基本頁面，價格數據用ajax請求後臺獲取；

②，當ajax有返回數據時則利用js拼接html

結果：

用戶體驗是上去了，但代碼就很差維護了，在js裏拼html也太難看了，不利於後期維護

因而我開始百度，有什麼更好的解決方案，我堅信確定不止我一我的遇到這種問題，網上必定會有更好的解決方案的，

帶着這種信念，我找到了方案二；

方案二

利用vue或angularjs 實現數據綁定到html上。

結果：

此方案的確能夠，但須要學一門前端框架，學習須要付出成本

有時遇到問題，在百度上也難以找到答案，我有點猶豫；

昨天在逛開源中國時，發現我的博客數據是經過ajax來進行分頁的，且返回來的是html片斷

這樣的話，方案三就呼之欲出了，如圖

方案三

仍是跟方案一同樣，只是ajax請求返回來的是已經拼接好的html片斷，

即，ajax照常發起數據請求，只是後臺controller不加 @ResponseBody註解，而是跳轉到頁面

而後ajax獲得的響應就是html片斷了，直接給要展現html標籤設置其html便可

結論：

只是我我的的觀點，我更喜歡方案三，由於項目一開始並無使用方案二的前端框架，並且方案三簡單易實現。