总结下蜂鸟镜头库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里面使用鼠标滚轮控制壁纸地板的替换,这本身是一个小需求,但是在网页测试中发现滚动鼠标滚轮时,网页也会跟着滚动,这样鼠标就没法固定在滚动元件的上面,对用户体验造成了不良影响。

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

给URL加上合理的“/”收尾

var tail = url.substr(url.lastIndexOf(‘/’) + 1);
if (tail != ” && tail.match(/\.(s?html?|php|asp)/) == null && tail.charAt(tail.length – 1) != ‘/’) {
url += ‘/’;
}
return url;

Astinus 0.2版升级过程中,有一个Feature是这样的:

小雷的数据源只能识别如“http://www.zol.com.cn/”的请求,前面必须有http,后面必须有“/”。我的目标是无论用户输入什么,都能得到正确的结果。

开始想的比较简单,直接就这么写了

function correctURL (str) {
  var tail = url.substr(url.lastIndexOf('/') + 1);
  if (tail.indexOf('?') == -1 && tail.charAt(tail.length - 1) != '/') {
    url += '/';
  }
  return url;
}

写这段代码时已过午夜,脑子比较糊涂,次日中午反应过来,赶紧修改,经过反复调试,得到正确结果:

function correctURL(str) {
  var tail = url.substr(url.lastIndexOf('/') + 1);
  if (tail != '' && tail.match(/\.(s?html?|php|asp)/) == null && tail.charAt(tail.length - 1) != '/') {
    url += '/';
  }
  return url;
}

顺便说下,Chrome的JavaScript控制台在调试时真好用。另外,将来也要考虑采用测试驱动的方法来写JS了。

Chrome下填充10w个div实验

综上,批量添加div时,应先将容器隐藏,使其只在内存操作,完成后再显示出来;应该使用display:none;鉴于页面上通常也就1000+个链接,所以测试10倍左右2w个div,可以接受

首先需要解决的是浏览器里有大量绝对定位的元素的效率问题。flash当中可以用一张位图来绘制所有的点击记录,为了能让html版尽量兼容更多的浏览器,采用div来承担这个任务是必要的。所以先来就是测试页面当中包含多少div,交互效果可以接受。

继续阅读“Chrome下填充10w个div实验”