重写Backbone.js的加载动作

解决覆盖Backbone.Model的parse方法无效的问题。

居然在Google里找不到类似的情况,难道只有我一个人会有这种疑问么……

我在使用Backbone的时候,遇到一个问题:我需要用 Backbone.Model 或者 Backbone.Collection 来加载一些远程数据,一般来说都是静态文件,比如HTML或者XML,既不满足RESTful,也不是JSON;虽然不很符合Backbone的要求,不过因为是静态的,所以我觉得ajax应该都没问题。当我按照这个思路写下去,一般就是这样:

var MyModelClass = Backbone.Model.extend({
  url: 'config.xml',
  parse: function (response) {
    console.log(response);
  }
});
var model = new MyModelClass();
model.fetch();

但是运行之后,我发现被覆盖的 parse 没有执行。然而查看网络,目标文件已经被正常加载。作为Backbone的初学者,也不知道问题出在哪里。不得已找来源码跟踪,发现Backbone实现 fetch 是委托给 Backbone.sync 方法,但是在实现的时候会把数据格式设置为json:

// http://documentcloud.github.com/backbone/backbone.js
// Default JSON-request options.
var params = {type: type, dataType: 'json'};

而 jQuery 1.4版之后,会对返回的数据格式进行验证,如果不符合就抛出异常。所以当我那些不是 JSON 但声明是 JSON 的数据加载完毕后,jQuery 就会抛出异常,于是覆盖的parse也就不执行了。

如果远程数据不是JSON,需要覆盖数据加载逻辑时,就应该覆写 .fetch(),比如这样:

var MyModelClass = Backbone.Model.extend({
  url: 'config.xml',
  fetch: function () {
    $.ajax({
      url: this.url,
      context: this,
      success: this.parse
    });
  }
  parse: function (response) {
    console.log(response);
  }
});

var model = new MyModelClass();
model.fecth();

我认为不应该重写 .sync(),因为实际应用中,不同的 Model 和 Collection 可能要提供加载远程数据、加载模板、与 LocalStorage 交互等不同的功能,重写sync也很难满足需要。所以不妨直接在不同的类里面覆盖各自的fetch、save方法。


这篇文章还有人看,那就更新一下。(2016-11-25)

Backbone 用的久了,发现它其实设计了更好的办法解决这种问题:调用 .fetch() 的时候传递 options

// 以下代码通过继承并覆写 .fetch() 方法,告知 jQuery 返回数据类型是 XML
var MyModel = Backbone.Model.extend({
  fetch: function (options) {
    options = options || {};
    options.dataType = 'xml';
    return Backbone.Model.prototype.fetch.call(this, options);
  },
  parse: function (response) {
    console.log(response); // jQuery 会帮我们分析这个 XML
  }
});

这种方式比上面的好得多。

目前使用PhoneGap遇到的问题

使用PhoneGap至今,遇到了不少问题;将来想做的功能也有一些不太知道该怎么做的,都记在这里,作为将来要攻克的难关,也作为将来要分享的文章目录。

使用PhoneGap至今,遇到了不少问题;将来想做的功能也有一些不太知道该怎么做的,都记在这里,作为将来要攻克的难关,也作为将来要分享的文章目录。

  1. PhoneGap没有提供修改Refer的API,可能需要开发插件来实现,不知道Titanium有没有类似的功能
  2. PhoneGap没有提供后台运行service的API,这给推送信息带来了一些问题,不过似乎StackOverFlow上有人提供了解决方案,准备试试
  3. 自动升级。这个利用现有api应该可以完成。
  4. 缓存内容到本地。

总结下蜂鸟镜头库App开发

前些日子利用业余时间研究PhoneGap+jQuery Mobile开发,找这个项目练手。写到一半又拿Backbone重构了下。如今还有很多问题,先停下来总结一下。

前些日子利用业余时间研究PhoneGap+jQuery Mobile开发,找这个项目练手。写到一半又拿Backbone重构了下。如今还有很多问题,先停下来总结一下。

  1. 效率问题。屏幕越大效率越差,在Kindle Fire的表现也不如想象中理想。
  2. 启动速度慢。不像跑在浏览器那样,瞬间就打开了(因为会忽视掉打开浏览器和渲染的时间),所以应该需要一张图片作为启动图片——这个图片似乎不能自动缩放——在Kindle Fire里会导致程序崩溃。
  3. jQuery Mobile还有一些bug,目前还不确定原因和解决方案。
    1. 我有两个ul要做成listview,第一个什么都不写,填充内容后.listview()一下就可以;第二个则必须在html里就写好data-role=”listview”才行。
    2. 切换页面的时候只能从右往左,reverse=true也不行
  4. jQuery Mobile没有弹出组件,dialog的实现是跳转页面,不是很爽。
  5. Backbone是个好东西,尤其是开发过Flash,用起来感觉更顺手了。
  6. Backbone 0.9.1复写Collection的parse方法无效,不知道是为什么
    问题已解决:《重写Backbone.js的加载动作》
  7. 当需要事件从一处发生,而在另一处响应的时候,Backbone并没有提供很好的办法,用惯了robotlegs之类的框架在这里略有不爽。我想拿Model来作为Mediator应该不错。

