JavaScript Framework (jQuery)

上個禮拜我曾經在一個技術研討會上面，
做了一個簡單的介紹，說明為什麼我們要使用JavaScript Framework - jQuery的簡報。
在這邊將它做一些整理，希望對大家有幫助。


而當大部分的系統操作介面都開始朝向RIA前進時，我們能夠倖免嗎？
我想答案是肯定的吧！所以我們也免不了要開始開發出符合使用者期望的的操作介面來…
那使用者到底在想些什麼呢？他們的期望到底是什麼呢？
或許就是…



而為了滿足這些不斷擴展的使用者期望，一些新的技術或應用陸續的浮上檯面了…



而我們選擇了用AJAX和大量的JavaScript來滿足使用者的期望…
選擇它是因為我們覺得，以現有人員的技術背景來考量，
它的進入門檻比較低一點…因為它的code對我們而言比較熟悉也比較有親和力
但也因為我們選擇了這樣的搭配組合，所以我們也開始撰寫了大量的JavaScript，
當我們寫的越多，遇到的瓶頸與困難也越多…




遇到了這些問題，我們就在思考
…
其實網路上也有許多團體在發展JavaScript的Framework或Library…

那既然已經知道JavaScript也有Framework了，
那我們就開始思考，導入JavaScript的Framework是否有一些預設想要達到的目標或期望呢？
列出這一些將會有助於我們選擇一個比較適合我們的Framework.


1.最理想的狀況是，只要遵循library的語法來撰寫，就可以不用去理會跨browser的問題…
2.Reuse一些open source的程式，減少自行重新開發的程式
3.希望它可以使我們的程式更乾淨一些，可讀性更好一些
4.程式碼乾淨、可讀，相對的MA的負擔就會降低了
5.開發速度當然也是一個很重要的考量點
6.最後當然是學習成本不能太高摟~~總不能為了要達到這些目的，我們要額外花上一兩個月來學習如何使用它吧！這樣可能不是很符合經濟效益。


那到底要用哪一家的Library其實還蠻困擾我們的，
目前網路上有許多有名的JavaScript的Library，各自有各自的愛好者，而我最後是選擇了用jQuery來做我們的基底。
那為什麼要選用jQuery呢？或許是被它的slogan  write less , do more所吸引了吧！


這麼多的library其實我們也沒有每一個library都去看過、比較過，我們主要去看過prototype和jQuery而已，主要是因為時間上的考量，而且這兩個library是在網路上最常被拿來比較的。
那在這兩個library當中，我個人是覺的jQuery的code是比較簡潔的，也跟我過去學的程式語言的style比較相近一些。(這一點java派的人可能會反駁我，因為有人聲稱prototype比較像java，而jQuery比較像ruby。)
很小，所以對於網路傳輸的負擔很輕。因為JavaScript是必須要將全部的code傳到Client去執行的，所以我們不太可能去選擇一個很強但是又很大的Framework，要不然這樣對於網路的傳輸負擔其實是蠻大的。
jQuery算是相當熱門的JavaScript的Framework，因為熱門，所以自然就有很多愛好者願意投入來開發它，自然的資源就會比較多。而且他也是最近一兩年新崛起的熱門資源，而且還發展的蠻茁壯的，所以應該沒有那麼快被淘汰吧？
另外jQuery算是我比較早接觸的JavaScript library可能有些先入為主的觀念，所以還是比較喜歡用它…


這一個畫面是從jQuery的官方網站首頁上擷取下來的，它對於jQuery的解釋。
他說jQuery是一快速、簡明的javascript library，可以幫我們簡化HTML還有AJAX的處理。
它是設計來改變我們對於javascript的寫法的。
然後他這邊也聲稱用jQuery寫出來10行code的功能，在一般的JavaScript上面，可能要用20行才可以完成。
然後他這邊也強調，你如果要把這10行code往下精簡到2~3行是不太可能的。
這也就告訴我們，其實用jQuery寫出來的javascript已經是很精簡的code了。
但是他這邊又補上了一句，對於jQuery code的評價是：『Quick and Dirty』


