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

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紙」這個標誌拿去登記商標嗎?拜託。

PHP’s libmysql (Again)

總歸來說,只有兩種解法可以解決一PHP的libmysql每次都用utf8和MySQL伺服器連線的問題。這個問題只會發生在MySQL4.1以上,只要發生就會讓PHP從資料庫拿到的中文字通通變成問號。

這篇文章修正之前那篇提到的解法。

第一個解法是在my.cnf[mysqld]加上下面的設定。不管是Win32或是Linux上的MySQL都可以用。

default-character-set = utf8
default-collation = utf8_unicode_ci
skip-character-set-client-handshake

前兩行將MySQL伺服器的預設邊碼放在UTF-8,第三行叫MySQL忽略libmysql傳過來的字碼連線要求;libmysql總是試圖用utf8連線是造成這個問題的主因。

建議所有管理自己機器的人用這個方法解決亂碼問題。這也是MySQL5 CJK FAQ建議的方法。當然重新編譯libmysql也是可以的,但是那個太複雜了我也不知道怎麼做orz。

如果您沒有權限修改自己的MySQL-PHP環境,還有第二個方法;有點煩,要在所有的PHP程式碼裡面mysql_connect()出現的地方之下加上以下兩行:

mysql_query("SET NAMES 'UTF8'");
mysql_query("SET CHARACTER SET UTF8");

即便是下載的程式也要自己修改。對於WordPress,要修改的位置在wp-db.php

To sum up, there are two solutions for php to connect MySQL server using the correct charset. When the connected in wrong charsets, all non-utf8 characters becomes question marks.

This is the correction to the previous post.

The first solution is to put the following lines in my.cnf under [mysqld] session. Works on both MySQL on Win32 and Linux.

default-character-set = utf8
default-collation = utf8_unicode_ci
skip-character-set-client-handshake

The first two lines changes MySQL default to what the charest needed, and the third one ask MySQL to ignore what libmysql said about the charset – which always attempts to connect with utf8 charset.

This is the solution in MySQL5 CJK FAQ and it’s recommends for everyone with their own machines.

It’s can also be done by re-compile libmysql which is technical advanced and the I-don’t-know-how-to-do-it-so-don’-ask method.

For people did not have control over their MySQL-PHP environment but facing wrong charset connection all the time, you must add following line after every mysql_connect() in PHP scripts.

mysql_query("SET NAMES 'UTF8'");
mysql_query("SET CHARACTER SET UTF8");

This is kind of annoying and is required even in the programs you downloaded. WordPress is included and should be added in wp-db.php.