JsRender很多前端人員應該都用過,它是一個比較強大的模板,不牽涉太多技術依賴,使用起來很是舒服。我本人在前端開發中使用React以前,都是用的它了(實際上我感受React沒有JsViewes好用)。無論怎麼說,先來學習下JsRender技術吧,若是前端的開發環境比較單純,仍是很適合的。javascript
1、JsRender特性html
新一代的前端渲染模板前端
使用模板,能夠預先自定義一些固定格式的HTML標籤,在須要顯示數據時,再傳入真實數據組裝並展現在Web頁中;這避免了在JS中經過「+」等手動分割、鏈接字符串的複雜過程。java
針對高性能和純字符串渲染進行了優化json
無需依賴DOM和jQuery數組
優先使用場景app
2、JsRender使用性能
基本語法學習
幾個你可能不知道的要點優化
獲取當前的索引: #index,如{{if #index==0}} ... {{/if}}
獲取整個數據: #data, 如<option value="{{:#index}}">{{:#data}}</option>
獲取父模板: #parent, 如{{if (#parent.data.general==0)}} ... {{/if}}
3、舉個例子
下圖中是我之前作的一個Web頁面:
它的數據來源大概是這樣:
[ { id:12, cid:195, type:"問題簡述", impact:"錯誤級別", status:"處理狀態", owner:"處理人", count:1, path:"問題所在文件的SVN路徑", rev:對應文件的SVN版本號, … } , ... ]
咱們關注的是這個模板是怎麼寫的:
你們能夠看上圖中標紅的部分,除了helper與tag外,大部分功能都用上了。我實在不想好好作個demo給你們下載了,自己不復雜,不明白能夠再交流。
4、性能比較