Closure Template 是google release 的工具Closure Tools其中之一，我會注意到這個工具是因為前端產生動態layout的需求愈來愈多，雖然已經很盡力要將邏輯與template分開，但前端跟layout的結合實在是太密切，很難說分就分，雖然要把layout獨立出來要花更多時間，但至少會更好維護，往後要換template也不用再重寫程式，本篇文章稍微紀錄一下使用心得與過程。

1. 點此下載，裏面包3個檔案：
   
   
   1. SoyToJsSrcCompiler.jar ：
   
   
   2. soyutils.js
   
   
   3. soyutils_usegoog.js
   
   


2. jar檔是主要將template輸出成js檔的程式，而soyutil則是一個完整的stringBuilder，你也可以直接用這個function來使用stringBuilder。另外soyutils_suegoog只是加上了google的namespace罷了。


3. template檔為XXX.soy ，附檔名一定要是soy，否則執行不會有任何結果，接下來說明template檔，以下是一個很簡單的hello world範例：
   第1行的namespace 一定要先宣告，這相對應於到時候呼叫的namespace，namespace的命名接受連續的階層，例如上述宣告examples變會輸出：
   
   
   
   1. 
      [sourcecode language=”javascript”]
      if (typeof examples == ‘undefined’) { var examples = {}; }
      [/sourcecode]
      
      [sourcecode language=”javascript”]
      {namespace examples}
      /* Says hello to the world.
      */
      {template .helloWorld}
      Hello world!
      {/template}
      [/sourcecode]
      
   
   
   2. 若宣告為examples.helloworld則會輸出[sourcecode language=”javascript”]
      if (typeof examples == ‘undefined’) { var examples = {}; }
      if (typeof examples.helloworld == ‘undefined’) { examples.helloworld = {}; }[/sourcecode]
      
      
   
   
   3. 一個template(soy檔案)可以有多個不同的template，命名範例：[sourcecode language=”javascript”]
      {template .helloName}
      blablabla
      {/template}[/sourcecode]
      
      
   
   


4. 最後執行
   [sourcecode language=”javascript”]java -jar SoyToJsSrcCompiler.jar –outputPathFormat simple.js simple.soy[/sourcecode]
   
   

今年跟thegiive、JJ、PAPAYA組了一隊去參加，其實報名截止的前一天才決定要報名的，因為實在沒什麼idea，後來好不容易硬湊出個idea來做，勉強有了一點「梗」。

概念是嵌入blog的小工具，有點類似IE8的加速器，讓使用者選取文字之後可以更快速的選擇他想要查詢的功能，使用者可以停用任何功能或甚至停用這個功能。例如查詢地圖，生活+，知識+，翻譯，無名正妹，Youtube等等

用到的API：

1. Yahoo Map API


2. YUI 2.8


3. 生活+ API


4. 知識+ API


5. 斷章取義 API


6. BOSS API


7. 無名API


8. Flickr API


9. Google Translate API


10. Youtube API

DEMO

雖然最後沒有拿到名次，不過感受到現場coding以及氣氛就值回票價了。隨意拍了一些照片分享一下。

很多人搞不懂Javascript的「this」這個關鍵字，或者是覺得懂，但是有些地方的this又覺得怪怪的。看過一些this的教學，我覺得都講得太複雜了，其實「this」只有一個重點而已。

this永遠指向「被執行時的作用域」

蝦毁？？被執行？作用域？？沒關係，試著把自己當作是編譯器，只要你不會在自己所撰寫的程式中迷路，其實this一點都不難區分。讓我們來看幾個例子：

1
2
3
4
5

 var t = this;console.log(t); //window
 function whatIsThis(){
     console.log(this); 
}
whatIsThis(); //window

變數t指向this，作用域在window底下，因此this指向window，這沒有問題，function whatIsThis裡頭印出的this指向誰？別會錯意囉，this永遠指向被「誰」呼叫，這個function是在window的作用域下被呼叫的，因此指向window，同理，我們來看下個例子：

