[心得] ajax / js template
小弟最近在自己打造 ajax template，
來分享一下心得。
其實外面已經有好幾組 framework 是可以使用 template 這樣架構的，
但都不是小弟理想中的方式。
比較多數的 framework 都是利用在原本的 page 中，
從 textarea 裡加上 template structure，然後讓他 display none，
再透過 js 控制存取。
但這樣有個大缺點是，template 實際上並沒有真正達到分離，
而且如果要動態載入新的 template，依舊必需要透過載入新頁面夾帶來達成。
以上是小弟對一般 template 的粗淺認知（應該有很多不同的 structure，
但小弟學淺，沒有一一瞭解或試過… orz）
總之，最近自己動手實做 template，目前大致上的架構已經完成七成有了。
小弟的做法是這樣：
首先利用 xmlHttpRequest 取回 template 的 xml，
其中 xml 包含兩種主要 tag， element 和 dataset，都類似以下的結構：
<element eleType="div" eleName="mainDiv" parentNodeName="" />
<element eleType="p" eleName="p" parentNodeName="mainDiv" text="Test" />
element 是一般元素，就是 html template 中不會隨資料變動的部份。
dataset 是可變動元素，也是就之後可以透過資料控制的部份。
無論 element 或 dataset 都有幾個屬性，用來讓 js 為它建立完整的 DOM，
換言之，取回 template xml 後，便會先去掃描 element 和 dataset 兩種 tag，
並建立各自的 DOM，完成基礎的 template 架構。
當需要進行顯示時，先透過 xmlHttpRequest 取回資料集 xml，
然後從 template 中 clone 一份架構出來（如果這個 template 尚未被 clone 過）
，將資料透過 control tree （架構 template 時所使用的架構樹）
來控制或進行 loop ，並且置入相關資料。
此後的每次呼叫此 template，都優先從已被 clone 的 structure 來作為操控。
目前的想法大約是這樣，小弟正在實做 dataset 的建立與相關細節，
也希望有大大可以提出想法交流一下～ :D
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 219.80.28.216
→
01/24 20:36, , 1F
01/24 20:36, 1F
討論串 (同標題文章)
以下文章回應了本文：
完整討論串 (本文為第 1 之 5 篇)：
Ajax 近期熱門文章
PTT數位生活區 即時熱門文章
