最近开发一个较复杂的单页应用的些许感想

最近的工作在做一个单页应用的部分功能的升级。

该应用是所谓的前后端分离的： 前端，后端是两个项目。 启动项目时，前端只需起一个静态服务器，后端用命令行起即可。 前端负责页面输出。用了Angular.js，当然啦，路由也用的Angular提供的。后端提供接口。因为前，后端不在同一个域，所以，后端提供的接口的响应头都是 Access-Control-Allow-Origin: *的。

这是我做的第一次做单页应用，也是第一次在正式项目里用Angular，所以遇到了不少坑，记录如下

• 页面切换时（非页面刷新，只是hash发生变化，ng-view里的内容根据路由进行更新），用jQuery抓取新页面的元素抓不到。有时候用setTimeout能搞定。或者如果只是给一些元素绑定事件，可以用事件委托。
• 多次进入同一个页面，导致同一个js被多次执行导致的问题。因为页面没有刷新，事件委托的那元素上的事件会被绑定多次。解决方案是，绑事件前，先接触绑定事件。
• Bootstrap 3弹出框 动态生成元素有时会出现幽灵的情况：元素生成好之后的元素，用jQuery也抓取不到那元素。。。
• 页面有较大改动时，要改不少jQuery的选择元素的代码
• 后端的接口调整或出问题后导致的一些问题。

做单页应用的一些总结

• 尽量不要用jQuery做。用Angular来代替。其双向绑定，不依赖于页面结构
• 尽量不要用事件委托，如果用，要在绑定事件前解除绑定来避免多绑。当然也有可能导致错绑其他页面的元素。因为单页应用的页面跳转并没有刷新页面
• 前后端分离可采用，前后端均用相同的模板引擎。前端在开发时，请求的自己写的模拟的接口，而非后端真正的接口。模拟的接口和后端的接口的格式是一样的。

最后吐槽下，如果是做一个年代久远的大项目，往往意味着入坑：依赖的第三方组件的基本上不感升级的，因为不知道有哪些页面依赖它；充斥着大量的重复代码；以及一堆的全局的变量，方法。。。