初識前端模板網頁設計-電腦資料初識前端模板網頁設計-電腦資料「篇一」對于“什么是前端模板，它有什么特性，怎么使用”這樣的問題已經通過上面的分析說明給出了答案。但前端模板既然是前端的范疇，就不可能獨立存在，而是需要運用到前端開發(fā)的流程中的。而采用了前端模版的開發(fā)流程與傳統(tǒng)的相比又會是怎么樣的呢？上圖是傳統(tǒng)的開發(fā)流程。首先將ui設計圖轉換成html的頁面，其中的數(shù)據一般先用模擬數(shù)據代替。比如，ui設計有個列表，那么可能開發(fā)人員會先建立一些模擬的數(shù)據填充到節(jié)點中，來開發(fā)調整頁面樣式。最后一步，則將需要動態(tài)生成（ajax應用等）的地方，將模擬數(shù)據的節(jié)點變成空白節(jié)點，然后在javascript里面拼裝這些html節(jié)點的字符串，最后再還原到原節(jié)點處（比如用innerHTML插入html）。上圖是一個實例。當列表中的元素需要ajax動態(tài)加載的時候，在傳統(tǒng)開發(fā)中可能按照先開發(fā)模擬數(shù)據的html頁面，再將這些元素拼接成html字符串，之后再進行一系列處理的功能。那么，它的問題是什么呢？很明顯，“不可逆”是最大的問題。當開發(fā)者完成了開發(fā)，這時候如果需要修改，那么將是很頭疼的事。由于是由字符串拼接出來的html片段，想直接修改這些字符串來改變結構或是修改樣式什么的將是一個比重新開發(fā)一遍還要具有挑戰(zhàn)的工作。所以，開發(fā)者往往選擇再來一遍吧:html的模擬數(shù)據頁面，然后再拼接字符串。除了“不可逆”，維護性差以及開發(fā)成本高都是采用傳統(tǒng)方式開發(fā)富客戶端應用的弊病。好吧，我們試著改變這個局面?？纯聪聢D，采用前端模板開發(fā)的新方式，或許會找到某些答案?！半p向可逆”，是的，采用前端模板的開發(fā)方式，在開發(fā)好展示的html頁面后，直接經過簡單的修改即可生成html+template頁面，無需再拼接字符串，無需再反復重寫展示模擬數(shù)據的html頁面，一切都變得很輕松。我們來看看代碼便知道原因了（以acetemplate為例）。如果調用模板引擎，當模板執(zhí)行數(shù)據執(zhí)行后，直接覆蓋parentNode里面的內容。而如果想繼續(xù)調整html結構等，則不調用模板引擎即可。而原有的調試數(shù)據，在需要發(fā)布的時候可以直接通過代碼編譯去掉debugstart與debugend之間代碼即可（這僅僅是前端模塊開發(fā)的一種實例，實際開發(fā)中可以去掉模擬數(shù)據，不用編譯）。初識前端模板網頁設計-電腦資料「篇二」1.yayatemplate/template2.easytemplate/easyTemplate.html3.jquerytemplate/blog/javascript-micro-templating/4.acetemplate/zswang/article/details/65825635.litetemplate/p/lite初識前端模板網頁設計-電腦資料「篇三」隨著前端交互的復雜性不變提升，無刷新頁面數(shù)據傳輸與渲染越發(fā)地頻繁化，我們發(fā)現(xiàn)傳統(tǒng)的前端開發(fā)方式在ajax數(shù)據渲染等方面存在著一個主要問題：繁瑣的數(shù)據渲染。當前端從后臺通過ajax等方式或許到數(shù)據后，如果要將這個數(shù)據渲染到指定的dom元素中，則需要進行各種字符串拼接工作或者一系列創(chuàng)建元素的工作，還不論細節(jié)的問題（單引號雙引號問題等），不管是哪一種形式，都是繁瑣且費時的。同時，在可讀性與維護性上也存在問題。試想，各種循環(huán)操作的字符串拼接，元素創(chuàng)建插入，在需要修改時，都需要重新花費不少時間與精力。那有什么方法可以解決這個問題呢?初識前端模板網頁設計-電腦資料「篇四」當我們在JSP中寫<%=name%>”+name+”。比如我們可以寫一段循環(huán)的li標簽的前端模板語言。通過前端模板引擎轉換后成本一連串得li標簽的html語言。這時候就可以直接采用innerHTML方法把html代碼插入到ul對象中，那么就完成了生成ul列表的功能。初識前端模板網頁設計-電腦資料「篇五」前端模板技術其實還有很多的工作要做，比如模板的事件代理，模板的復用性，模板的組件庫等等。