个人网站重构小结

最近将个人网站优化了一下，弄成了单页面应用，前端路由用的history API，遇到了一些问题，在这里记录一下：

• 首先是贼坑的webpack官方文档，估计是更新的太快了，文档例子来不及改，如果要引入json文件的话应该将json文件的后缀改成一个自定义后缀（非json），然后在配置文件中用json-loader解析这种后缀的文件（比如说后缀是str），再用const json=require('./hello.str');引入json文件
• history在后退和前进的时候才会触发popstate，pushstate的时候是不会触发的。当我们点击一个或多个后退键时，history栈不会pop出state，只是指针会移动，因此history.length不变；当我们再进入其他详情页时，会push一个新的state并把指针以上的其他state给删除
• 这个单页面应用我用的是控制css的display来决定显示页面的，先暴力将所有页面hide，然后根据url参数显示相应页面，用到了很多事件委托，因此当加载新页面时要先清除当前页面的所有事件绑定（jquery用.off()函数），否则会发生事件多次触发的bug
• $(this)===$(e.currentTarget)===当前绑定事件的元素；$(e.target)是触发事件的元素；$('#a').on('click','#b',function(){})这里的$(e.currentTarget)是指a
• 前端框架用的是jquery-weui，其中有个幻灯片的效果，用的是swiper.js，建议不要用jquery-weui提供的swiper.js，因为版本比较旧，用了会有bug的
• 如果是html中有空的dom元素，通过js动态加载数据的话，最好用$().html()而不要用$().append()，并且对于多个页面都有重复的class的元素，用选择器选择它们的时候要再加个页面id的选择器，不然一改全都改了

附上源码地址，欢迎star：https://github.com/variinlkt/foodiess-rebuild

最后

以上就是还单身马里奥为你收集整理的个人网站重构小结的全部内容，希望文章能够帮你解决个人网站重构小结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。