最近2个周做域名转入前端，为了兼容旧的代码，使用了 Backbone。一路下来跌跌撞撞，踩坑无数。 这段时间，日日加班，做梦都是前端 render 逻辑，快要疯掉。但也收获良多，基本上写前端已经心中有底了。
Backbone 到处是大坑
纯牢骚。但是用这种原始框架最锻炼程序员的 js 基础。
代码量巨大
总感觉自己用 Backbone 写了一个周的功能，用 Angular 两天就能搞定。
代码行数不是问题，代码量行数多，但逻辑清晰是可以接受的。但是，感觉 Backbone 代码量又大，逻辑又复杂。
代码量的问题，可以用自动化工具解决。例如 VIM 插件，例如初始化 Model，Collection，View 的定义。
目前采用的是 VIM ultisnips。
使用有意义的变量名
View 内不要使用 this.model, this.collection 这样的变量名，如果多个 view 监听了同一个 model 或者 collection 的状态时， 通过代码搜索很难发现对同一个 model 的 listenTo。
点击按钮没反应案例一 - re render 导致事件绑定失效
现象是，父 View 重新 render (先 this.$el.html(...), 后 append 子 view), 出现子 view 的按钮点击失效，即 events 绑定失败。
参考 Backbone: event lost in re-render
原来，Backbone 在 render 的时候，内部流程是这样的
this.$el.empty();
this.$el.append(this.subView.render().el);
而 jQuery 的 empty 会清空该 element 下所有的事件绑定。
解决办法是主动调用子 view 的 delegateEvents 方法
render: function(){
this.$el.html( this.subView.render().el );
this.subView.delegateEvents();
return this;
}
参考 Backbone 的 view.delegateEvents 的文档，可知 delegateEvents 方法在 view 初始化的时候会被主动调用一次。 即处理 events 中定义的事件。在父 view re render 的时候，这些事件就被清理了。所以重新调用一次 delegateEvents 即可。
点击按钮没反应案例二 - view 间切换导致 el 挂载点丢失
页面逻辑层次
HOME
|_ view 1
|_ view 2
|_ view 2.1
|_ view 2.2
|_ view 2.3
现象是从 view 2.1 ～ 2.3 退回到 view 1，然后在 view 1 中点击按钮进入 view 2.1 ~ 2.3 时，页面没有刷新，但是 view 2.1 ~ 2.3 里的初始化执行的 ajax 请求能在 network 中看到。
很显然是 render 执行失败，但是 initialize 执行成功。
原因是，view 2.1 ~ 2.3 是挂载到 view 2 上的，切换为 view 1 时，执行了 this.$el.empty, 即将 view2 干掉了。 但是再次进入 view 2.1 ~ 2.3 时，并没有重新 render view 2.
解决方法很简单，即每次进入 view 2.1 ～ 2.3 时，都 render 一遍 view 2.
再简单的页面，只要涉及到界面变化最好使用 model/view 的模式
监听 model change，然后 re-render 才是正途。
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式