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

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

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

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

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

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

 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);
 

 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());
 

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

1. Douglas Crockford針對memory leak的議題發表一篇文章：JScript Memory Leaks提出一個purge的function，概念非常簡單，就是遍歷元素底下的所有節點，將所有的function設為null（這屬於closure的循環參照索引發的memory leak）。一般來說可以在unload時或者你要removeNode之前來做這個動作，例如：

   function purge(d) {
       var a = d.attributes, i, l, n;
       if (a) {
           l = a.length;
           for (i = 0; i < l; i += 1) {
               n = a[i].name;
               if (typeof d[n] === 'function') {
                   d[n] = null;
               }
           }
       }
       a = d.childNodes;
       if (a) {
           l = a.length;
           for (i = 0; i < l; i += 1) {
               purge(d.childNodes[i]);
           }
       }
   }
   window.onunload = function(){
       purge(document.body);
   }
   

2. Event Cache ：若你的專案沒用到一些framework時，可能會用到一些自訂的addEvent方法，這時可以透過EventCache.add來將事件加入cache，然後在unload時做EventCache.flush。這樣可以避免在unload時循環整個body，雖然降低了memory leak，但卻吃掉cpu的效能。

   var EventCache = function(){
    var listEvents = [];</p>
   <p> return {
    listEvents : listEvents,</p>
   <p> add : function(node, sEventName, fHandler, bCapture){
    listEvents.push(arguments);
    },</p>
   <p> flush : function(){
    var i, item;
    for(i = listEvents.length - 1; i >= 0; i = i - 1){
    item = listEvents[i];</p>
   <p> if(item[0].removeEventListener){
    item[0].removeEventListener(item[1], item[2], item[3]);
    };</p>
   <p> /* From this point on we need the event names to be prefixed with 'on" */
    if(item[1].substring(0, 2) != "on"){
    item[1] = "on" + item[1];
    };</p>
   <p> if(item[0].detachEvent){
    item[0].detachEvent(item[1], item[2]);
    };</p>
   <p> item[0][item[1]] = null;
    };
    }
    };
   }();
   

3. 利用try…finally來清除不被引用的參考：這常會發生在我們利用function來creat Element時，忽略了不再被引用的參考，然後直接return，在IE6中會引發memory leak，這篇文章透過try,finally來清除不被引用的參考，例如：

   function createButton() {
         var obj = document.createElement("button");
         obj.innerHTML = "click me";
         obj.onclick = function() {
           //handle onclick
         }
         obj.onmouseover = function() {
           //handle onmouseover
         }</p>
   <p>      //this helps to fix the memory leak issue
         try {
           return obj;</p>
   <p>      } finally {
           obj = null;
         }
       }
   

4. innerHTML所引發的memory leak：這個議題最為常見，innerHTML不被W3C列為標準，但因為他比起操作DOM元素容易的多了，因此廣泛的被使用，但是之前有提到，最好是在removeNode時做一次檢查，將node裡頭的function全部設為null，以避免closure所引發的memory leak，但是innerHTML實在太方便了，讓所有programer將這個問題拋在腦後，因為我隨時可以設定某個元素的innerHTML，哪怕他裡頭又肥又大，一句innerHTML就可以改變DOM元素。文章裡頭的例子用YUI來做示範，不過事實上，他還是用了Douglas了perge來清除循環引用。

   YAHOO.util.Dom.setInnerHTML = function (el, html) {
       el = YAHOO.util.Dom.get(el);
       if (!el || typeof html !== 'string') {
           return null;
       }</p>
   <p>    // Break circular references.
       (function (o) {</p>
   <p>        var a = o.attributes, i, l, n, c;
           if (a) {
               l = a.length;
               for (i = 0; i < l; i += 1) {
                   n = a[i].name;
                   if (typeof o[n] === 'function') {
                       o[n] = null;
                   }
               }
           }</p>
   <p>        a = o.childNodes;</p>
   <p>        if (a) {
               l = a.length;
               for (i = 0; i < l; i += 1) {
                   c = o.childNodes[i];</p>
   <p>                // Purge child nodes.
                   arguments.callee(c);</p>
   <p>                // Removes all listeners attached to the element via YUI's addListener.
                   YAHOO.util.Event.purgeElement(c);
               }
           }</p>
   <p>    })(el);</p>
   <p>    // Remove scripts from HTML string, and set innerHTML property
       el.innerHTML = html.replace(/<script[^>]*>[\S\s]*?<\/script[^>]*>/ig, "");</p>
   <p>    // Return a reference to the first child
       return el.firstChild;
   };
   

大概是這樣了，memory leak實在是個很惱人的議題，不過有責任感的前端工程是還是要將之視為己任的，畢竟項目越做越大，然而記憶體越吃越兇，這是很可怕的一件事。

	function dividend_toggle(){
	    $(".dividend").toggle();
	    dividend_toggled = !dividend_toggled;
	    $("#toggler").html(dividend_toggled?'hide':'show');
	}
	$("#toggler").click(dividend_toggle);

	$("#toggler2").toggle(function(){
		$("td.dividend").hide();
		$(this).html('show');
	}, function(){
		$("td.dividend").show();
		$(this).html('hide');
	});

this.each(function(){
var state = bool ? fn : jQuery(this).is(":hidden");
jQuery(this)[ state ? "show" : "hide" ]();
}) :

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()

console.log(+"01");//1
console.log(+"100");//100
console.log(+"1px");//NaN
console.log(+"abc");//NaN
console.log(+"abc");//NaN
console.log(+{obj:'obj'});//NaN
console.log(+['array']);//NaN
console.log(+true);//1
console.log(+false);//0

1. +運算符放在任何變數前面，會將該變數轉成number型態，但跟parseInt()是不同的(parseInt(’1px’) = 1)。
2. 以下結果相同：
   1. new Date().getTime()
   2. new Number(new Date())
   3. +new Date()

var SCRIPTROOTSRC = (function(){
 var RELATIVE = /^[\w\.]+[^:]*$/;
 function makePath(href, path) {
 if (RELATIVE.test(href)) href = (path || "") + href;
 return href;
 };

 function getPath(href, path) {
 href = makePath(href, path);
 return href.slice(0, href.lastIndexOf("/") + 1);
 };

 // get the path to this script
 var scripts = document.getElementsByTagName('script');
 var script = scripts[scripts.length - 1];
 var path = getPath(script.src);
 return path;
})();
alert(SCRIPTROOTSRC);