前端渲染利器——JsRender入門

     JsRender很多前端人員應該都用過,它是一個比較強大的模板,不牽涉太多技術依賴,使用起來很是舒服。我本人在前端開發中使用React以前,都是用的它了(實際上我感受React沒有JsViewes好用)。無論怎麼說,先來學習下JsRender技術吧,若是前端的開發環境比較單純,仍是很適合的。javascript

 

    1、JsRender特性html

     新一代的前端渲染模板前端

  • 使用模板,能夠預先自定義一些固定格式的HTML標籤,在須要顯示數據時,再傳入真實數據組裝並展現在Web頁中;這避免了在JS中經過「+」等手動分割、鏈接字符串的複雜過程。java

  • 針對高性能和純字符串渲染進行了優化json

  • 無需依賴DOM和jQuery數組

     優先使用場景app

  • 元素重複出現
  • 動態加載數據,並前端顯示

   

    2、JsRender使用性能

  1. 引入js:jsrender.js
  2. 定義模板:
  3. 準備好要顯示的數據 json對象 var data = { xxx:「text」 }
  4. 編譯成元素:document.getElementById(「XXX」).render(data);   或 $("#XXX").render(data);
  5. 經過容器元素的append、before、after顯示

      基本語法學習

  • 原始賦值: {{:屬性名}},顯示原始數據
  • 轉碼賦值: {{>屬性名}},顯示HTML編碼後的數據
  • 控制語句可嵌套使用:
    • 判斷: {{if 表達式}} … {{else}} … {{/if}}
    • 循環: {{for 數組}} … {{/for}}
  • 其它進階
    • 模板嵌套,使用:{{for tmpl="#另外一個模板" /}}
    • 轉換器 $.views.converters()定義,使用:{{func:屬性名}}
    • 幫助方法 $.views.helpers()定義,使用:{{if ~func(arg1, arg2, ...)}}
    • 自定義標籤 $.views.tags()

     

 

     幾個你可能不知道的要點優化

  • 獲取當前的索引: #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、性能比較

 

 

 

    轉載請註明原址:http://www.cnblogs.com/lekko/p/5888962.html

相關文章
相關標籤/搜索