The title is Programming happy with prototype.js and other libraries. I am talking about how to write JavaScript with libraries and anonymous functions.
Translation is possible by request.
JavaScript 也寫了10年了吧1。一直到最近幾年2才開始寫一些牽涉複雜DOM或是AJAX的程式,然後就在自己寫的10~20kb的 JavaScript 程式碼裡面迷路。
去年底的某個深夜(汗)裡偶然發現了 prototype.js。看了它的使用說明文件的前三面之後,強大的內心OS告訴我「這個 library 不用是白痴啊。」
熟悉JavaScript的人一定跟我有同感。prototype.js 除了簡單的 $()
、$F()
函式以外,只要善加利用 anonymous functions ,程式碼可以非常簡潔,物件之間的呼叫也不會隨便讓人迷路。
舉個例,以文件裡面的 Ajax.Request 範例來說好了。如果沒有 prototype.js,您可能要用 MDC: AJAX: Getting started 的作法建立 XMLHttpRequest()
物件然後再寫一堆函式互相呼叫,於是就迷路了。文件裡的範例解釋了 prototype.js 可以怎麼完成這個工作,不過它忘了用 anonymous functions 讓程式碼再簡化成如下:
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onComplete: function(originalRequest){
//put returned XML in the textarea
$('result').value = originalRequest.responseText;
}
}
);
於是再也不會找不到 showResponse()
了;也不會因為會跟其他 AJAX 功能撞名所以發生要把 function 改名成 searchSales_showResponse()
這樣。
除了讓程式的開發更方便以外,其他基於 prototype.js 的 library 也不少。Script.aculo.us 可以在網頁上製造不少動畫特效,而 Prototype Window Class 是在網頁上做視窗效果的 library 。
當然,使用 prototype.js 或是任何的 library 壞處也是有。一個問題是,在網路的環境中,載入一個 <script src=”…” /> 除了下載的時間以外,瀏覽器還需要時間解析並且載入程式碼。程式碼越多需要越多時間、瀏覽器的 JavaScript 引擎效率一直都不好,複雜的程式使用者會通常都會覺得網頁開啟來卡卡的、或是畫面一變白之後突然出現。所以如果您只會用到 $()
函式的話,還是勤勞一點不要用 prototype.js ,自己寫 document.getElementById()
吧。 Anonymous functions 的寫法也是改善程式易讀性的一大方向。
為了公平起見,順便說一下其他的 Web Applications 開發環境,它們除了 client-side 以外,也可以一並用來開發 server-side code;Google Web Toolkit(我不會 Java 所以跳過)、Yahoo! UI Library、Ruby on Rail、還有萬惡的(萬用的?) .NET。
以前還滿古板的想要什麼都自己寫 —— 不過後來發現自己不斷在重新發明輪子。「這是輪子剩餘定理呀。」by CornGuo (我要 Google Bomb 你XD。)
1* 以我會做的事,我覺得我不夠格稱自己為 (Computer) Programmer。Instead, I think I should call myself “Web Developer” since everything I wrote are Web Applicaions, even before I knew the term.
2* 也是最近幾年Web才有寫這種程式的條件啦。AJAX、比起以前更容易掌握的DOM、比起Perl相對適合做Web Application的PHP等等。