1
2
3
4

function wrapper(){
     whatIsThis();
 }
wrapper(); //window

什麼？我是透過wrapper這個function來呼叫whatIsThis的，為什麼還是window？請想想wrapper的作用域是誰？是 window，window呼叫wrapper，this還是指向window，作用域並沒有改變，這時呼叫whatIsThis當然作用域還是沒有改變，依然指向window。

接下來結合其他的型態：

1
2
3

var arr = [this, 1, 2, function(){console.log(this)}];
console.log(arr[0]); //window
arr[3](); //arr

arr[0]指向window，原因是arr這個陣列被宣告時作用域是在window底下的，因此arr[0]是指向this。而arr[3]呢？當他被執行時，this被closure的方式被保存在function裡頭，因此呼叫arr[3]時，this指向他當時的作用域，也就是arr，看起來有點複雜，不過只要把自己想程式編譯器，問自己this何時被執行就好了。 Object跟Array一樣，其實大部分應該會更常在Object裡頭來使用this，我們來看一個比較實用的例子：

1
2
3
4
5
6

var box = {
    length:100,
    width: 300,
    area: this.length* this.width
};
console.log(box.area);

看起來蠻合邏輯的一段程式，猜猜看，box.area是什麼？答案是NaN。Why?因為this根本就不是指向box，哪來的 this.length、this.width。剛說過this永遠指向「被執行的作用域」，box物件在宣告時，屬性volumn被指派時，this當然是指向window，所以這個邏輯是錯的。那怎辦？很多人遇到這個問題時，「那就不要使用this吧！」所以程式變成

1
2
3
4
5
6

var box = {
    length:100,
    width: 300,
    area: box.length* box.width
};
console.log(box.area);

OK！box.area很正確的被計算出來了，但是這是個好辦法嗎？假如今天程式變成

1
2
3
4
5
6
7
8

 var box = {
     length:100,
     width: 300,
     area: box.length* box.width,
     volumn: box.length* box.width * box.height,
     height:50
};
 console.log('box.volumn='+box.volumn);

再猜猜看，box.volumn的值是什麼？答案是…..NaN，因為box在被宣告時，volumn屬性決定前尚未宣告height，導致 box.height變成undefined。「那就把height提前宣告就好啦？」等等，這樣真是不求甚解。這樣的需求用this的特性來取得是很直覺的事情，應該要想辦法搞定的。

1
2
3
4
5
6
7
8

var box = {
    length:100,
    width: 300,
    getArea: function(){ return this.length* this.width},
    getVolumn: function(){ return this.length* this.width*this.height},
    height:50
};
console.log('box.volumn='+box.getVolumn());

如上，用getArea的function來動態取得box的長寬高，box.getVolumn function裡頭的this便是指向box這個物件，因為getVolumn被呼叫時，作用域就在box，所以this指向box。 this跟幾個重要型態的關係大概就是這樣，萬變不離其宗，在任何型態裡頭使用this都是照這個思維去走即可。下一篇會再介紹new Object之後的this以及與window事件交互作用之後的this。

前端程式越搞越複雜，接踵而至的問題越來越多，雖然瀏覽器的效能不斷地提昇，但是只要IE6沒被淘汰的一天，網頁程式設計師永遠要替IE6補洞，Memory Leak是一個非常難搞得議題。關於微軟的官方說法可以參考Understanding and Solving Internet Explorer Leak Patterns，裡頭有詳細說明IE6會如何發生memory leak的情況。發生memory leak的徵狀就是：記憶體不斷飆上去，就算reload頁面，記憶體也不會被釋放，除非關掉瀏覽器。

在此不介紹為何為引發memory leak，因為我覺得這是瀏覽器應該要處理的問題，要拿出來講只是因為IE6沒辦法處理好罷了，雖然其他瀏覽器也並不是沒有這個問題，但是至少問題都沒有這麼嚴重，因此只需要針對IE6來處理即可。以下是我整理出幾種比較好的處理方式：

