javascript & HTML - 近日小記

(1) 傳值、傳址鬼打牆
在重新開始復習C++的傳值、傳址的當兒，沒想到也在js 裏遇到這種問題

code長這樣：

for (var i=0; i< max; i++){
elements[i].onclick = function(){
alert(i);
}
}
那當你點下element[0]的時候，到底會alert啥咪?答案是 ... max。而且不管click element[1], element[2]...答案都相同！因為匿名function註冊的寫法是傳址的效果。

寫成這樣：
function clickHandle(i){
elements[i].onclick = alert(i);
}

for (var i=0; i< max; i++){
clickHandle(i);
}

就會沒事，因為傳進function裏的值是類似傳值的效果…鬼打牆的數小時....

(2) textarea 包textarea ....
是不行的，我可能是公司裏最後一個知道的人Orz.....

iGoogle - Google Gadget -關於小工具的二三事~

前陣子看到iGoogle 在徵選google gadget，試圖炒熱小工具的開發，讓我也好奇的看了看小工具到底為何物。

小工具需要三種角色合作：
(1)平台及規範
(2)小工具開發者及網路資源
(3)終端使用者

(1)中的平台負責parse合於小工具規範實作出的小工具，忠實的將小工具呈現在終端使用者的入口網頁上，它可以不用知道小工具的全部內容及邏輯，小工具和平台的溝通全透過規範中訂定的方法。(特別提一下：技術上的層面而言，分為inline , html,及 url，後兩者是透過iframe include的，看起來沒問題；而inline則是產生直接內嵌在平台中的html裏的code<--不知這種的有沒有安全性的問題哩…從它的規格裏看不太出來~ )
(2) 小工具開發者遵循規範開發自已的小工具，並且把它放在網際網路上
(3) 終端使用者從任何的管道知道(2)開發出的好用的小工具，再在平台上自訂自已喜愛的小工具；

基本上google 自已也提供了一些好用的library ，讓小工具可以很快的做出炫技效果，如拖拉等等… 總而言之蠻有趣的

喵媽自已也寫了一個參加徵選，雖然比較於其它javascript 魔人來說很遜色，不過倒底也是自已會愛用的東西，來野人獻曝一下~

http://gadgetshopping.googlecode.com/
svn/trunk/shoppingwindow/testEbay.xml

這是個ebay的shopping cart，可以自訂關鍵字跨國搜尋，並將有興趣的item放到shopping cart裏。其實如果做yahoo拍或露天拍應該更實用，但是它沒有公開的api，喵媽又懶得手趴html code，作罷，拿ebay來展示一下概念就是。
親朋好友們有興趣加一下囉，並且請不吝提供意見喔~

Test driven development with C++

比想像中難一點，可能是被eclipse寵壞了吧…　
Test driven的精神在於測試先行，搭配"frequent" refactoring，慢慢隨各種use case 的增加讓整個系統一點一點長大。

首先找測試工具：　
cppunit - 以VC 6.0編好即可配合開發，在安裝和食用上十分方便；不過要命的是，C++裏testcase都要靠main跑；所以要配合撰寫不同的build流程，開發時build testcase 的main, production時build真的main (如果有的話)

第二 - frequent refactor：　
用了tomato配合VC 6.0 開發，不過由於C++語法較強大(複雜)的關係吧，refactor的功能十分有限，頂多換換名字、抽一抽method ，其它還是要手動來，真累。

還有一些東西待摸索，希望快點適應C++的開發

這不是很簡單嗎 ?....Auto Complete.....@@

Auto Complete - 在 text input 打字，系統幫忙(以 ajax) 從系統撈資料補字的功能。
現在在各大網站上都十分常見，最近我們也要自已開發一個。

乍聽之下，會覺得… "不是很簡單嗎"? 只要在text input bind keyup 事件，就可以在key up 的同時，送出 ajax call 去後端撈資料，送回來後畫在一個黏在text input 下面的div 裏 - 結束。

不過，實作之後，發現總是有怪怪的現象，比如，回應速度不均 - 網路delay jitter 有差；或者補的字和你打的字無關 - Ajax (Asynchronous) 不同步的回應。等等小細節，卻會讓auto complete這個功能變得十分難用。到了一種沒有比有好的悲慘地步。

後來採用 scriptaculous這個js 的套件來幫忙，總算順多了。仔細來看看這個套件怎麼做的? - 其實也很簡單，就是每隔固定的時間，比如0.5 秒之類的，先比對text input 裏的資料有沒有改動，有則去後端撈資料，沒有則不做事；並且，猜測它應該有處理不同步回應的問題，因為記下了「上一個 query」，也可以判斷拿到手的非同步回應是不是過時的。

嗯，總之，寫這種 ajax 的東西，絕對要考慮網路延遲和非同步的問題，這是和以往做 server side 技術不同的地方。