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 技術不同的地方。

拖拖拉拉的google map

Google Map最近在亞洲的地圖資料有了長足的進步(前陣子幾乎是一片空白的狀態)，很多和台灣島民日常生活相關的應用終於也可以架在上面玩一玩了。

除了地圖資料外，Google Map 2 的API也越來越成熟囉! 加入了很多新的功能。比如你可以把一個marker 以拖拉的方式在地圖上移動，((這可是一些drag and drop maniac 夢中的功能~))並且事件的註冊模型也很漂亮，每個 marker都可以註冊自已對事件的handle。msn map可要加油些囉 !

不過，Google的地圖還是有點「工程師」…這點msn map可是大大的贏。

build請你不要fail~ - selenium

如果你採用的是最夯的iterative 開發生命週期，
那專案經理最大的惡夢之一很有可能就是一個iteration結束後，build 卻因為重大的defect而不能用。((這真是慘，如果你的build是星期五出的，很有可能星期六日還要來加班 …所以建議大家把出build 時間挪到星期四或星期一= =+))
iteratively 開發最大的特點在於，需求是一直一直往上加的。但是，你開發了新的功能，或修了 舊的defect，測試卻是需要測試「所有的」功能。因為沒有人敢保證在加新功能的時候，對於舊功能是毫髮無傷的。所以，測試人員的工作只會隨著功能的增加而越來越繁重。如果這個系統十分大，用人工來執行測試到最後真的會測到哭出來。所以，自動測試是iteratively開發的王道。

回到web2.0的應用系統，如果我們想要做網頁程式的自動測試，就需要有一個工具可以來模擬測試人員在測試網頁時的行為，並能夠進行驗證，最最重要的是，它的錄製、修改成本絕對不能太高 - 因為我們要接受一件事實，世界上沒有不變的需求((而且通常是變很大)); 如果每一次的改變，都必需大費週章重新錄製角本，那可能會比人工測試還要慘歐 ~

最近亂逛又看到 selenium 這個工具，覺得十分的不錯。除了它可以鬆錄製測試角本(有selenium IDE, 是FF的plugin)之外，因為它的指令十分簡單，所以修改看來也不是個問題。

讓我印象最深刻的是，它的selector 十分活，你可以指定 element id, XPath(找XPath), 或是用 document.getElementById...這種寫法來取得要click, focus (有許多 command供君選擇)的元件，也可以assert裏面的值。還可以將錄好的角本轉成java unit test整合於 CI(Continuous Integration)上面十分方便。在 firefox 錄好的角本，動動手腳一樣可以在 IE跑，所以也可以跨瀏覽器測試。
不過，有一些功能，像上傳檔案，就沒法子測。(原因尚未參透); 而FF不支援的modal dialog 也無法在FF 錄製，要另外再寫囉。

不過這樣的自動測試面臨的另一個問題是，流程上該怎麼安排? 你需要一個乾淨的資料庫，從頭開始insert資料、驗証資料，還是你只想確保頁面不爛，功能可看 ? 或你有更大的野心 - 把頁面的整合測試納入 CI管控 ? 不同的practice提供的保證不一樣，所付出的成本也不同，只能說看情況選擇最適合自已的囉 ~

超瞎消費事件

不知道是商家把消費者當丁丁，還是本人有歐巴桑的偏執狂?

Case 1 MXD's hair XX店

大熱天想把頭髮剪短圖個涼快的喵 vs 染髮魔人設計師

喵：我想剪短
設計師：不行!你的頭髮不適合剪短
喵：那打薄應該OK吧?
設計師：不行!你的頭髮也不適合打薄
喵：(暈)那你想怎麼弄?
設計師：我想染…
喵：(怒)........你想我不想 = =

雙方僵持.....

((最後在喵的堅持下，設計師沒有染成；
但是，在設計師的堅持下，喵的頭髮也沒有剪短/打薄 =口=
所以白白花了7百多大洋，三星期後再去別的地方剪了一次))



Case 2 新X三越 地下美食街

黃金鼠點了玉子鰻魚飯，

那是一種以鰻魚為主，和蛋一起弄成像親子飯的東西，為了讓大家容易了解，找了下圖做為圖示。

出菜的時候發現

「咦，怎麼只有鰻魚沒有蛋(玉子)?」

櫃台阿姨：

「啥咪! 你要蛋喔? 蛋沒有了耶!」

之後…阿姨做了一件令人匪夷所思的事......

>>竟然從隔壁的簡餐店拿了 菜脯蛋 ，放在鰻魚飯裏<<

嗯.......阿姨，你真是太威了!