在電子地圖上直接繪製一些地標的資訊，對使用者會帶來一些便利，但顯示太多，又會造成圖示太繁雜。將地標直接標在圖面上有個特性，該地標不需要知道詳細的資訊，例如便利商店，我只要知道哪裡有便利商店，但大部份人不需要明確知道這是哪一個分店，只要標上某個icon即可，另外像加油站、郵局等都是類似的意義。不過觀察google map發現一些奇怪的地方：例如在不同的zoom level竟然會出現不同的商店，但是判斷是否要出現該地標的邏輯還是無法歸納，大概是為了版面的美觀，有重疊的地標就不做繪製，或者超過某一個量就不做繪製。個人覺得GMap最大的優點是有公車資訊，而且雖然是直接繪製在地圖上，但是點擊公車站牌是可以出現公車資訊的。

很久沒發文了，最近忙翻了，但工作上也越來越多事情要處理，另外又跟朋友有些小計畫，把所有的時間都投入在工作中，以至於BLOG都荒廢了，碰巧最近跟朋友聊到工作的目標在哪？所以今天發點抒情文吧XD。

“Stay Hungry, Stay Foolish” 這句話我掛在MSN許久了，也有幾個朋友問我什麼意思，其實這句話是2005年Steve Jobs在史丹佛大學的畢業典禮對全校師生演講的最後一句話，他真不虧是世界上具有重要性的人之一，演講果然不同凡響，句句都能鼓舞人心。當我看到段演講時，我真的被振奮到了，他說「你無法預先把點點滴滴串連起來；只有在未來回顧時， 你才會明白那些點點滴滴是如何串在一起的(you can’t connect the dots looking forward; you can only connect them looking backwards)。 」我回想到我的大學生活，一進大一就被當了9學分，大二開始才知道要振作，雖然不認真唸書，當時倒也學到了一點企管的知識，但一直到要畢業的那一刻，我還是不知道念企管要幹麼，上網稍微找了一下工作，也不知道念企管能做什麼，但憑藉著一點對電腦的熱愛，從一個什麼都不懂的傻子，到現在做了一個programer的工作。在回顧過去的時候，將經歷過的一切串連起來的時候才發現這一切是多麼的奇妙。

jQuery有個很方便的function：toggle，可以讓元素做指定的切換動作，若不指定任何參數，則可以讓元素做很簡單的隱藏、顯示的切換，很是方便。If they are shown, toggle makes them hidden (using the hide method). If they are hidden, toggle makes them shown (using the show method).

但今天突然發現在針對大量元素的隱藏顯示時，這個function效能很差。

詳情請參考

1. Google Geo Developers Blog: Announcing Google Maps API v3


2. ericsk大大http://blog.ericsk.org/archives/1334

• 取消了授權碼的限制，不再限制domain name，其實yahoo map的授權碼也沒有驗證domain name(噓~)，不過這種挑明著開放總是好事一樁。


• 加強各種瀏覽器的使用，例如iphone，可支援多點觸控，這太屌了，難道可以用iphone多點觸控來旋轉地圖（驚！）改天搞隻iphone來試試看。


• 改以MVC的架構來重寫API：看了一下，V3版把各種元件都拆開了，期待神人再次降臨拆解程式講解V3版（參考：google maps api2.0解析）。

1. media(多媒體播放)：http://www.malsup.com/jquery/media/


2. GalleryView(擴充性極強的圖片瀏覽插件)：http://spaceforaname.com/galleryview


3. 取得youtube的影片縮圖：http://jquery-howto.blogspot.com/2009/05/jyoutube-jquery-youtube-thumbnail.html


4. 讓AJAX動作能夠有歷始紀錄(history)：http://www.asual.com/jquery/address/


5. jstore可以用各種方式儲存client端資料：http://code.google.com/p/jquery-jstore/