js拼接html页面,如何避免js拼接html片段

背景

最近在做一个项目，其中数据的加载比较耗时，刚开始的方案是：

方案一

①，当用户点进来时，先给其相应出基本页面，价格数据用ajax请求后台获取；

②，当ajax有返回数据时则利用js拼接html

结果：

用户体验是上去了，但代码就不好维护了，在js里拼html也太难看了，不利于后期维护

于是我开始百度，有什么更好的解决方案，我坚信肯定不止我一个人遇到这种问题，网上一定会有更好的解决方案的，

带着这种信念，我找到了方案二；

方案二

利用vue或angularjs 实现数据绑定到html上。

结果：

此方案的确可以，但需要学一门前端框架，学习需要付出成本

有时遇到问题，在百度上也难以找到答案，我有点犹豫；

昨天在逛开源中国时，发现个人博客数据是通过ajax来进行分页的，且返回来的是html片段

这样的话，方案三就呼之欲出了，如图

方案三

还是跟方案一一样，只是ajax请求返回来的是已经拼接好的html片段，

即，ajax照常发起数据请求，只是后台controller不加 @ResponseBody注解，而是跳转到页面

然后ajax得到的响应就是html片段了，直接给要展示html标签设置其html即可

结论：

只是我个人的观点，我更喜欢方案三，因为项目一开始并没有使用方案二的前端框架，而且方案三简单易实现。