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

週記:So what have I done recently

暑假過一半了。不知道為什麼今年在國外的人都跑回台灣,於是我整個七月就有很多飯局,皮包大失血。也不是不好啦,畢竟大家也不是平常約就見的到面。國中同學、高中同學、還有國小同學的聚會。

國小同學那算是亂入,因為我不是那班的;只是有個朋友之前同班所以就跑去了。很意外的遇到了其他認識的人,聊了一些大家的近況然後還有以前幹的一些好事;其實我很怕這些話題說,很怕回想以前做的蠢事跟我以前的個性;I am not quite sure how much “before” is still in me, and I really don’t want to bring him back. 所以其實我應該逃離這那種局面嘛(笑),雖然那樣做也是另一件蠢事。倒是因為那天而加了某個國小同學的MSN之後,她還跟我說「你真大方還跑來跟我們吃飯。」

沒去補習,雖然大家都在補習。不少高中同學都決定要考什麼研究所了,考三科補三科、考兩科補兩科。在信義-敦化的小春日式料理吃飯(食物很棒,相對便宜),話題環繞在補習班的一瞬間 I felt lost. Anyway, 反正我現在在讀一些去年沒有做好|做的不夠好的科目。試著為這件事情找到一點動力中。

然後是網站的工作。錯過了八月的物理教學研討會,目前的遠景是讓網站除了有目前完成的程式以外,內容也足夠可以在一月的時候登上物理年會做展覽。說不定到時候也是我做海報跟Demo呢;只是台下的物理學家們可能會傻眼吧(同學,請問一下 What is AJAX?)

網管工作預計做到暑假結束,在支薪的最後兩個月把自動化的程式做的完善一點讓以後的營運比較方便。這個工作完全違反了《貳拾壹歲生日願望》第一條;雖然做的不錯,還是離職好不然永遠停留在21歲長不大。

下次週記來說說 My Neighborhood 吧。這個月發現了一些住在這裡這麼久卻沒有發現的事物;總是離開了才發現失去了什麼。

Tim

favicon.ico of Microsoft.com

favicon.ico is a file to put on the root of an website, Internet Explorer and Firefox will show it on the address bar and favorite/bookmark. Mine are down there, a piece of Tiramisu:

favicon.ico of timc.idv.tw

.ico is an Windows Icon file, however it can be seen on Firefox across platforms. It was, originally, proposed and developed by Microsoft, then become the de facto standard with support from Mozilla.

Mozilla proposal for website icon that require <link rel=”icon” /> on header of every html file is still limited on Mozilla products.

The funny thing is Microsoft never put a favicon.ico on their website. Even if they did put one later God-knows-when, they put an icon of white sheet.

favicon.ico of microsoft.com

I guess they are planing registering the folded sheet as trademark. Oh please don’t.

favicon.ico 是放在網站根目錄的一個圖示,放了之後 IE 和 Firefox 等瀏覽器(KKman 或是 PCMan 不行)就會把它 show 在位址列或是我的最愛/書籤上面。下面是我的圖示,一小片提拉米蘇:

favicon.ico of timc.idv.tw

雖然說 .ico 是 Windows 的圖示檔格式,但是其他作業系統的 Firefox 也會順利 show 出來;這個做法原本是 Microsoft 提議的,後來被 Mozilla 支援而變成非正式標準。

原本 Mozilla 提議的作法是在每個 HTML 檔的 header 用 <link rel=”icon” /> 指定它的圖示;這個作法到現在還沒有被其他瀏覽器支援所以比較少人用了。

不過好笑的是,Microsoft 自己從來沒有在它們的網站上放 favicon.ico。就算他們好不容易終於放了,他們竟然放了一個 … 空白文件的圖示?

favicon.ico of microsoft.com

他們打算把「折一角的A4紙」這個標誌拿去登記商標嗎?拜託。