关于校庆网站的上线及思考

这两个月一直在做复旦110周年的校庆网站,截止到目前(2015.5.9),还只有一个demo版上线:
http://anniversary.fudan.edu.cn/demo/
这个网站(或者说一张交互性比较强的展示性网页?)的前端基础布局、几个轮子(背景轮播、滚轮翻页、弹出框、全屏幕视频播放)是我一个人完成的,所以现在可以记录一下开发过程中的坑和积累的经验。

项目中错误的选择以及反思

1、早期忽视了版本控制
在网站开发之初,需求真的很简单,设计稿里面涉及到的高交互、高动态的元素很少,最初的设计稿里除了微博墙以外都是静态的,基本没有涉及太多的前后端AJAX交互、元素状态管理,所以让我错误的估计了整个网站(或者说整张网页)的开发量,认为这个网站完全可以我一人写完全部的前端代码。
既然一个人就可以写完,那就没必要使用git了。所以最初非常错误地没有使用git,直到中途涉及到几个人代码的合并,才让我意识到git的重要性,但这个时候已经有点晚了。到后来有更多的开发人员(其中有技术新人)加入开发,但是我没有强行要求模块化和解耦,所以导致独立的JS文件、全局变量有些失控,虽然最后非常幸运地没有出什么大的BUG,但是这也只是运气好而已吧?
这里写图片描述
上图是截止到目前的JS文件,命名、功能都杂乱无章。

2、没有强行要求模块化
之前由于都是我独自开发,对于整个前端项目有把握,在最初写背景轮播以及滑轮翻页时,模块化做得还是非常不错的。
后来有一些细节上的需求,大概每处只要几十行就能解决,当时没有意识到将来会扩展到如此复杂,所以大部分代码放到了main.js里面,基本没有做模块化,导致代码解耦非常模糊,维护性差。
而且最初低估了页面事件的复杂性,没有选择使用事件代理,全部都是用的静态绑定,等到后来再考虑使用事件代理时已经有点迟了。将来会在此处重构。
再后来更多人加入开发,但并没有让他们重视模块化的问题,导致代码有些失控。


遇到的一些BUG以及修复

写滑动效果的时候,使用了setInterval,但是测试的时候发现了一个非常诡异的BUG:

测试机使用FireFox的时候,有时滑动定位不准,甚至极少时候Chrome下也会有这个问题,但是在我自己的电脑上没办法重现这个问题,即使浏览器版本一样。

后来发现是浏览器性能的问题,当初写滚动效果的时候,我为了效果的流畅性,写成了100fps的动画,但是在一些性能差的电脑上,10ms是不够浏览器完成一次窗口位置刷新的,所以导致有时setInterval被阻塞,导致定位失效。
后来调成了50fps的动画,便不再出现这个问题。