jQuery, I LOVE YOU~~~
16 | 45,235 |
不久之前,我低調且不經意地(謎之聲: 在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取值,可以用極簡短的寫法幾行打死(跟我設計函數時的理念很像),也都深得我心。
以下先列出一些資源,稍後有時間我再分享幾個小範例,讓大家瞧瞧她的美色。
- jQuery網站
- 程式下載: 共分為三個版本Packed(壓縮版,檔案最小,但需要在Client端花時間解壓縮)、Manified(經過重新排版,檔案比Packed版大,適合正式站台用)、Uncompressed(排版維持原始格式,方便Debug及Trace Code,檔案最大)
- 官方說明文件(但我強烈推薦另一個整理得更有條理的說明文件: Visual jQuery)
- 教學文件、簡體中文版的入門教學: 1 2 3
- Simon Willison: jQuery小抄, jQuery In 15 Minutes投影片
- jQuery Plugin大全
Comments
# by matsuken
黑大: 這東西我用一段時間了(Ver 1.21),確實不錯,但在這版本在IE6部分功能及plug-in會造成嚴重的memory leak,像是日期元件及動態指派function,(其它的js framework有的也會,ex.extJS)一掛上後IE記憶體都卸不掉,但在 1.23我有試了一下日期元件,己有改善了
# by Julian
整篇看完 只能用嘆為觀止 想不到可以把javascript 搞的這麼簡潔 叫人怎麼能不變心啊 follow you!
# by Bibby
黑大.. 如果用asp.net去開發 有時候常常需要用到 ASP.NET AJAX Client Library + jquery 這樣一開始網頁就已經50k起跳了說 這樣網頁真的是肥嘟嘟的說.. 還是~我們要假設用戶的頻寬都是很大的ㄇ~~U_U||
# by Jeffrey
To Bibby, 原則上js檔可以被Cache住,並不需要每次Request網頁時都重新傳送,就它的頻寬成本 vs 程式碼簡化效益來看(jQuery可以大量減少Page中的Script Code量,也可以扺消掉部分jquery.js自身的資料量),我認為在可忍受範圍內。 不過,我做的系統比較偏內部User,較少因頻寬而出狀況(謎之聲: 這樣子也好意思說自己有效能潔癖?),看看有沒有對其他朋友Internet高用量實務經驗可以跟大家分享。
# by Alvin
大大有些東西想請問你一下 首先 AJAX的部分如果都是用jquery解決掉 loading應該都是在client-side 如果是用ASP.NET AJAX Client Library 那loading就變成是在server-side 這樣說對吧! 另外 如果是用ASP.NET AJAX Client Library 那AJAX的顯示存取都是在同一CS頁面完成 而使用jquery的話 就是呈現頁面是一頁 而要存取的就要另開一個頁面去做運算 以上表達的不知道是否可以了解 .. 我本身是接觸過ASP和PHP + jquery 目前剛接觸ASP.NET對於整個運作的流程還不是很了解 所以想問問您 我這樣的觀念對嗎? 你在用jquery建構網站的時候也是用一頁呈現一頁處理後端資訊的方式來佈署嗎? 希望你幫我解答!~感謝
# by Jeffrey
To Alvin, 我所謂的ASP.NET AJAX Client Library,意指ASP.NET AJAX裡附加的那一堆Javascript。既然jQuery跟ASP.NET AJAX Client Library同樣都是js,Loading應該也都在Client-Side。 不過,如果你所想的是ASP.NET AJAX Control Toolkit那些東西,的確,它們很多是WebControl,多半要消耗Server-Side的資源。 應用jQuery時,並不必刻意將原本的一頁分成呈現頁與運算頁,但是自然而然會有處理資料的邏輯被分隔出來。例如: 我們想做一個選縣市後自動帶出鄉鎮市區的連動式下拉選單,不用Ajax,一定會在PostBack時寫Server-Side Code去依縣市查詢鄉鎮市區;當改成Ajax後,你可能會另外寫一個Web Service或Web Page提供依縣市查詢鄉鎮市區的功能,讓Javascript可以用XmlHttpRequest呼叫,這就是我自然而然把邏輯拆到另一個網頁的意思。
# by Alvin
大大~ 感謝你迅速的回應~ 經你降解釋 終於把我不清楚的地方搞懂了 真的很謝謝啦!~ 突然想到一個問題 您有遇過JS載入不完全的情況嗎? 可能有些地方連線速度慢頻寬小 我目前有遇到這樣問題 還在想解決的辦法!
# by Can
我遇過好幾次把JQ掛在MASTERPAGE裡 在ASCX檔呼叫卻一點反應也沒有 像那個thickbox 單寫在一個頁面沒問題 但是JS掛在MASTERPAGE ASCX裡的圖片卻一點反應也沒有 檢查過路徑都有LINK到..... 一點頭緒也沒有 後來就暫時放棄了
# by Jeffrey
to Can, MasterPage? 你是用$("#...")去找Element ID嗎? 看看是否問題出在MasterPage/UserControl名稱被加料上。參考: http://blog.darkthread.net/blogs/darkthreadtw/archive/2008/01/18/masterpage-clientid-search-enhancement.aspx
# by Can
thickbox不用寫ID耶 他是$(docmunt)....... 也就是這個文件裡CLASS等於"什麼"的項目發生作用... 到現在還無解...
# by 黑皮
剛接觸jQuery,看了很多介紹和Demo後覺得很好用。 不過好像沒有人討論安全性,想問一下這個安全嗎? 因為這是開放原始碼的,可以那個多UI可以抓,要是有人在UI裡弄得什麼攻擊話.......不就死定了嗎? 想問一下關於這方面的意見
# by Jeffrey
to 黑皮, 我的看法是,jQuery提供了好用的Javascript函數,簡化我們的開發難度,本身並不會為網站安全加分或減分,安全與否端賴怎麼設計及運用。 但眾多沿用jQuery發展出的UI/Plug-In,裡面摻雜了較多開發者自己的邏輯與機制,的確不能排除存在安全漏洞的可能性。 我採行的策略是盡可能挑選很多人用過、知名度較高的Plug-In,歷經眾多高手使用檢視過,如果有漏洞,應該都已回饋給作者改善過了,出問題的機率較低。 另外,平時可以多吸收一些網站資安議題的相關知識,漸漸就能養成找出安全漏洞的能力,不管是自行開發、Review別人的設計時,都能躲掉不安全的設計,讓你的網站更安全,挺划算的。 PS: 有個好消息不知你有沒有看到,MS已正式將jQuery納入產品中了。http://blog.darkthread.net/blogs/darkthreadtw/archive/2008/10/01/ms-support-jquery.aspx
# by 黑皮
謝謝Jeffrey的回答 我有看到MS已正式將jQuery納入產品中 所以才因為好奇更進一步的探討jQurey 不然平常不是那個敢用Framework
# by 學生
我是剛接觸jQuary的學生 原本覺得這和原先的那些有什麼差別 經過你的統整和解釋!整個豁然開朗啊!!!! 太感謝了!
# by rohail.khan666@hotmail.com
Business intelligence Analyst SQIAR (http://www.sqiar.com/services/bi-strategy/) is a leading Business Intelligence company.Sqiar Provide business intelligence Services Which help the company to present Information in Meaningful form.
# by Reilly
这两天也是在看jquery以及其他的一些前台framework,超级大爱!!!感觉太美妙了~