用React.js替换Backbone.js的View(二)

——Todo MVC示例

Backbone.js和React.js在设计思想上都借鉴了Reactive Programming,即:当Model修改时,这种变更可以反向传播到View,使得View同时被更改,也就是双向绑定。但Backbone.js需要你自己来写如何修改View,而在React.js中,你只需要关心如何根据Model来显示View,如何修改可以完全交给React.js。也就是说他们都在做一种简化,而React.js做的更加彻底,这也是它的核心思想和优点。

真正的学习还是需要写代码,所以这里用经典的Todo MVC作为示例。所有的代码可以在我的Github上找到。

用React.js替换Backbone.js的View(一)

——Backbone.js View的陷阱以及React.js的优点

最近终于找到时间,学习了一下Facebook出品的React.js,发现虽然没有很深的体会到性能上的好处,但是这种编程方式带来的好处确实是很大的。这里我准备跟Backbone.js的View做一下对比,同时下一篇文章中提供一个示例说明一下如何用React.js替换Backbone.js的View。

国内项目天坑记(一)

——大型官方网站中的前端选型

Architecture

一年多的时间没有写博客了,这段时间一直在加班加点的赶一个国内官方网站项目,基本12*6的工作时间让博客荒废了这么久,现在终于有些时间总结整理一下这个项目中的一些坑和经验。之所以叫做天坑记而不是填坑记,是因为该坑连绵不绝,是一个堪称有生之年的坑……

项目开始的初期,面临着很多许多技术选型,选的好可以让后面的开发事半功倍,选的不好……就只能自己埋的坑自己填了。

利用Backbone.js重构项目代码

进入现在这个项目已经一年多了,这是我呆过时间最长的一个项目,见证了项目的前端从简单的一些效果到有了复杂的逻辑,最后需要借助JavaScript的MVC框架来重构前端代码,以避免前端代码爆炸失控。具体来说我们的前端代码在增长过程中遇到了以下问题:

  • 多个页面组件根据同一数据来源做更新显示时,会有不少逻辑上重复的代码,或者过多的回调嵌套;
  • 由于缺乏一个消息传递机制,导致全局变量很多;
  • 组件之间耦合太深,单个组件很难被重用;
  • 数据被写在DOM元素的属性中,当显示需求改变时很难只修改DOM而不破坏功能;
  • 测试代码中需要准备大量的html fixture,每个测试都是很大的集成测试,难以重构、相当耗时。

当你遇到其中一个或几个问题时,请开始考虑用Backbone.js来重构吧,越是问题严重的时候重构的风险越大,花费的时间和精力也越多,最后可能是遗留一大堆垃圾代码而草草了结项目。