再练手的话,准备用去哪儿的api,感觉挺开放的。

使用PhoneGap+jQuery Moblie开发蜂鸟镜头库手机App

拿以前做蜂鸟镜头库的两个接口尝试开发蜂鸟镜头库app,基本完工。这里总结下踩过的坑。

蜂鸟镜头库app效果图
蜂鸟镜头库app

自从春节期间在家尝试了PhoneGap之后,一直想做点实际的东西,好总结点经验,以备不时之需。可惜后台苦手,数据源是个问题。后来想起来以前做蜂鸟镜头库的时候有两个接口,可以取得完整的数据,于是便动起手来,开始做这个app。

开发本身并不复杂,大概花了一天时间搞出雏形,加上翻页基本就能发布了。不过还是遇到不少问题,今天简单总结下踩过的坑,以免以后再踩。
继续阅读“使用PhoneGap+jQuery Moblie开发蜂鸟镜头库手机App”

PhoneGap开发环境配置

趁着春节假期,学点新东西,前面也列了不少项目待做。除了一些是答应了朋友或者一直在搞的,就想试试把老项目迁移到移动平台上。Flash方面自然是Flash Builder了,JS方面考虑了一些时间,决定使用PhoneGap——因为有Adobe支持,应该比较有优势。

趁着春节假期,学点新东西,前面也列了不少项目待做。除了一些是答应了朋友或者一直在搞的,就想试试把老项目迁移到移动平台上。Flash方面自然是Flash Builder了,JS方面考虑了一些时间,决定使用PhoneGap——因为有Adobe支持,应该比较有优势。

继续阅读“PhoneGap开发环境配置”

诡异的Chrome插件事件机制

Chrome插件在content script里使用JQ广播事件,可能会无法在页面里侦听。换做原生的就没有问题。

最近尝试开发Chrome插件,自然使用JQ来当基础。结果遇到一个问题:

我使用“程序注入(Programmatic injection)”的方式执行代码,试图实现自动填写表单的功能。因为目标网页的表单比较智能,前面的选项会影响后面选项的内容,所以必须在val(value)之后广播change事件来触发后面表单内容的填充。

结果失败了。直接在浏览器里使用控制台运行代码,没有问题,所以代码本身应该正确;确认需要的JS文件已经一一加载。于是我开始了漫长而挫折的调试之路。多次失败之后,我打开《英雄无敌三》换换心情……玩了一会儿游戏意外退出了,而我灵机一动,会不会是JQ广播事件的问题?在控制台调试没有问题,但是在content script里就不行,很可能是chrome把两段代码放在彼此隔离的环境中运行导致的。于是我放弃直接$(selector).change(),改用原生的dispatchEvent,结果,运行成功!

于是我猜,应该是JQ和Chrome的插件机制稍有冲突。可能以后做插件的话,还是Closure Library好些吧。

PS:写插件的好处是不用考虑兼容性,朝着Chrome写就行了。

JavaScript实现命名空间(绑定在jQ)

不支持命名空间一直是JS开发里比较严重的问题。不过大家想出了各种手段来绕过这个坎,比如YUI的namespace。可惜的是jQuery尚未提供一个合适的解决方案,不过这并不难,可以人肉给它添加这个方法。

不支持命名空间一直是JS开发里比较严重的问题。不过大家想出了各种手段来绕过这个坎,比如YUI的namespace。可惜的是jQuery尚未提供一个合适的解决方案,不过这并不难,可以人肉给它添加这个方法。稍加搜索,找到两个地址介绍此方法,附在最后。

继续阅读“JavaScript实现命名空间(绑定在jQ)”

推荐很好用的jQuery UI

jq用的很多,有天闲来无事在jq官方网站上闲逛,偶然发现他们还做了一套自己的组件库,并且提供多种不同的皮肤,甚至支持自行搭配输出特定组合的组件库。于是赶忙试用,发现效果非常不错。

jq用的很多,有天闲来无事在jq官方网站上闲逛,偶然发现他们还做了一套自己的组件库,并且提供多种不同的皮肤,甚至支持自行搭配输出特定组合的组件库。于是赶忙试用,发现效果非常不错。

地址:http://jqueryui.com/

jqui继承了jq一贯的简单实用,涵盖绝大部分可能用到的功能,比如拖拽、排序、缩放、各种效果;并且提供各种功能的demo,使用的时候看一遍demo找到想要的功能然后直接查看源码,简单方便。比如我想让某个窗体可以通过顶部进行拖动,只需要$(‘#window).dragable(‘.titlebar’);即可。

不过resizable就必须容器有ui-widget-content这个class才行。

禁用鼠标滚轮事件

Firefox下,想阻止浏览器默认行为,return false是不够的,还需要 evt.preventDefault 和 evt.stopPropagation。

接到一个需求,要在flash里面使用鼠标滚轮控制壁纸地板的替换,这本身是一个小需求,但是在网页测试中发现滚动鼠标滚轮时,网页也会跟着滚动,这样鼠标就没法固定在滚动元件的上面,对用户体验造成了不良影响。

继续阅读“禁用鼠标滚轮事件”