Friday, March 07, 2008 - 文章

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以下這幾點特性最具魔力:

  1. 用jQuery Wrapper就地升級:
    所有的元素經過jQuery Wrapper的包裝,馬上就可直接引用jQuery額外提供的豐富功能。
    例如: 用$()一包,就可以$(myInput).hide(),立即取代myInput.style.display = "none"一長串Code。
  2. Wrapper Set批次處理:
    Wrapper裡包的可以是單一元素,也可以是上百個元素組成的陣列,後面接上的Method則會以迴圈方式套用到陣列裡的每個元素上。例如: $("p.clsMenuItem").hide()可以一口氣將整個網頁下所有的class="clsMenuItme"的<p>都隱藏起來。
  3. 威力強大的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就綽綽有餘。
  4. 接接樂大絕技:
    生命不夠浪費在打字上,所以大部分的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"); 一行就搞定。
  5. 事件模型的簡化:
    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執行不同的事件。
  6. 動態建立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

Posted 07 March 2008 07:45 AMJeffrey | no comments
Filed under:

搜尋

Go

<March 2008>
SunMonTueWedThuFriSat
2425262728291
2345678
9101112131415
16171819202122
23242526272829
303112345
 
RSS
【工商服務】
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


BlogLook Score and Rank

Syndication