localStorage实现返回到原位置以及pjax的反思

之前很长的一段时间想解决无返回刷新的问题,到网上查看了好久,得知用pjax插件可以解决,钻进这个大坑蹦跶了好久,而是效果不甚。

pjax

  查看了官方文档和welefen的关于pjax-jquery插件的文档,写的很是简单。在使用的过程中,一直觉得既然封装好了,应该直接使用就可以了。但是在使用中却就是出现不了效果。分析得知是后台的返回数据有问题。但是我无法说服后台。。。

  后来就用了一晚上把pjax的源码舔了一遍,知道大致的工作流程,得知我的问题如下:

  • 没有充分了解pjax的原理。
  • 没有及时的研究源码,导致很多时间的浪费。
  • 缺少和后台的有效交流,虽然交流几次,但是由于自己的无知(只知道怎么用)没什么成效。导致一问三不知的囧境。

  pjax插件适合于单页面,根本不适合我的需求,后来虽然有不错的demo实现,但是终究不是最佳的方案,舍弃。

参考资料:

localStorage

  我们的需求是这样的:在页面有加载更多,用户可以点击一次就增加十个人的信息到页面中,点击你想看的ta进入他的主页,但是返回来就会,对,就是现在坑爹的体验,它回到了开始的状态,用户得重新点加载更多折腾好久才可以回到上次继续的地方。我们的需求就是让用户在ta的个人主页点击返回的时候可以回到原来的位置。

实现思路

1.点击ta的资料栏页面时把当前页面中总共有多少个资料栏除以十后的数据存到历史记录中,并存下窗口到页面顶部的距离。

$(".page").click(function(){
   var n = $(".page").size();
   var m = parseInt(n/10, 10);
   storage.setItem(pageIndexKey, m);
});

2.每次加载页面的时候,在把加载更多的次数提取出来,自动执行几次加载更多的效果之后,就清楚历史记录(避免刷新页面没变化)。
3.读取上次保存的窗口到页面顶部的距离。
4.从而实现了返回回到原来位置的效果。

小结

通过这个需求到实现demo这个时间,我明白了些许道理,先分享:

  • 学习方法很重要,不要死啃书,很枯燥,而且根本没用,看了和没看一样,延伸学习的方法才是王道。我现在准备在空余时间专啃大神的博客,遇到新的知识点,可以去了解,如果是对于前端很重要的关键词,那肯定要掌握的,可以去google搜索,找到优秀的博文去学习,然后整理成自己的博文记录。
  • 拿到一个需求不要急于去确定方案,要三思,比如我这个需求,我就是钻到无返回刷新的牛角尖里面了,花费了很多时间,效果还不好。而localStorge这个是完全不一样的思路,却效果好很多,而且代码也不多。这真是值得狠狠反思的地方。
  • 学习知识要有体系。前端的知识很多很杂,却是归于体系的。只有不断的啃,不断的钻研,扩大自己的知识点,才能掌握整个体系,这个是成为大神必备的吧。

最后再说两句

呵呵,原谅我是一个暴漫爱好者。。。

我开始写博客不久,肯定写的很烂,这是肯定的,我会不断努力的,所以。。。
请不喜勿喷,请多多指点。
另外,我希望可以交很多的朋友,相互帮助,相互学习,一起成为大牛。

原文地址:https://www.cnblogs.com/hzhuang/p/4356456.html