Backbone 实战总结

更新日期: 2015-12-12 阅读次数: 6723 分类: BackboneJS

最近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 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年10月01日 国庆节
2020年10月01日 中秋节
2020年10月04日 世界动物日
2020年10月08日 寒露
2020年10月09日 世界邮政日
2020年10月10日 辛亥革命纪念日
2020年10月13日 中国少年先锋队诞辰日
2020年10月14日 世界标准日
2020年10月15日 国际盲人节
2020年10月16日 世界粮食日
2020年10月17日 国际消除贫困日
2020年10月22日 世界传统医药日
查看更多节日