茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

    <s id="ddbnn"></s>
  • <sub id="ddbnn"><ol id="ddbnn"></ol></sub>

  • <legend id="ddbnn"></legend><s id="ddbnn"></s>

    javascript輕量級模板引擎juicer使用指南
    來源:易賢網 閱讀:1860 次 日期:2014-07-17 19:22:15
    溫馨提示:易賢網小編為您整理了“javascript輕量級模板引擎juicer使用指南”,方便廣大網友查閱!

    Juicer 是一個高效、輕量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代碼實現數據和視圖模型的分離(MVC)。

    使用方法

    編譯模板并根據數據立即渲染出結果

    view sourceprint?1 juicer(tpl, data);

    僅編譯模板暫不渲染,返回一個可重用的編譯后的函數

    view sourceprint?1 var compiled_tpl = juicer(tpl);

    根據給定的數據對之前編譯好的模板進行渲染

    view sourceprint?1 var complied_tpl = juicer(tpl); 

    2 var html = complied_tpl.render(data);

    注冊/注銷自定義函數(對象)

    view sourceprint?1 juicer.register(‘function_name', function); 

    2 juicer.unregister(‘function_name');

    默認參數配置

    view sourceprint?1 { 

    2   cache: true [false]; 

    3   script: true [false]; 

    4   error handling: true [false]; 

    5   detection: true [false]; 

    6 }

    修改默認配置,逐條修改

    view sourceprint?1 juicer.set('cache', false);

    修改默認配置,批量修改

    view sourceprint?1 juicer.set({ 

    2      'script': false, 

    3      'cache': false

    4 })

    Juicer 默認會對編譯后的模板進行緩存,從而避免同一模板多次數據渲染時候重復編譯所耗的時間, 如無特殊需要,強烈不建議關閉默認參數中的 cache,這么做將會令 Juicer 緩存失效從而降低性能.

    語法

    * ${變量}        

    - 使用${}輸出變量,其中_ 為對數據源的引用(${_})。支持使用自定義函數。

    view sourceprint?1 ${name} 

    2 ${name|function} 

    3 ${name|function, arg1, arg2}

    view sourceprint?01 var = links: [{href: 'http://juicer.name', alt: 'Juicer'}, 

    02             {href: 'http://benben.cc', alt: 'Benben'}, 

    03             {href: 'http://ued.taobao.com', alt: 'Taobao UED'}   

    04            ]}; 

    05  var tpl = [ '{@each links as item}', 

    06          '${item|links_build} <br />',   

    07          '{@/each}'].join(''); 

    08  var links = function(data) {     

    09    return '<a href="' + data.href + '" alt="' + data.alt + '" />'; 

    10 }; 

    11 juicer.register('links_build', links); //注冊自定義函數 

    12 juicer(tpl, json);

    * 轉義/避免轉義

         - ${變量} 在輸出之前會對其內容進行轉義,如果你不想輸出結果被轉義,可以使用 $${變量} 來避免這種情況。

    view sourceprint?1 var json = { 

    2    value: '<strong>juicer</strong>'

    3 }; 

    4 var escape_tpl='${value}'; 

    5 var unescape_tpl='$${value}'; 

    6 juicer(escape_tpl, json); //輸出 '<strong>juicer</strong>' 

    7 juicer(unescape_tpl, json); //輸出 '<strong>juicer</strong>'

    *循環(huán)遍歷 {@each} ... {@/each}         

         - 遍歷數組,${index}當前索引

    view sourceprint?1 {@each list as item, index} 

    2     ${item.prop} 

    3     ${index} //當前索引 

    4 {@/each}

    *判斷 {@if} ... {@else if} ... {@else} ... {@/if}

    *注釋 {# 注釋內容}

     {# 這里是注釋內容}

    *輔助循環(huán) {@each i in range(m, n)}

    view sourceprint?1 {@each i in range(5, 10)} 

    2     ${i}; //輸出 5;6;7;8;9; 

    3 {@/each}

    *子模板嵌套 {@include tpl, data}

           - 子模板嵌套除了可以引入在數據中指定的子模板外,也可以通過指定字符串`#id`使用寫在`script`標簽中的模板代碼.

           - HTML代碼:

    view sourceprint?1 <script type="text/juicer" id="subTpl"> 

    2    I'm sub content, ${name} 

    3 </script>

    - Javascript 代碼:

    view sourceprint?01 var tpl = 'Hi, {@include "#subTpl", subData}, End.'; 

    02   

    03 juicer(tpl, { 

    04 subData: { 

    05 name: 'juicer'

    06 } 

    07 }); 

    08   

    09 //輸出 Hi, I'm sub content, juicer, End. 

    10  //或者通過數據引入子模板,下述代碼也將會有相同的渲染結果: 

    11    

    12  var tpl = 'Hi, {@include subTpl, subData}, End.'; 

    13    

    14  juicer(tpl, { 

    15      subTpl: "I'm sub content, ${name}", 

    16      subData: { 

    17         name: 'juicer'

    18      } 

    19  });

    一個完整的例子

    HTML 代碼:

    view sourceprint?01 <script id="tpl" type="text/template"> 

    02   <ul> 

    03     {@each list as it,index} 

    04       <li>${it.name} (index: ${index})</li> 

    05     {@/each} 

    06     {@each blah as it} 

    07       <li> 

    08         num: ${it.num} <br /> 

    09         {@if it.num==3} 

    10           {@each it.inner as it2} 

    11             ${it2.time} <br /> 

    12           {@/each} 

    13         {@/if} 

    14       </li> 

    15     {@/each} 

    16   </ul> 

    17 </script>

    Javascript 代碼:

    view sourceprint?01 var data = { 

    02   list: [ 

    03     {name:' guokai', show: true}, 

    04     {name:' benben', show: false}, 

    05     {name:' dierbaby', show: true} 

    06   ], 

    07   blah: [ 

    08     {num: 1}, 

    09     {num: 2}, 

    10     {num: 3, inner:[ 

    11       {'time': '15:00'}, 

    12       {'time': '16:00'}, 

    13       {'time': '17:00'}, 

    14       {'time': '18:00'} 

    15     ]}, 

    16     {num: 4} 

    17   ] 

    18 }; 

    19   

    20 var tpl = document.getElementById('tpl').innerHTML; 

    21 var html = juicer(tpl, data);

    更多信息請查看IT技術專欄

    更多信息請查看網絡編程

    2026國考·省考課程試聽報名

    • 報班類型
    • 姓名
    • 手機號
    • 驗證碼
    關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
    工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
    聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
    咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網