用 prototype.js 和其他 library 快樂的寫程式

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 LibraryRuby 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等等。

2 thoughts on “用 prototype.js 和其他 library 快樂的寫程式

  1. 啊,我有講過這句話嗎.. (思考中)

    有嗎.. 囧?

    不過有現成的輪子,確實不用再去發明輪子啊

    ──除非那個輪子是電子花車專用,而你要的是普通的輪子 :p

  2. Pingback: -TMA-1- » links for 2006-08-03

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.