artTemplate4.0使用總結以及與JSP頁面衝突解決方案。

• 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方法註冊：