1

图片描述

  • 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))
         标准语法更容易读写,但是却无法处理复杂的逻辑。
        

图片描述

  • 原生语法

        <% 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方法注册:


李帅醒
113 声望5 粉丝

内心还是残留一丝文艺情怀的小码农 新浪微博@李胖醒plus