2524989571-599d548e962c9_articlex.png
- art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。
Git地址:https://aui.github.io/art-tem...
模板语法
art-template支持两种语法，标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。
-
标准语法
{{if user}} <h2>{{user.name}}</h2> {{/if}}
<script id="card" type="text/html" >
{{each articles as data index}}
{{if data.style_type == 1}}
<!-- 左文右图 -->
<div class="card s6" name="{{ data.url }}>">
<a href="{{ data.url }}">
<div class="card_middle">
<div class="card_right">
<h3 class="news-title">{{ data.title }}</h3>
<p class="news-info">
<span class="news_source">{{ data.source_name }}</span>
<span class="news_time">{{ $imports.formatDate(data.publish_time) }}</span>
<span class="news_comment">{{ data.comment_count }}条评论</span>
</p>
</div>
<div class="card_right_img">
<img class="lazy" data-url="{{ $imports.crop( data.thumbnails[0].url,2,400,330) }}" alt="" />
</div>
</div>
</a>
</div>
{{ else if data.style_type == 2 }}
<!-- 视频 -->
<div class="card s3" name="{{ data.url }}">
<a href="javascript:void(0)">
<div class="video_container">
<div class="video_img">
<div class="video_mask">
<h3 class="dotdot line3">{{ data.title }}</h3>
</div>
<span class="play-btn" name="{{ data.videos[0].video_src }}"></span>
<img class="lazy" data-url="{{ data.thumbnails[0].url }}" alt="" />
</div>
<video style="visibility:hidden;" controls="" poster="{{ data.thumbnails[0].url }}"></video>
</div>
<p class="news-info">
<span class="news_source">{{ data.source_name }}</span>
<span class="news_time">{{ $imports.formatDate(data.publish_time) }}</span>
<span class="news_comment">{{ data.comment_count }}条评论</span>
</p>
</a>
</div>
{{ /if }}
{{/each}}
</script>
-
渲染模板template(id, data)
$('.content').prepend(template('card',res.data)) 标准语法更容易读写，但是却无法处理复杂的逻辑。
3383803729-599d64f394724_articlex.png
-
原生语法
<% if (user) { %> <h2><%= user.name %></h2> <% } %><script id="card" type="text/html" > <% for(var i = 0; i < articles.length ; i++){ %> <% var data =articles[i] %> <% if( data.style_type==1 ){ %> <!-- 左文右图 --> <div class="card s5" name="<%= data.url %>"> <a href="javascript:void(0)"> <div class="card_middle"> <div class="card_left"> <h3 class="news-title"><%= data.title %></h3> <p class="news-info"> <span class="news_source"><%= data.source_name %></span> <span class="news_time"><%= $imports.formatDate(data.publish_time) %></span> <span class="news_comment"><%= data.comment_count %>条评论</span> </p> </div> <div class="card_right_img"> <img class="lazy" data-url="<%= $imports.crop( data.thumbnails[0].url,1,400,330) %>" alt="" /> </div> </div> </a> </div> <% }else if( data.style_type==2 ){ %> <!-- 视频 --> <div class="card s3" name="<%= data.url %>"> <a href="javascript:void(0)"> <div class="video_container"> <div class="video_img"> <div class="video_mask"> <h3 class="dotdot line3"><%= data.title %></h3> </div> <span class="play-btn" name="<%= data.videos[0].video_src %>"></span> <img class="lazy" data-url="<%= data.thumbnails[0].url %>" alt="" /> </div> <video style="visibility:hidden;" controls="" poster="<%= data.thumbnails[0].url %>"></video> </div> <p class="news-info"> <span class="news_source"><%= data.source_name %></span> <span class="news_time"><%= $imports.formatDate(data.publish_time) %></span> <span class="news_comment"><%= data.comment_count %>条评论</span> </p> </a> </div> <% } %> <% } %> </script> -
渲染模板template(id, data)
$('.content').prepend(template('card',res.data)) 原生语法好处理复杂的逻辑，但是因为使用 <%>符号，如果项目中使用了jsp就会语法冲 突，这个时候只能使用标准语法了。
- 调用外部函数
// 定义模板方法
template.defaults.imports.formatDate = function(time) {
return G.formatDate(time)
}
template.defaults.imports.crop = function(src,type,w,h) {
return G.crop(src,type,w,h)
}
4.0之前用的是这种方式
template.helper('formatPrice', function(price, type) {});
上面的例子中要调用此函数需要通过imports方法注册：
