97久久国产亚洲精品超碰热,成人又色又爽的免费网站,色偷偷女人的天堂a,男女高潮喷水在线观看,国内精品一线二线三线区别在哪里

Discuz! 官方交流社區(qū)

標題: 基于 JS artTemplate 模板引擎 Template 加載的優(yōu)化 [打印本頁]
作者: 我是小站長    時間: 2019-6-1 19:58
標題: 基于 JS artTemplate 模板引擎 Template 加載的優(yōu)化
artTemplate （http://aui.github.io/artTemplate）一種全新的 javascript 模板引擎，它采用了預(yù)編譯的方式讓性能有了質(zhì)的飛躍，并充分利用 javascript 引擎特性，使得其性能無論在前端還是后端都有極其出色的表現(xiàn)。但是在實際應(yīng)用中我們發(fā)現(xiàn)，和Ajax配合后通常會產(chǎn)生很多的 Template，這些 Template 都堆積在頁面源碼中時間一長難免會越來越多，影響頁面加載的字節(jié)數(shù)，讓頁面越來越大。
我們對此進行了優(yōu)化，由于我們的業(yè)務(wù)主要是針對移動產(chǎn)品的，因此我們可以放心的使用 HTML5 的 localStorage 進行緩存操作，緩存部分代碼如下：
  1. artTemplate （http://aui.github.io/artTemplate）一種全新的 javascript 模板引擎，它采用了預(yù)編譯的方式讓性能有了質(zhì)的飛躍，并充分利用 javascript 引擎特性，使得其性能無論在前端還是后端都有極其出色的表現(xiàn)。但是在實際應(yīng)用中我們發(fā)現(xiàn)，和Ajax配合后通常會產(chǎn)生很多的 Template，這些 Template 都堆積在頁面源碼中時間一長難免會越來越多，影響頁面加載的字節(jié)數(shù)，讓頁面越來越大。
  2. 我們對此進行了優(yōu)化，由于我們的業(yè)務(wù)主要是針對移動產(chǎn)品的，因此我們可以放心的使用 HTML5 的 localStorage 進行緩存操作，緩存部分代碼如下：
復(fù)制代碼
這時，我們可以把諸多的 Template 分門別類的存放在不同的文件中，比如把首頁的 Template 代碼存放在 tpl_index.html 中，列表頁的 Template 代碼存放在 tpl_list.html 中。每個文件中可以放多個 Template 定義，文件內(nèi)容如下：
  1. <script id="header" type="text/html">
  2. <div class="header"><h3><%= header.name %></h3></div>
  3. </script>

  5. <script id="hotList" type="text/html">
  6. <ul>
  7.     <% for(i = 0; i < list.length; i++){ %>
  8.         <li tid="<%= list[i].tid %>"><%= list[i].subject %></li>
  9.     <% } %>
  10. </ul>
  11. </script>

  13. ······
復(fù)制代碼
在我們使用的時候，直接引用文件即可，如下：
  1. TC.load("tmpl/tpl_list.html");
復(fù)制代碼
首次訪問此函數(shù)時，會調(diào)用 tmpl/tpl_list.html 文件并緩存到 localStorage 中，以后會直接從 localStorage 中獲取 Template 的內(nèi)容，直到 TC.VERSION 中的值變化，才會重新調(diào)用文件。從而減少了主頁面請求的字節(jié)數(shù)。
用過 artTemplate 的人會習慣直接把一些內(nèi)容很短的模板直接寫在 JS 里，類似下面
  1. template.compile('header', '<div class="header"><h3><%= header.name %></h3></div>');
復(fù)制代碼
當然這樣更省事。
此方案的是保證減少頁面請求字節(jié)及頁面請求數(shù)的目的下還能做到方便維護而提供的！

此功能在打通版微社區(qū)中實現(xiàn)！







歡迎光臨 Discuz! 官方交流社區(qū) (http://r615.cn/) Powered by Discuz! X5.0