因為最近開始接觸很多 FxOS 核心的程式碼，所以發現了很多精鍊的程式碼，其中有一個很有趣的是 Template.js。
市面上有一大堆 Template engine，基本的功能該有的都有，幾乎都大同小異。但是 FxOS 自己的 Template 卻相當吸引我的注意，因為他才短短的一百多行就實作了一個 Template engine 該做的所有事情（這邊只討論 Search then Replace，不考慮 inline logic ）而且有一個很關鍵的事情，就是他巧妙的解決了 Template 存在性的問題。
通常一般 Front-end 的 Template engine 都有一個問題，那就是要把 Template 存在哪裡？
Way 1 – by myself
愛用 jQuery 的我通常都是這樣做的：一開始先透過 selector 把 template 載入（一般都會 cache 住，只是我這個範例沒有特別寫這一段），而這個 template 本身會搭配一個 hide 的 class 避免一開始頁面在 render 的時候會被使用者看到，最後利用 sub-selector 把相對應的地方換成新值，最後再拿掉 hide class 並塞到 DOM tree 內。
https://gist.github.com/EragonJ/7300164.js
恩，整體看起來好像還不賴，整個 code 簡單好懂，也做了 template cache（我沒特別寫，但是通常都會被我 cache 到某個 Controller 下），後續維護也只需要加上相對應的 selector 然後替換值就好了。
Way 2 – by Handlebars.js
雖然 Way 1 已經很好了，但是有時候需要 toggle hide class 其實還蠻麻煩的，能不能不要把 CSS 和 Template 扯在一起？有了這個想法後，我就開始到處尋找可能的做法，最後找到了 Handlebars.js，他巧妙的利用 Script tag 做到這件事情：
https://gist.github.com/EragonJ/7300364.js
它的作法是去改變 script tag 的 type，你可以看 w3c 上面的說明，只要 browser 看不懂 script type 的話，它一致都會把它 render 成 text，又因為 script tag 本身就不會被 render 出來，所以就達到把 template 藏起來的效果，最後只要搭配 selector 去把它拉出來然後替換值就可以了。
Way 3 – by Template.js in FxOS
雖然 Way2 感覺起來好像不錯，但是利用 script type 這種 hack 的方式感覺有點不是這麼優雅，因為 Template 的東西本來就不該存活在script tag 內，到底還有沒有別的辦法來做到這件事情呢？
有，我在 Template.js 找到了。
從程式碼我們可以發現他會一直去尋找所有的 sibling 直到找到整個註解，在 HTML 裡面，註解就是 <!– –>，所以一開始很巧妙的，我們的 template 就是被註解起來的，也就不會被使用者看到內容，也因為一開始就看不見，所以我們就根本不需要去做 CSS 的視覺欺騙，整個就是把 nodeType 利用到極致，使用先天的特性漂亮的解決了這個問題，也就產生了這個 Template.js 。
很有趣吧，有興趣的人可以去看 Template.js 作者 Rick 的 Github，其他的就讓我們留到下次再來分享吧 😛
