Backbone.js笔记

关于Backbone的笔记。

关于事件

  • 使用Backbone里,我们可以继承Backbone.View,并且侦听UI事件。这些操作是通过jQuery或者Zepto的事件委托实现的,所以很重要的一点就是:这些事件都是UI事件,loaderror这些事件是无法在events属性里注册并被侦听到的。
  • 因为是托管的事件,事件处理函数最好用event.currentTarget来寻到节点
  • model的事件都会被collection转发,所以可以直接侦听collection;同理,除非remove并等待垃圾回收的model,也不应简单的调用off(),因为这会使collection没法侦听到事件,漏掉一些处理。

路由解析规则

这点文档中说得不算太详尽,我摸索如下:

  1. 路径分析以#/为起始,所以链接应该如#/app/add
  2. /是很重要的分隔符,末尾的/会被认为有下一级参数,比如app/list/的规则就不适用于http://domain.com/#/app/list这样的路径
  3. 规则只匹配一次,不会多次执行
  4. 刷新页面的方法:
    Backbone.history.loadUrl(Backbone.history.fragment);

其它关于Backbone.js的文章

Backbone.js经验两则

重写Backbone.js的加载动作

Mobile Web开发笔记

这里记录使用Phonegap开发移动应用期间发现的一些注意事项。

这里记录使用Phonegap开发移动应用期间发现。

性能

使用jQuery托管事件对阻止冒泡的影响

表现

解决 iOS webkit 使用CSS动画时闪烁的问题

CSS 兼容性

CSS 属性 iOS Android IE 其它
border-radius 3.x -webkit- Firefox 3.6- -moz-
Safari 4- -webkit-
box-shadow 2.3 -webkit- Safari 5- -webkit-

网摘

Developing Better PhoneGap Apps: Float Mobile Learning

重点包括

  1. 使用tap取代click(这点我还需要进一步测试,我发现zepto+phonegap没法捕获tap事件,不知道是我不是敲键盘的姿势不对)
  2. 使用css动画取代js动画

随记

  1. “click”和“tap“不是一回事儿,“click”会延迟300~400ms才处理,时间上会接近taphold之类的事件,“tap”更快
  2. 给元素加上:active伪类,可以给用户更快的反馈
  3. 调试不太容易,debug.phonegap.com似乎已经关了,得想办法把自己的weinre服务搭起来。暂时可以在js里写console.log(),接受一个参数,会在log cat输出。

CSS3 学习笔记

有关CSS 3的各种笔记

选择器

子节点(不包含孙节点)

E > F {
  // styles
}

第n个子节点

E > F:nth-child(2) {
  // 第二个F节点
}
E > F:nth-child(2n) {
  // 所有偶数节点
}
E > F:nth-child(2n + 1) {
  // 所有偶数节点后面那个节点
}
:nth-child(-n + 3) {
  // 前3个节点
}

紧邻的节点(从第二个往后开始生效)

E + F

多列文本

.column3 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-gap: 15px;
  -webkit-column-gap:15px;
  column-gap: 15px;
}

还有一些column-xxx的方法,基本上可以望文生义。

渐变

线性渐变

.selector{
  background:-moz-linear-gradient(left, white, black); //firefox
  background:-webkit-linear-gradient(left, white, black); //webkit
  background:linear-gradient(to right, white, black); // standard
}

放射渐变

background:radial-gradient( [ <options> || <angle>,]? [ <shape> || <size>,]? <stop>, <stop>;[, <stop>]*)

.selector{
  background:-moz-radial-gradient(10% 30%, white, black); //firefox
  background:-webkit-radial-gradient(10% 30%, white, black); //webkit
}

清除浮动

.clr {
  zoom:1;
}
.clr:after {
  clear:both;
  visibility: hidden;
  display: block;
  height: 0;
  line-height: 0;
  content: "";
}

如果在chrome下,只要简单的:

.clr {
  overflow:hidden;
}

FlashDevelop 使用笔记

包括Flash Develop使用中遇到的疑似bug、快捷键记录、小技巧、插件推荐等。根据经验实时更新。

Flash Develop是一款非常好用的ActionScript开发工具,其代码提示功能尤为强大;内建各种插件,可以方便的开发、调试、发布;而且还是免费的。最大的缺点可能是不支持ftp,插件相比Eclipse还是要少一些。

我在使用的版本:4.0.1
官网地址:http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page
下载地址:http://www.flashdevelop.org/community/viewtopic.php?f=11&t=8622

包括Flash Develop使用中遇到的疑似bug、快捷键记录、小技巧、插件推荐等。根据经验实时更新。

继续阅读“FlashDevelop 使用笔记”