國三還是菜鳥一枚

Google 丟出 Closure Tools

2009-11-05T18:29:01-08:00

Google 為了提升 JavaScript-based 的應用程式效能投注了不少心力啊..

今天看到 Google 釋出 Closure Tools 的消息，發現這是 Google 所提供的一組用在 JavaScript 開發的工具，所以馬上就到它的首頁去瞧瞧。

目前 Closure Tools 包含三套工具，以下一一介紹：

Closure Compiler

這套工具顧名思義，它是用來編譯（compile）JavaScript 程式碼的編譯器，除了像是常見的 JavaScript compressor 提供的功能，它也會分析程式碼，把不需要的部份移除，減少 JavaScript 程式碼的大小及提升效率，如果程式要上線前，不妨試著用這個工具編譯一下吧！

要使用 Closure Compiler 也很容易，只要到這個網站上操作就可以了。如果你自認是個 geek，那也可以利用它所提供的 REST API 來作編譯的動作，可以整合到自己的部署工具中。
Closure Library

這套工具就像是許多 JavaScript framework 一般，提供了許多簡化 DOM 操作的函式庫，還有豐富的 UI 元件，詳情可以看看這裡來瞭解 Closure Library 提供了哪些函式庫及 UI 元件。
Closure Template

很多時候我們會利用 JavaScript 來取得遠端的資料（透過 AJAX 相關的技術），接著用來組合出畫面中的某個部份，但是在 JavaScript 中拼寫複雜的 HTML layout 總是令人感到噁心，而且 layout 如果更複雜時就很難維護了。
這套工具就是提供一個在 JavaScript 中做 template 的機制及函式庫，你可以把 HTML layout 的部份寫成一個 *.soy 檔案，接著再利用 Closure Template 提供的工具把這個 template 檔案編譯成 JavaScript 的程式碼，這樣應該可以讓 JavaScript 開發者省去很多處理版面的負擔吧！

如果你平時的工作就是在處理一大堆的 JavaScript，那我建議你一定要看看並且使用這套工具，絕對可以為你的程式碼提升效率、或是降低開發時的阻力！

iTHome 的人物專訪

2009-10-30T02:08:33-07:00

聽說這一期的 iTHome 電腦報 (422) 有我的專訪，其實好像被寫得太誇張，讓我感到十分地不好意思…

不過左下角的人物介紹，應該是「臺灣大學資訊工程所」而非~~「臺北大學資訊工程所」~~才對啊 Orz。

Android Éclair 上菜囉～

2009-10-27T19:00:51-07:00

這 Android 也更新得太快了一點…LOL

還記得在九月中我在敝社訓練所上 Android 課的那天，突然就出現了 Android 1.6 (donut) 的釋出消息（當然也包括 SDK 的更新），結果才一個多月的時間，Android 2.0 (éclair) 就出現了：

而且連 SDK 也已經釋出 2.0 的版本。不知道現在使用 android 1.5 (cupcake) 的 android 手機有沒有機會「升級」（？）到 éclair 版本呢？

不過顯然地，android developer 又有新的東西要讀了…XD 可以看看 gasolin 的介紹。

首頁極簡主義

2009-10-22T08:49:54-07:00

我還是不太懂為什麼很多網站急著在首頁堆出一堆訊息，但卻不告訴使用者這個網站可以做什麼呢？

Web 2.0 這個名詞起來之外，國內外很多號稱 web 2.0 的網站一個個冒出來，每個網站各有特色，但我發現國內網站的設計好像都怕首頁很空洞塞得滿滿的，因為我不想戰網站，所以就不擷圖示範了，但來看看幾個「全球性」的 web2.0 網站首頁：

blogger.com

flickr.com

facebook.com

twitter.com

我覺得這幾個網站擁有的共同特色就是首頁簡單，就是讓你登入、介紹特色，因為這些都是很鮮明要表現個人內容的網站，訪客大多都是使用搜尋引擎進到內容深處，要找朋友的「內容」，也大多會直接連結到該使用者的頁面。那到底誰會跑去逛首頁呢？恐怕就是新訪客，以及想要介紹這個網站的人，所以在首頁明確地告訴使用者：「來我的網站可以寫文章、放照片、找朋友….等」，不是很自然的事嗎？

反觀國內網站，不知道是不是都被某入口網站帶壞了，大家拼了命地在首頁狂塞一堆資訊，新訪客在眼花遼亂、走馬看花之際，真的知道他可以「使用」這個網站嗎？

JavaScript 跟你想得不一樣（二）

2009-10-22T08:23:00-07:00

與其說跟你想得不一樣，還不如說是容易造成誤解吧。

到底 this 是誰？

JavaScript 的 code 寫多了，你一定會碰到 this 這個關鍵字，是某個 object 下的 method 也好，或是 callback function 也好，關於 this 的用法常常會讓人搞混。

