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 看看二者的区别

这个是搜来的一个 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.

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);
});

今天在写程序的时候发现我明明写了一个名为 isOpen 的方法, 可是在调用的时候 firebug 就死活提示没有该方法. 甚至以为有缓存... 百思不得其解. 还好 leon 发现我在当前这个对象中有一个同名的变量名... 这个太恶心了!

function isOpen () {
  return this.isOpen; // 这个是错误的原因: 两个 isOpen...
}

function isOpen () {
  return this.opened; // 这样就没事了!
}

在 javascript 中常需要获取或者修改当前页面的地址
可以使用 window.location 这个对象

window.location = {
  // attributes
  hash:     //Sets or returns the URL from the hash sign (#)
  host:     //Sets or returns the hostname and port number of the current URL
  hostname: //Sets or returns the hostname of the current URL
  href:     //Sets or returns the entire URL
  pathname: //Sets or returns the path of the current URL
  port:     //Sets or returns the port number of the current URL
  protocol: //Sets or returns the protocol of the current URL
  search:   //Sets or returns the URL from the question mark (?)

  // methods
  assign():  //Loads a new document
  reload():  //Reloads the current document
  replace(): //Replaces the current document with a new one
}

一直以来都是简单地使用 w3c 的 dom 模式的 javascript 编程模式. 直到最近才开始使用 jquery. 也是由此发现其的强大! 在这里感叹一下: "这东西他妈太好了! 不过开始有依赖性了!!!"

言归正传, 在开发的过程中发现了一个小特点, 需要注意一下: 就是 jquery 的事件绑定机制是累加式的, 说白了就是可以重复注册事件的处理方式, 并在事件触发的时候统统执行. 明显, 这个是有好处的. 我们担心不必在大型前端的 javascript 脚本中覆盖我们原先的事件注册. 但是常常我们也遇到一个事件多次被执行的问题(其实就是某些情况下我们的时间注册了多次.)

在 dom scripting 中我们常常这么注册事件:
HTML:
<p id="clickable">click me!<p>
JAVASCRIPT:
document.getElementById("clickable").onclick = function () { alert(1); };
document.getElementById("clickable").onclick = function () { alert(2); };
测试点击这个段落, 只会有一次 alert 并且内容为 2 (即最后一次注册的);

但是在 jquery 中我们这样:
HTML:
<p id="clickable">click me!<p>
JAVASCRIPT:
$('#clickable').onclick(function () { alert(1); });
$('#clickable').onclick(function () { alert(2); });
测试点击这个段落, 两次 alert 都会出现.

所以如果需要只有一个事件绑定的话可以使用 jquery 自带的 unbind 方法来解除指定时间的所有绑定执行代码. 例如:
$('#clickable').unbind('onclick');
这样就解除了 onclick 的所有绑定方法.
(ps. jquery 中 jqObj.event(function) 相当于 jqObj.bind('event', function))

这个问题在开发中需要注意!

javascript 中的 objcet 很特别, 说白了还是一个 hash, 今天突然需要便利所有 hash 中的 keys. 所以就查阅了一下其迭代的方法:

for (var key in hash) {
  // key is just what you need
  // you can get the value by hash['key']
}

更多 javascript 的 hash 实现方式可以参阅 Hash Tables in Javascript

随着 IE 不断升级, 其也越来越规范化. 渐渐地和大多数浏览器也越来越表现一致化了~ 但是还是有一些不同. 这里就记录一下我所碰到的 IE 和 Firefox 解析 javascript 时候的语法区别:

1. 结尾逗号问题
[ 1, 2, 3 ]
{ a:1, b:2, c:3 }
一个 array 一个 hash 都是我们在 javascript 中常见的数据结构. 但是在 Firefox 中是可以在最后一个元素后面继续加入逗号的, 例如
[ 1, 2, 3, ]
{ a:1, b:2, c:3, }
但是 IE 就比较严格, 不可这么写, 必须去掉最后一个空格.
( PS 这点上我觉得 IE 比较规范... )

2. for 关键字
这里不是说循环, 而是说 hash 的赋值方式. 当我们的一个 hash 有一个 key 名字叫做 for 的话, 在 Firefox 中我们可以这么写:
hash.for = xxx OR xxx = hash.for OR hash['for'] = xxx OR xxx = hash['for']
但是很可惜, IE 中这样就会出错! 有可能其把 for 当作是关键字了或者什么其他特性( 不清楚 ), 总之 IE 中只能写成:
hash['for'] = xxx OR xxx = hash['for']

3. debugger 关键字
同 2 关键字. 一样的, debugger 在 ie 中也是一个关键字. 具体原因不知, 可能是俺装了 iedebugger 导致的. 总之最好改成其他名字, 或者使用 ['debugger']

[ updating ]

在 javascript 中使用数组(哈希表)有很多小技巧(因为其是动态语言的缘故, 要比 java 灵活很多), 虽然基础了点, 但是还是想记录下来以备日后查阅:

基本特性
javascript 的数组不需要事先定义长度用时只要定义好数组的类型即可直接使用. 例如

var arr = []; // arr = new Array();
arr[1] = 111; // arr = [,1];
// 当然, hash 也是如此 hash = {}; 一样可以!

常用方法
push & pop
作为数组实现栈数据结构的方法组合. push 把给定参数加载数组最后, pop 则对应取出数组的最后一个元素.(改变数组本身)

push & shift
最为数组实现队数据结构的方法组合. shift 取出数组的第一个元素.(改变数组本身)

unshift
插入给定参数到数组之前. 比如 [2,3].unshift(0,1) => [0,1,2,3]

join
就是和 ruby 里头的 join 一样, 使用给定参数连接每个数组元素(方便处理最后一个连接, 而且效率很快). 例如

['CCTV', 'SMG', 'MTV'].join(', ') => 'CCTV, SMG, MTV'

sort & reverse
对应的两种排序方式, sort 为从小到达, reverse 为从大到小.

slice & splice
对应的两种数组截取方式. slice 只是截取出数组的某个区间段并输出(其不改变数组本身), splice 截取了某个区间段并替换成给定参数(没有给定参数就等于直接删除这个区间, 当然会改变数组本身). 例如

arr      = [1,2,3,4,5]
arr_temp = arr.slice(2,4) // arr_temp = [3,4] & arr = [1,2,3,4,5]
arr.splice(2,4,0) // arr = [1,2,0]
// 注意了 slice(m,n) 是取出 [m,n)
// splice(m,n,...) 是替换 [m,n]

总结
其实呢~ javascript 是一个很奇特的脚本语言, 其中所有的东西都是变量/hash/数组, 而且只要声明了类型就可以直接使用, 不用担心什么越界之类的.