2009年7月10日 星期五

好用的Javascipt工具-- Variable Dump

一直以來我都是用alert來找javascript的bug
但是有時連變數的型態都不知道的時候
真的是叫天天不應,叫地地不靈
還好找到了一個好用的工具
可以將javascript的變數Dump出來

參考網址如下:

http://plog.longwin.com.tw/post/1/492


官方的網站:
http://www.netgrow.com.au/files/javascript_dump.cfm


雖然他有jquery的版本
不過我只有測試成功javascript的版本
dump出來的範例如下:


(圖一)它會開啟一個新的視窗,並且可以清楚的知道變數的型態。

(圖二)甚至是物件中的array也可以看得出來,相當的有用。

2009年7月9日 星期四

Jquery livequery應用

我覺得livequery是Jquery的外掛中,最值得使用的一個外掛,
有了livequery,我們可以在DOM元件尚未生成之前就先將其綁定,
這樣就可以操作"未來的DOM元件",
對於常常使用Ajax動態載入頁面的朋友,
無疑是一項很重要的工具。

在底下這個範例中可以清楚的知道livequery的優點:

http://www.cssrain.cn/article.asp?id=964


不過如果是要操作未來的未來的DOM元件,
千萬不要livequery兩層,
這樣會導致相同的DOM元件操作兩次,
並且會發生不可預期的問題。

錯誤示範:

$('#first_data').livequery(function(){
$('#first_link').click(function(){
var $new_data = $(['click me',''].join(''));
$(first_data).append($new_data);
});

$('#second_data').livequery('click',funcont(){
alert($('#first_data').find('#first_subdata').html());

});
});

由上面的這個範例中,我們可以清楚的知道,#first_data是一塊尚未出現的DOM元件。
為了要將其綁定,我們使用了livequery將整個DOM元件預先保留起來,
其中還包括一個#first_link,它的作用是新增一個id為second_data連結。
這裡的second_data連結就是我所謂的"未來的未來的DOM元件"。

現在如果我們想要按下#second_data時,跑起一個警告視窗,內容為#first_data中的#first_subdata的資料,
很自然的,會在和程式的下方多加一個livequery去執行這個動作。
但是這樣的寫法,會導致#second_data連結,被啟動兩次,所以會造成不可預期之動作。

那要怎麼處理未來的未來的DOM元件呢??
其實不用把它想的太難,我只要用livequery綁定一次就OK了。
只是如果livequery之中的function如果有需要用到其他未來的DOM元件,
就必須另外寫一個livequery來處理其他的DOM元件。

所以正確的寫法如下

var first_subdata;
//Part 1
$('#first_data').livequery(function(){
first_subdata = $(this).find('#first_subdata');
$('#first_link').click(function(){
var $new_data = $(['click me',''].join(''));
$(first_data).append($new_data);
});
});
//Part 2
$('#second_data').livequery('click',funcont(){
alert(first_subdata.html());
});


因此,我們必須在Part 1之前,就事先宣告一個first_subdata變數去保留了#first_subdata的資料,然後在Part 2的時候才能使用first_subdata的資料。
Related Posts Plugin for WordPress, Blogger...