如何避免js拼接html片段

背景

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

方案一

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

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

结果:

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

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

带着这种信念,我找到了方案二;

方案二

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

结果:

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

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

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

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

方案三

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

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

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

结论:

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

猜你喜欢

转载自my.oschina.net/u/3574106/blog/2222739