Live in code

今天看到 google 出了一组很酷的图形 API

地址: http://code.google.com/apis/charttools/

目前提供:
1. Image charts - using a simple URL request to a Google chart server
2. Interactive charts - using a Google developed JavaScript library
具体的就是:
1 -- [图片型图标] 只是一个图片而已
2 -- [可视化图标] 是一个 javascript 实现的可视化图形组件, 提供动态显示和鼠标事件

具体可以到: http://code.google.com/apis/charttools/docs/choosing.html 看看二者的区别

只要定制恰当的 doctype 就没问题了.
IE7 / IE8 都可以良好支持.

http://www.bernzilla.com/item.php?id=762

这个是搜来的一个 PPT, 介绍的不错.
从个人角度看来就是: 建立 OO 机制选用 Protytpe, 操作 DOM 用 jQuery.
(P.S. 说到 javascript OO. 我宁可自己写 OO 框架, 多轻量!)

今天在 chrome 下发现一个 innerHTML 调用的时候抛出 DOM Error 问题. 经过一番折腾之后发现是 webkit 对于某些 DOM 元素的 innerHTML 属性有只读保护机制. 但是 firefox 上面确没有这类问题.

经过 google 的一番查证之后, 发现这个不仅仅是 webkit 类浏览器的问题. 其实 ie 也是. msdn 文档如是说:

innerHTML:
The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.

说白了就是这几个特殊的 DOM 元素的 innerHTML 属性是只读的.

当当当当~ 经验值 +320.

一直被 Jeff 提醒需要遵循 Law of Demeter. 也一直只是一个大概的概念. 似乎就是不要访问过深的方法链.

今天看 wujiang 借我的 < 程序员修炼之道>. 发现里头有一节说 "德墨忒耳法则" 顺便 google 了一下发现原来就是 Law of Demeter. 这里记录一下:

# 函数的德墨忒耳法则规定, 某个对象的任何方法都应该只调用属于以下情形的方法:
class Demeter
  def initialize(args)
    @array = [1,2,3]
  end

  def funA
    #TODO
  end

  def example (obj)
    result = funA()          # 它自身
    obj.do()                 # 传入该方法的任何参数
    hash   = Hash.new        # 它创建的任何对象
    puts @array.join(' ,')   # 任何直接持有的组件对象
  end
end

更多参考: http://en.wikipedia.org/wiki/Law_of_Demeter

对这个问题今天作了一个跨浏览器的研究. 首先当一个 Form 中只有一个 Input 的时候, 例如:

<form>
  <input type="text" name="name" value="name" />
</form>

不管哪个浏览器都是可以通过 Enter 来提交当前表单的. 但是当 Form 中存在两个及两个以上 Input 的时候.

1. IE 和 Firefox
需要在 Form 中加入 type 为 submit 的 Input, 才能实现 Enter 提交. 例如:

<form>
  <input type="text" name="name" value="name" />
  <input type="password" name="pwd" value="pwd" />
  <input type="submit" />
</form>

2. Webkit 和 Opera
无论什么时候, 加不加 type 为 submit 的 Input 都可以直接 Enter 提交. 例如:

<form>
  <input type="text" name="name" value="name" />
  <input type="password" name="pwd" value="pwd" />
</form>

call写法为: fun.call(thisArg[, arg1[, arg2[, ...]]])
apply写法为: fun.apply(thisArg, [argsArray])

其中 call 和 apply 的第一个参数是一致的, 其实就是设定 this 对象. 两个方法的区别在于 call 的参数是分开传的, apply 是拼成数组传的(很适合直接传递 arguments)

// 以下两个实现效果一致.

jq.click(function (e) {
  fun.call(this, e);
});

jq.click(function () {
  fun.apply(this, arguments);
});

天煞的 first 阿, 今天我找一个 bug 半天不得其解. firebug 竟然告诉我 jquery 对象没有 first 这个方法...(请别笑我, 我一直以为有这个方法的.)

教我的一个同事告诉我这个方法. 甚至他给我的一个文档中也有这个方法. 我的天阿, 没想到这个方法竟然是公司加的一个 helper 方法. 我甚至把他用在了我好多 demo code 中. 可怕阿!

这件事教育我 alias 好用. 但是别不懂所以然就去使用.

今天为修一个 bug 到 ActiveRecord 模型层逛了一圈, 学了 2 个知识点.
1. Model 中的 belongs_to 和 has_many 如果指定了 :class_name 注意一定要写完整噢. 比如一个 Reply 类的完整类名是 Post::Reply 的话, 记得写这个完整的名字. 不要只写 Reply

has_many :replies,
         :class_name => 'Post::Reply'

2. 在 find 的时候 :order 参数中如果是根据别的对象的某个属性来排序的, 记得用 "表名.属性名", 注意不是 "类名(对象名).属性名"

举个例子:
环境: 有一个 Post 类, 一个 User 类, 一个 User 有多个 Post, 一个 Post 对应一个 User.
需求: 找出所有的 Post 并且根据其对应的 User 的 name 排序.
方法:

Post.find :all,
          :include => :user, #这里 :user 其实就是在 Post 类中 belongs_to 写的那个 symbol
          :order   => 'users.name' #这里 users 是表名

还有就是谢谢 wujiang 在我面前一步一步调试. 让我学了挺多的!

================================================================

补充一下, 昨天发现 belongs_to 和 has_many 这种写法还不一定好使. 原因在于这样写还不够 "绝对". 聪明的可能恍然大悟 --> ::Post::Reply 才是正解.

过去一直以为 label 标签中的 for 属性是关键. 只有指定了对应的 id 给 for 属性, 才能让 label 起作用. 但是最近看到一种写法:

<label>
  <input type="checkbox" />
  check it
</label>
<!-- 其实只要把你那个对应的元素包含在 label 中就可以了 -->

这样你点击文本 "check it" 就和点击那个 checkbox 的效果是一样的了.
(P.S. 当然咯 如果 label 和 目标元素 距离很远, 那还是用 id 属性指定为好.)