[FxOS] Deep into Template.js

Image Credit

fxos

因為最近開始接觸很多 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 找到了。

http://gist-it.appspot.com/https://github.com/mozilla-b2g/gaia/blob/0a0dcb5a12d70ccd07edfd7c1392cdbf24f6febc/shared/js/template.js?slice=41:53

從程式碼我們可以發現他會一直去尋找所有的 sibling 直到找到整個註解,在 HTML 裡面,註解就是 <!– –>,所以一開始很巧妙的,我們的 template 就是被註解起來的,也就不會被使用者看到內容,也因為一開始就看不見,所以我們就根本不需要去做 CSS 的視覺欺騙,整個就是把 nodeType 利用到極致,使用先天的特性漂亮的解決了這個問題,也就產生了這個 Template.js 。

很有趣吧,有興趣的人可以去看 Template.js 作者 Rick 的 Github,其他的就讓我們留到下次再來分享吧 😛

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s