以一句簡單的話來說：在 function 裡，this 所代表的就是呼叫這個 function 的東西。

以下面這段程式碼為例，onButtonClick 是一個處理按鈕被按下時的 callback function：

var button = document.getElementById('foo');
var onButtonClick = function(evt) {
    alert(this);
};

if (button.addEventListener) {
    button.addEventListener('click', onButtonClick, false);
} else {
    button.attachEvent('onclick', onButtonClick);
}

上面這段 code 分別為了 non-IE 及 IE 瀏覽器不同的註冊 event handler 的寫法來操作，你可以發現，當你在 non-IE 的瀏覽器上執行這段程式碼，當按鈕按下時，訊息視窗應該會跳出有 HTMLInputElement 的訊息，表示呼叫這個 callback function 的物件就是 button，然而，在 IE 底下，你看到的則是 Window。雖然有這樣的不同，但至少有一件事是一致的：this 代表的就是 caller

至於一般的 function，「沒指定的話」都是 window，注意我這裡強調是「沒指定」，所以這也就代表了「可以指定」，以下面這段程式碼為例：

var foo = function(x) {
    alert(x);
    alert(this);
}
foo('abc');

你應該會看到訊息視窗先顯示 abc，接著就是顯示出 window。但若是變成下面這樣呢？

var foo = function() {
    alert(arguments[0]);
    alert(this.name);
}
var bar = { name: 'bar' };
foo.apply(bar, ['abc']);

在呼叫 foo 函式時使用 apply 方法，就可以更換 caller（正確地說是切換 context），而因為用了 apply 方法，函式的參數就要改以陣列傳入。當然，這時候的 this 就變成了 bar…..

簡單地結論就是….要在 function 裡使用 this 一定要很小心啊啊啊～

JavaScript 跟你想得不一樣（一）

2009-10-20T06:38:36-07:00

寫 JavaScript 的你，會不會常常踩到這些地雷呢？

JavaScript 常常會被人誤解為是簡單的語言，以我自己的經驗，如果有人跟你說 JavaScript 很簡單，那一定是他不熟 JavaScript，會造成這個現象，最主要的原因是大多數的程式開發者都不是學 JavaScript 出身的（我也不是），所以開發者常常會把自己在其它語言的習慣帶過來，於是很多誤會就此而生…..（JavaScript 是很 nice 的，這其中一定有什麼誤會….）

變數 scope 是根據 function 不是 block

想像一下這段程式碼：

var a = 1;
if (true) {
    var a = 2;
}
alert(a);

你覺得 alert 跳出來的訊息視窗會顯示什麼呢？答案是2。如果你太習慣 C/C++/Java, ….. 這類知名的程式語言，說不定你會回答1。

所以如果是這個例子你就不會答錯了：

var a = 1;
function foo() {
    var a = 2;
}
foo();
alert(a);

沒錯！答案就是1，但如果是這樣呢？

var a = 1;
function foo() {
    alert(a);
}
foo();

別想太多，這段 code 的執行結果當然會跳出1。那如果變成這樣呢？

var a = 1;
function foo() {
    alert(a);
    var a = 2;
}
foo();

感覺要瘋掉了嗎？ XD

不只是 Global 很可怕，window 物件也是

在瀏覽器上寫 JavaScript 或多或少都會用到 window 物件下的成員，但很可怕的是你常常不知道你在用它，因為使用 window 物件下的成員，window 是可以省略不打的。比方說很多人愛用 alert 來顯示訊息或 debug，但其實 alert 的「全名」應該是叫 window.alert 才對，喔！當然 location 也是叫 window.location，同樣地，你也不要不宣告就直接使用 innerWidth 這個變數 ….. 所以說 window 真的很可怕！！

但可怕的還不只是這樣，如果有一段 code 是這樣：

x = 3;
....
alert(window.x);

也許你（不）知道：在使用一個變數時，若沒用 var 這個關鍵字，它會被定義在 window 物件下，所以上面這段 code 當然沒有問題，x 就是 window.x，執行一下也沒錯，就是跳個訊息對話盒顯示3。

那如果你很乖地加了 var 呢？變成這樣：

var x = 3;
....
alert(window.x);

嘿嘿，我就說 window 很可怕吧！只要你在 global area 下，就算用了 var 也幫你定義到 window 物件下！這也就是為什麼很多人寫 JavaScript code 會用一個 anonymous function 來避開 global/window 了。

(function(){
    var x = 3;
    ....
    alert(window.x); // undefined
})();

所以說，JavaScript 真的跟你想得不一樣！

JavaScript 中的 document.createDocumentFragment

2009-10-11T23:43:07-07:00

其實只是一些基本的東西，只是容易被忘記。

