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取值,可以用極簡短的寫法幾行打死(跟我設計函數時的理念很像),也都深得我心。

以下先列出一些資源,稍後有時間我再分享幾個小範例,讓大家瞧瞧她的美色。

歡迎推文分享:
Published 07 March 2008 03:56 PM 由 Jeffrey
Filed under: ,
Views: 39,585



意見

# matsuken said on 07 March, 2008 08:03 AM

黑大:

這東西我用一段時間了(Ver 1.21),確實不錯,但在這版本在IE6部分功能及plug-in會造成嚴重的memory leak,像是日期元件及動態指派function,(其它的js framework有的也會,ex.extJS)一掛上後IE記憶體都卸不掉,但在 1.23我有試了一下日期元件,己有改善了

# Julian said on 08 March, 2008 09:54 AM

整篇看完

只能用嘆為觀止

想不到可以把javascript

搞的這麼簡潔

叫人怎麼能不變心啊

follow you!

# Bibby said on 09 March, 2008 10:33 AM

黑大..

如果用asp.net去開發

有時候常常需要用到

ASP.NET AJAX Client Library + jquery

這樣一開始網頁就已經50k起跳了說

這樣網頁真的是肥嘟嘟的說..

還是~我們要假設用戶的頻寬都是很大的ㄇ~~U_U||

# Jeffrey said on 09 March, 2008 08:03 PM

To Bibby, 原則上js檔可以被Cache住,並不需要每次Request網頁時都重新傳送,就它的頻寬成本 vs 程式碼簡化效益來看(jQuery可以大量減少Page中的Script Code量,也可以扺消掉部分jquery.js自身的資料量),我認為在可忍受範圍內。

不過,我做的系統比較偏內部User,較少因頻寬而出狀況(謎之聲: 這樣子也好意思說自己有效能潔癖?),看看有沒有對其他朋友Internet高用量實務經驗可以跟大家分享。

# Alvin said on 15 May, 2008 12:09 AM

大大有些東西想請問你一下

首先

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建構網站的時候也是用一頁呈現一頁處理後端資訊的方式來佈署嗎?

希望你幫我解答!~感謝

# Jeffrey said on 15 May, 2008 12:37 AM

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呼叫,這就是我自然而然把邏輯拆到另一個網頁的意思。

# Alvin said on 15 May, 2008 03:34 AM

大大~

感謝你迅速的回應~

經你降解釋

終於把我不清楚的地方搞懂了

真的很謝謝啦!~

突然想到一個問題

您有遇過JS載入不完全的情況嗎?

可能有些地方連線速度慢頻寬小

我目前有遇到這樣問題

還在想解決的辦法!

# Can said on 28 July, 2008 11:58 AM

我遇過好幾次把JQ掛在MASTERPAGE裡

在ASCX檔呼叫卻一點反應也沒有

像那個thickbox

單寫在一個頁面沒問題

但是JS掛在MASTERPAGE

ASCX裡的圖片卻一點反應也沒有

檢查過路徑都有LINK到.....

一點頭緒也沒有

後來就暫時放棄了

# Jeffrey said on 28 July, 2008 10:53 PM

to Can, MasterPage? 你是用$("#...")去找Element ID嗎? 看看是否問題出在MasterPage/UserControl名稱被加料上。參考: blog.darkthread.net/.../masterpage-clientid-search-enhancement.aspx

# Can said on 29 July, 2008 06:26 AM

thickbox不用寫ID耶

他是$(docmunt).......

也就是這個文件裡CLASS等於"什麼"的項目發生作用...

到現在還無解...

# 黑皮 said on 23 October, 2008 12:25 PM

剛接觸jQuery,看了很多介紹和Demo後覺得很好用。

不過好像沒有人討論安全性,想問一下這個安全嗎?

因為這是開放原始碼的,可以那個多UI可以抓,要是有人在UI裡弄得什麼攻擊話.......不就死定了嗎?

想問一下關於這方面的意見

# Jeffrey said on 23 October, 2008 05:42 PM

to 黑皮, 我的看法是,jQuery提供了好用的Javascript函數,簡化我們的開發難度,本身並不會為網站安全加分或減分,安全與否端賴怎麼設計及運用。

但眾多沿用jQuery發展出的UI/Plug-In,裡面摻雜了較多開發者自己的邏輯與機制,的確不能排除存在安全漏洞的可能性。

我採行的策略是盡可能挑選很多人用過、知名度較高的Plug-In,歷經眾多高手使用檢視過,如果有漏洞,應該都已回饋給作者改善過了,出問題的機率較低。

另外,平時可以多吸收一些網站資安議題的相關知識,漸漸就能養成找出安全漏洞的能力,不管是自行開發、Review別人的設計時,都能躲掉不安全的設計,讓你的網站更安全,挺划算的。

PS: 有個好消息不知你有沒有看到,MS已正式將jQuery納入產品中了。blog.darkthread.net/.../ms-support-jquery.aspx

# 黑皮 said on 24 October, 2008 12:32 AM

謝謝Jeffrey的回答

我有看到MS已正式將jQuery納入產品中

所以才因為好奇更進一步的探討jQurey

不然平常不是那個敢用Framework

# 學生 said on 23 January, 2011 07:44 AM

我是剛接觸jQuary的學生

原本覺得這和原先的那些有什麼差別

經過你的統整和解釋!整個豁然開朗啊!!!!

太感謝了!

# rohail.khan666@hotmail.com said on 10 December, 2013 04:14 PM

Business intelligence Analyst

SQIAR (www.sqiar.com/.../bi-strategy) is a leading Business Intelligence company.Sqiar Provide business intelligence Services Which help the company to present Information in Meaningful form.

# Reilly said on 08 February, 2014 10:43 AM

这两天也是在看jquery以及其他的一些前台framework,超级大爱!!!感觉太美妙了~

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<March 2008>
SunMonTueWedThuFriSat
2425262728291
2345678
9101112131415
16171819202122
23242526272829
303112345
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

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

文章典藏
其他功能

這個部落格


Syndication