BLACKBING

這是去年在公司的簡報，最近沒什麼產值，貼貼舊文章XD

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. if (typeof examples == 'undefined') { var examples = {}; }
      

      {namespace examples}
      /**
       * Says hello to the world.
       */
      {template .helloWorld}
          Hello world!
      {/template}
      

   2. 若宣告為examples.helloworld則會輸出

      if (typeof examples == 'undefined') { var examples = {}; }
      if (typeof examples.helloworld == 'undefined') { examples.helloworld = {}; }

   3. 一個template(soy檔案)可以有多個不同的template，命名範例：

      {template .helloName}
      blablabla
      {/template}

4. 最後執行

   java -jar SoyToJsSrcCompiler.jar  --outputPathFormat simple.js   simple.soy

很多人搞不懂Javascript的「this」這個關鍵字，或者是覺得懂，但是有些地方的this又覺得怪怪的。看過一些this的教學，我覺得都講得太複雜了，其實「this」只有一個重點而已。 this永遠指向「被執行時的作用域」 蝦毁？？被執行？作用域？？沒關係，試著把自己當作是編譯器，只要你不會在自己所撰寫的程式中迷路，其實this一點都不難區分。讓我們來看幾個例子： More »

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

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

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效能很差。 More »

1. Is Ajax support on Internet Explorer Mobile?
   Actually, IE Mobile’s Ajax support dates back to Windows Mobile 2003.
2. javascript & AJAX 實做心得
   1. 可用AJAX，但desktop IE的javascript Framework有很多function不適用，因此建議還是依需求開發。
      1. 針對AJAX部份我有根據官方範例寫了一個Ajax call function for Mobile IE
         http://blackbing.net/lab/mobile/mobileAjax.js
   2. 基本的javascript幾乎都支援，getElementById, setTimeout, etc..
   3. 只有button 有onclick事件，其他如DIV、SPAN上沒有這種event。
   4. 請注意IE Mobile 沒有「onMouseOver」事件。
   5. CSS支援度差，不支援定位(position, top, left)，且javascript存取css的方式也有限，必須反覆測試style的表現。
   6. On Smartphone/PocketPC 2003 innerText and innerHTML Properties are only supported on div and span elements.
      On Windows Mobile 5 innerText and innerHTML Properties are supported on all elements.
3. 開發AJAX應用程式的注意事項：
   1. 使用者介面越簡單越好
   2. 資料傳輸量越精簡越好(JSON)
   3. DOM tree 越淺(shallow)越好
   4. 若有大量資料要隱藏，請避免使用display:none，直接採用DOM操作方式remove掉。(保持頁面資料越精簡越好)
   5. 盡可能不要讓使用者輸入data，改由select方式
   6. Adding On-Demand Script
4. 其他：
   1. how to configure Internet Explorer Mobile to display script errors?
      To configure IE Mobile to display script error messages requires you to create a new registry entry.
      1. Open the device/emulator registry using the Remote Registry Editor or other Windows Mobile registry tool
      2. Navigate to the registry key HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main
      3. Create a new DWORD entry for the key; name the new entry ShowScriptErrors and set the value to 1
      4. Soft-reset the device/emulator

         Once you complete these steps, IE Mobile will display error messages for any script errors that occur.

   2. Enabling Cross-Domain Calls in Your Development Environment
      When working in your development environment, you can disable the security check that prevents the XMLHTTP object from making a cross-domain call. You do this by modifying the value of the appropriate registry entry using the following steps.
      1. Open the device/emulator registry using the Remote Registry Editor or other Windows Mobile registry tool
      2. Navigate to the registry key HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\Current Version\Internet Settings\Zones\3
      3. Change the value of the entry named 1406 to 0.
      4. Soft-reset the device/emulator
         Once you complete these steps, the XMLHTTP object can call into any domain without restriction.

1. 參考資料：
   1. Mobile Web Development
      http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnanchor/html/anch_mobilewebdev.asp
   2. Mobile DOM Reference Guide
      http://msdn.microsoft.com/library/default.asp?url=/library/en-us/mobilesdk5/html/mogrfdomreferenceguide.asp
   3. Mobile CSS Support
      http://msdn.microsoft.com/library/default.asp?url=/library/en-us/mobilesdk5/html/mogrfdomreferenceguide.asp?frame=true
   4. Windows Mobile Developers Wiki
      http://channel9.msdn.com/wiki/default.aspx/MobileDeveloper.HomePage

一般來說，我們都會用

new Date().getTime()

來取得目前的time stamp，今天在cssRain看到JavaScript—new Date().getTime()的简写方式，發現

+new Date()

這兩個會出現相同的結果，這讓我不禁好奇了「+」這個運算符他的特殊用法， 測試了幾個結果： More »

做專案時常常因為路徑問題而困擾，因為現在用的路徑很可能到另一個環境就有大幅度的變動，寫前端程式的時候更常遇到這個問題，當然每個人都會把路徑獨立出來成一個變數，到時候若要改的話只要改個變數即可，但像CSS的url command就可以讀相對路徑，因此路徑只要指向相對路徑即可，就算環境換了也不用改任何程式。因此如果每一隻script都可以知道自己被include的Root路徑，需要指定路徑的地方就只要根據這個Root路徑來做相對路徑即可。例如一隻js檔裡頭需要動態產生圖片，那麼就會需要用到這個相對路徑。 More »

IE8多了一個Accelerator(加速器)的功能，立意良好，使用起來也蠻直覺方便的，不過其他瀏覽器要這種功能的話就還要裝外掛或者是另外開發，但若直接透過javascript是否能做到類似的功能呢？答案是肯定的，而且作法不難… More »