今天強者我同學問我一個 JavaScript 的問題，大意是說他有一個迴圈要跑，而在這個迴圈之中會產生 DOM element，每次一產生 DOM element 就會把它加入到頁面中，然而他程式中的迴圈執行次數不少，造成他這段程式碼有很嚴種的效率問題，簡單地說就是在各個瀏覽器上都有很慢的感覺。

所以我先跟他說，你可以先把欲生成的東西以字串方式組合好，然後再一次加入到頁面，程式碼的流程大致如下：（這裡用陣列來串接字串的方式，可以參考我同事寫的文章：在 JavaScript 使用 Array.join 取代大量的字串相加）


var html = [];
for (var i in some_array) {
    var node = ..... // 產生 HTML 字串
    html.push(node);
}
targetNode.innerHTML = html.join('');

不過當然這個作法有一些問題，比方說光是這樣寫，若是有<script>標籤的話，JavaScript 並不會被 evaluated；或是要把 <option> 塞進 <select> 標籤中，在 IE 就會失效等等。我同學剛好碰到了 <select> 的這個問題，於是我引用 jQuery 中 clean 函式的作法來回答它。


var fragment = document.createDocumentFragment();
for (var i in some_array) {
    var node = document.createElement('option');
    node.innerHTML = '....';
    fragment.appendChild(node);
}
targetNode.appendChild(fragment);

在這段程式碼中，使用了 document.createDocumentFragment() 這個函式產生一個 document fragment，你可以把它想作是一個處理 DOM element 的 buffer，把欲生成的 DOM element 先加入到這個 fragment 中，最後再一次加到頁面的 DOM 結構中，這樣的作法比起在迴圈中一直 appendChild 來得快上許多，當然更重要的是，問題也被解決了 :)

Plurome: Chrome 上 Plurk 的（非官方）extensions

2009-09-20T01:21:29-07:00

練習寫一個 Chrome extension。

最近 Chrome 瀏覽器的正式版本已經來到 3.0 以上，並且開始支援 Chrome extensions（擴充套件），所以我也趕一下流行先寫了個十分簡單的 Chrome extension — plurome。

目前這個套件的功能非常簡單，只是在開啟一個頁面時，會在位址列出現一個 plurk 圖案，按下這個圖案後會開啟一個分頁連到 plurk 的畫面，並且把原本網頁的 URL 及標題帶至發噗的視窗，如此而已。

這個專案目前已經 open source，有興趣修改的同好，不妨一起來多多增加它的功能吧 :P

當 Snow Leopard 碰上 Android SDK

2009-09-18T03:30:26-07:00

其實也只是因為 Java 變成 64-bit 的關係…。

最近電腦已全面換成 Snow Leopard，系統的 Java 也變成 64-bit，而 Android SDK 中的 ddms 這個工具附的 swt.jar 卻是 32-bit 的，而且執行 ddms 會去找 $ANDROID_SDK/tools/lib/x86_64/swt.jar 這個路徑而爛掉，所以解決的方法，就是到這裡，找出適用於 OSX 64-bit 的 SWT binary，下載回來後，把 swt.jar 放在 $ANDROID_SDK/tools/lib/x86_64/ 目錄下即可。

[Taipei GTUG] Chrome Extras

2009-09-03T21:27:25-07:00

沒想到還有 MozTW 的人來亂入，但也讓大家收穫不少。

這週三 Taipei GTUG 辦了一個討論 Chrome extras（包括 extensions 及 themes）的聚會，原本擔心下大雨會沒有什麼觀眾，結果沒想到還是來了30多人，而且有許多第一次聚會沒有看過的新面孔，也許這就是社群壯大(?)的跡象吧！（謎之音：天真天真）（謎之音again: 那第一次聚會後沒來的…?）

在活動開始時，我們一同欣賞了這部影片的前半段（因為影片全長一小時），然後我稍微跟大家整理一下開發 Chrome extensions 的步驟及方法，看起來寫一個 Chrome extensions 就像寫網頁一樣簡單，你只要會 HTML, CSS（當然支援一些 -webkit-xxxx 的語法）及 JavaScript 就會寫 Chrome extensions 了！後來也感謝 Richard (Dlackty) 補充說明製作 Chrome themes 的方式。

不過除了討論 Chrome extras 之外，因為大家的好奇心，我也為大家展示了一些 Google Wave 到底是怎樣的東西，當場就做起來示範，感受一下更豐富的多人交談、協同工作的魅力。

另外，MozTW 社群的人也沒放過這次聚會的機會，跑來這個場子介紹 Mozilla Labs 的 Jetpack 及 Personas 兩個 project 來比較與 Chrome extras 的異同。讓參與這次聚會的人收穫不少。

不過，這畢竟還是個 GTUG 的聚會，提醒一下 :P