个人网站重构小结

最近将个人网站优化了一下，弄成了单页面应用，前端路由用的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