javascript
前端模板引擎artTemplate---高性能JavaScript模板引擎
關于artTemplate模板引擎的詳細原理請移步高性能JavaScript模板引擎原理解析，本文只探討如何使用。初學前端的人一般對于綁定數據都是使用原生js或者jquery來拼接字符串，此為hardcode，而且拼接的過程很頭疼，什么單引號雙引號，符號嵌入多了就頭暈眼花容易出錯，如果會調試的話可以看到渲染模板的效率也很低下。本文將介紹一種新的利用模板引擎來渲染數據的方法。
（1）artTemplate基礎使用方法
一：簡潔語法版
<!DOCTYPE html> <html> <head><title>demo1</title><script type="text/javascript" src="js/template-web.js"></script> </head> <body><div id="content"></div><script id="test" type="text/html">{{if isAdmin}}<h1>{{title}}</h1><ul>{{each list value i}}<li>索引{{i+1}}：{{value}}</li>{{/each}}</ul>{{/if}}</script><script>var data = {title: '基本例子',isAdmin:true,list:['文藝','博客','攝影']};var html = template('test',data);document.getElementById('content').innerHTML = html;</script> </body> </html>二：原生語法版
原生語法就是定義模板的js格式不一樣，有點像jsp的語法，不過我個人建議使用簡潔版，以為沒有這么多的符號，方便哈。
<script id="test" type="text/html"><%if(isAdmin){%> <% for(var i=0; i<list.length; i++){%> <div><%=i%>:<%=list[i]%></div> <%}%> <%}else{%> <div>沒有結果！</div> <%}%> </script>（2）artTemplate模板定義方式
一：javascript定義html模板
這種方法如上<script id="test" type="text/html"> 這里的type必須為”text/html”, 必須定義id。
二：用變量的形式存儲模板
<!DOCTYPE html> <html> <head><title>demo2</title><script type="text/javascript" src="js/template-web.js"></script> </head> <body><div id="content"></div><script>var source = '<ul>'+ '{{each list value i}}'+ '<li>索引 {{i + 1}} ：{{value}}</li>'+ '{{/each}}'+ '</ul>';var render = template.compile(source);var html = render({list: ['攝影', '電影', '民謠', '旅行', '吉他']});document.getElementById('content').innerHTML = html;</script> </body> </html>這里又出現了討厭的字符串拼接，所以我又不喜歡了，還是建議用第一種方式。
（3）ajax結合artTemplate模板
假設可以通過/test.php 獲取json數據，數據如下：
{result:[{id:1,name: 'zhangsan'},{id:2,name: 'lisi'},],error_code:"200" }需要數據綁定到html頁面:
<div id="content"><div>javascript定義模板：
<script id="search" type="text/html"><ul>{{each result value i}}<li>name{{i+1}}：{{value.name}}</li>{{/each}}</ul> </script>ajax請求數據的方式為：
$.ajax({type: 'post',url:'/test.php',success: function(res){var result = res.result;var $html = template("search",result);$("#content").html($html);} });以下為基礎語法：
變量
標準語法{{set temp = data.sub.content}}
原生語法<% var temp = data.sub.content; %>
自定義過濾器filter
注冊過濾器
template.defaults.imports.dateFormat = function(date, format){/*[code..]*/}; template.defaults.imports.timestamp = function(value){return value * 1000};標準語法：
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}原生語法：
<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>子模板
標準語法：
{{include './header.art'}} {{include './header.art' data}}原生語法：
<% include('./header.art') %> <% include('./header.art', data) %>模板繼承
標準語法：
{{extend './layout.art'}} {{block 'head'}} ... {{/block}}原生語法：
<% extend('./layout.art') %> <% block('head', function(){ %> ... <% }) %>模板繼承允許你構建一個包含你站點共同元素的基本模板“骨架”。范例：
<!--layout.art--> <!doctype html> <html> <head><meta charset="utf-8"><title>{{block 'title'}}My Site{{/block}}</title>{{block 'head'}}<link rel="stylesheet" href="main.css">{{/block}} </head> <body>{{block 'content'}}{{/block}} </body> </html> <!--index.art--> {{extend './layout.art'}} {{block 'title'}}{{title}}{{/block}} {{block 'head'}}<link rel="stylesheet" href="custom.css"> {{/block}} {{block 'content'}} <p>This is just an awesome page.</p> {{/block}}渲染 index.art 后，將自動應用布局骨架。
其他文檔詳見：art-template官方文檔
總結
以上是生活随笔為你收集整理的前端模板引擎artTemplate---高性能JavaScript模板引擎的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux 线程同步消息队列,Linux
- 下一篇： 移动端根据设计稿宽度适配 px转换相对单