-
jQuery, I LOVE YOU~~~
-
不久之前，我低調且不經意地(謎之聲: 在Blog公佈? 好"低調"哦~~)透露了與jQuery正在交往的消息，換言之:
ASP.NET AJAX Client Library，你是個好人...
但jQuery看來可以讓我少奮鬥十幾個小時，所以...
在我的Web開發工作裡，Javascript佔了相當的比重。
雖然ASPX的Client-Side Event/ASP.NET AJAX Update Panel，幾乎可以讓你用C#/VB.NET搞定大部分的Web功能，偏偏自己有效能潔癖，對Response Time及Round-Trip Bandwidth斤斤計較，於是用Client-Side手段解決成了唯一的方案。
Javascript雖然彈性無窮，但寫來總覺又臭又長，少了.NET裡一大票的Base Class Library及好用的現成Method，一堆在.NET裡一行打死的功能都要DIY寫個數十上百行，再加上還要考慮瀏覽器相容的問題，同一件事要為IE寫一段，FireFox寫另一段，令人煩燥到不行。在我的眼裡，如果用C#寫Code是開著轟炸機掃平目標，寫Javascript就好像拿著小步槍在廢棄的城市裡進行巷戰。
Javascript Framework可以替我們處理掉一些跨瀏覽器的問題，也提供一些便利化的函數，的確可以省去不少惱人的瑣碎工作。坊間可用的免費Framework有很多，例如: Prototype、jQuery, Mootools...等等(Wiki上有列表整理)，過去我的想法是借重ASP.NET AJAX Client Library，一來它系出名門，二來學到的技能可以繼續應用在ASP.NET AJAX Control開發上，一魚兩吃。
不過，無意間邂逅jQuery之後，馬上被它的簡潔精巧深深吸引，花了點時間學習了解，並試做過幾個介面，就不禁愛上了她，決定與她一起在Javascript巷戰中出生入死。
不過，要先標註一下警語，jQuery並不好學，語法簡潔、設計精巧，意味著我們能用短短幾行Code搞定過去數十上百行Code才能做到的事；但換個角度想，要能做"幾行換百行"有點像智力測驗，得通曉各種可用的函數工具，加上腦筋狂轉才能想出漂亮的解法。在開發語言裡，有個很接近的比喻---Regular Expression，二者乍看都像天書，但因為可以省下可觀的Coding量，還是吸引了很多人付出時間心力去學習了解。
在我的初步心得中，認為jQuery以下這幾點特性最具魔力:
- 用jQuery Wrapper就地升級:
所有的元素經過jQuery Wrapper的包裝，馬上就可直接引用jQuery額外提供的豐富功能。
例如: 用$()一包，就可以$(myInput).hide()，立即取代myInput.style.display = "none"一長串Code。 - Wrapper Set批次處理:
Wrapper裡包的可以是單一元素，也可以是上百個元素組成的陣列，後面接上的Method則會以迴圈方式套用到陣列裡的每個元素上。例如: $("p.clsMenuItem").hide()可以一口氣將整個網頁下所有的class="clsMenuItme"的<p>都隱藏起來。 - 威力強大的Selector:
用搞過CSS的人相信都用過div p.clsName這類Selector去找【被包在DIV裡class="clsName"的P】。我之前常常想，為什麼CSS可以，在Javascript裡只能用document.all這種笨方法自己過濾。jQuery最大的功德，應該就是讓Javascript也支援CSS Selector語法搜尋網頁元素。應用CSS Selector可以讓我們快速定位，只用一步就抓到指定的元素，比起過去要自己跑迴圈逐一檢查比對，或是千方百計為元素加上特定ID都省事許多。
除了CSS Selector，jQuery也支援XPATH查詢，不過我覺得大部分的情況下，單單CSS Selector就綽綽有餘。 - 接接樂大絕技:
生命不夠浪費在打字上，所以大部分的jQuery Wrapper Method執行完會繼續將本身當成結果傳回，所以馬上又可以接著呼叫下一個Method。
例如:
把ID="divHint"的DIV設成黃色背景、寬度300px並指定內容文字，原本至少要寫四行:
var d = document.getElementById("divHint");
d.style.backgroundColor="yellow";
d.style.width = "300px";
d.innerHTML = "This is a hint";
jQuery用接接樂 $("div#divHint").css("background-color", "yellow").width("300px").html("This is a hint"); 一行就搞定。 - 事件模型的簡化:
ASP.NET AJAX Client Library裡有 $addHandler可用，但是jQuery裡的寫法更簡單:
$("div").click(function() {
alert("Div [ID=" + this.id + "] is clicked!");
});
一口氣就為所有的事件加上Click事件，而其中this可以用來存取觸發事件的對象。
另外還有好幾種巧妙的事件掛法，例如: one(type, data, fn)可以掛上按一次就作廢的事件、hover(over, out)可以同時設定onmouseover及onmouseout、toggle(even, odd)則可設定Click與下次Click執行不同的事件。 - 動態建立HTML元素:
以前要用Javascript動態建立HTML元素得用createElement加上一堆有的沒的步驟，是件苦差事；在jQuery裡新增HTML元素則非常簡單。例如: 在<span id="spnX">後方接上一個<img>可以用 $("#spnX").after("<img src=\"xxx.gif\" />"); 輕鬆搞定!!
除了上述的特性外，jQuery用Extender擴充新功能的概念挺不賴的，而且已有不少Plug-In可以用，資源頗豐。AJAX的部分，如果是單純的GET/POST取值，可以用極簡短的寫法幾行打死(跟我設計函數時的理念很像)，也都深得我心。
以下先列出一些資源，稍後有時間我再分享幾個小範例，讓大家瞧瞧她的美色。
-
IE8 Beta 1來了
-
配合MIX08大會舉行，微軟開放了IE8 Beta 1的下載。
這個Beta版本強調為提供Web Developer及Web Designer預覽IE8的功能，給想在IE8上市時就提供同步提供新功能的網頁開發者一個偷跑的機會。IE8做了不小的改革(CSS 2.1, HTML5)，因此在回溯相容(Backwards Compatibility)上不得不做了一些取捨，所以有些過去顯示正常的網站可能會在IE8裡格式會走樣。IE8採行的解決方式讓IE8同時具備三具網頁呈現引擎(Formatting Engine)，包含了最新的IE 8 Standards Mode, 與IE7相容的Strict Mode, 以及要求與IE5相容的Quirks Mode(可以稱作原始人模式嗎? XD)。IE8上有個Emulate IE7鈕可以讓使用者自行切換成Strict Mode, Web Developer則可透過HTML Header/Meta宣告要求使用特定的顯示引擎，詳細說明可以看這裡。
除了支援新的標準，IE8也宣稱在HTML解析, CSS規則, DOM物件, GC/記憶體管理, Scripting Engine上都做了優化，效能比以前提升許多。不過，對我而言最有看頭的還是新推出的Activities及WebSplices, 簡單來說，Activities像是Plug-In, 在網頁上按右鍵就可以叫出選單呼叫這些額外加掛的新功能，例如以下這個即時翻譯:
原則上這個概念之前就可以透過IE Add-On的方式做到，只是這次微軟提供了公開的實作規格，並鼔勵大家利用。
至於WebSlices則是網頁開發者在網頁上動手腳，另外切割出一個個較小的獨立單位(稱為WebSlice)，讓IE8 User可以獨立訂閱及檢視。目前最典型的應用展示是eBay拍賣網站把一個個拍賣物件包成WebSlice, 於是買家就可以單獨訂閱其中某個物件，未來用較簡便的方式檢視自己關心的項目，省去每天回網站報到檢查更新的麻煩。(不過，這樣子網站流量與廣告收益或多或少會受影響吧!)
另外，Firefox裡的Firebug整合了一大串網頁開發人員需要的偵錯功能，用過就會上癮。(好用到有時我會換用Firefox Debug Javascript) 過去在IE上，得裝好幾套工具才能蒐集齊相同的功能(IE Dev Toolbar, Web Development Helper, HttpWatch) 看來Firebug的確對IE形成不小的壓力，所以IE8內建了Developer用的偵錯工具，試圖急起直追。(粗略看了一下，似乎還是少了HTTP Traffic的追蹤)
至於AJAX Navigation看起來挺酷的，在網頁上動一些手腳，就可以將AJAX動態變化的過程納入歷史，例如: 點地圖放大的過程可以回上一步回上一步的還原回去。
以上這些新功能，可以看首頁Demos裡(即上圖中的左側第二個Tab)的四段展示影片(各3分鐘左右)。
【相關資源】
IE8首頁: http://www.microsoft.com/windows/products/winfamily/ie/ie8/default.mspx (Demo裡有預錄的展示影片)
IE8 Beta 1下載 http://www.microsoft.com/windows/products/winfamily/ie/ie8/getitnow.mspx