這個畫面也是jQuery的官方網站首頁上copy下來的，
它有提到他們的library支援IE6.0以上還有FireFox1.5以上甚至還有其他的browser。
所以對我們而言他已經能夠幫助我們解決跨browser的問題了。
那從這些簡單的jQuery介紹，
除了學習成本以外，它似乎都已經滿足我們剛剛提出對於Framework的期望了。
那這些都只是紙上談兵，那接下來我們可以稍微看一下他的語法，來了解一下他的威力到底在哪邊…


jQuery的Selector它是一個很強大的功能，
它可以幫助我們很快速的去尋找到頁面上任何我們想要的物件
另外他可以搭配Xpath來找尋物件，所以對於Xpath和CSS越熟的人，來使用jQuery應該越能夠得心應手。


1.取代過去的dcoument.getElementById
2.取代過去的document.getElementByTagName
兩個的差別在於一個在Id前面有#字號，一個沒有…

後面這3個語法如果用一般的javascript語法來寫的話，我們可能都需要用一個for迴圈去跑它，
然後再個別去判斷它的屬性，再來指定他的相關Value

由這幾個簡單的語法來看，會發覺，光是打字就可以省下蠻多的了，程式碼也會比較簡潔一些。



那接下來我們就先來看一個簡單的範例，來讓大家體驗一下jQuery的威力
現在有一個需求，就是將所有a tag的連結物件，且id為e_links的控制項，當點選連結時，先詢問他是否執行。
那以一般的JS語法，大致上是這樣寫的


那我們現在利用jQuery的語法來改寫一下，你發現它的程式碼是不是簡潔多了？



我們現在撰寫JavaScript有很大的一部分是用來撰寫AJAX的相關處理的，
所以jQuery對於AJAX的相關支援也是很重要的，所以我們來看一下它提供了我們甚麼東西
1. 這個語法是將某一個HTML內容，load到某一個物件內。
2. 他是沒有回傳值給client端的
第一個參數是要執行的程式網址或是名稱
第二個參數是傳入要傳給該隻程式的參數，上面必須要指定型態，並且利用hash的方式來傳送
第三個參數是執行後要執行的javascript的function。
第二個參數跟第三個參數都是可以不用傳的。


除了基本的AJAX處理之外，也有提供比較詳細處理的AJAX Method
在這邊我們可以指定AJAX的time out時間，
傳輸的格式、
失敗要執行的function
成功時要執行的function


Post那個函數在我們的專案中，用的還蠻多的，像是利用它來做多國語言版的alert method
因為多國語言的訊息檔是在Server端，所以我們是利用AJAX的方法到Server端去取得Message後alert
像這樣的功能應用，如果用過去的XML HTTP Request來做的話，可能需要程式碼就會多很多。


另外jQuery也可以幫我們的HTML添加一些動畫效果，
例如這個範例是影藏某一個控制項，我們可以在他後面加入屬性去控制的隱藏和顯示的速度
做出來的效果就好像powerpoint的動畫一樣，會有漸層的效果。
隱藏有，當然也有顯示的了。


其實jQuery的UI還做了很多其他的功能，他都是額外採用plugin的方式附加進來的
這個網站是jQuery UI的官方網站，因為我們專案中目前還沒有大量使用它，那就不多做詳細介紹了。




對於jQuery的使用，我們用的還蠻測底的，
連一些自己包的Control為了要讓他可以跨Browser，也用了它，
所以我們發現其他專案要來Reuse我們的東西時，也需要一併include jQuery
目前遇到的專案看起來還好，因為它們原本沒有用任何的javascript framework
所以只要把我們用的jQuery include進來就可了，
但是如果別的專案已經有使用了其他的framework的話，可能就需要做一些調整了才能使用了。