久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线

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

標(biāo)題: 基于 JS artTemplate 模板引擎 Template 加載的優(yōu)化 [打印本頁(yè)]

作者: 我是小站長(zhǎng) 時(shí)間: 2019-6-1 19:58
標(biāo)題: 基于 JS artTemplate 模板引擎 Template 加載的優(yōu)化

artTemplate （http://aui.github.io/artTemplate）一種全新的 javascript 模板引擎，它采用了預(yù)編譯的方式讓性能有了質(zhì)的飛躍，并充分利用 javascript 引擎特性，使得其性能無(wú)論在前端還是后端都有極其出色的表現(xiàn)。但是在實(shí)際應(yīng)用中我們發(fā)現(xiàn)，和Ajax配合后通常會(huì)產(chǎn)生很多的 Template，這些 Template 都堆積在頁(yè)面源碼中時(shí)間一長(zhǎng)難免會(huì)越來(lái)越多，影響頁(yè)面加載的字節(jié)數(shù)，讓頁(yè)面越來(lái)越大。

我們對(duì)此進(jìn)行了優(yōu)化，由于我們的業(yè)務(wù)主要是針對(duì)移動(dòng)產(chǎn)品的，因此我們可以放心的使用 HTML5 的 localStorage 進(jìn)行緩存操作，緩存部分代碼如下：

artTemplate （http://aui.github.io/artTemplate）一種全新的 javascript 模板引擎，它采用了預(yù)編譯的方式讓性能有了質(zhì)的飛躍，并充分利用 javascript 引擎特性，使得其性能無(wú)論在前端還是后端都有極其出色的表現(xiàn)。但是在實(shí)際應(yīng)用中我們發(fā)現(xiàn)，和Ajax配合后通常會(huì)產(chǎn)生很多的 Template，這些 Template 都堆積在頁(yè)面源碼中時(shí)間一長(zhǎng)難免會(huì)越來(lái)越多，影響頁(yè)面加載的字節(jié)數(shù)，讓頁(yè)面越來(lái)越大。
我們對(duì)此進(jìn)行了優(yōu)化，由于我們的業(yè)務(wù)主要是針對(duì)移動(dòng)產(chǎn)品的，因此我們可以放心的使用 HTML5 的 localStorage 進(jìn)行緩存操作，緩存部分代碼如下：

復(fù)制代碼

這時(shí)，我們可以把諸多的 Template 分門(mén)別類(lèi)的存放在不同的文件中，比如把首頁(yè)的 Template 代碼存放在 tpl_index.html 中，列表頁(yè)的 Template 代碼存放在 tpl_list.html 中。每個(gè)文件中可以放多個(gè) Template 定義，文件內(nèi)容如下：

<script id="header" type="text/html">
<div class="header"><h3><%= header.name %></h3></div>
</script>
<script id="hotList" type="text/html">
<ul>
<% for(i = 0; i < list.length; i++){ %>
<li tid="<%= list[i].tid %>"><%= list[i].subject %></li>
<% } %>
</ul>
</script>
······

復(fù)制代碼

在我們使用的時(shí)候，直接引用文件即可，如下：

TC.load("tmpl/tpl_list.html");

復(fù)制代碼

首次訪(fǎng)問(wèn)此函數(shù)時(shí)，會(huì)調(diào)用 tmpl/tpl_list.html 文件并緩存到 localStorage 中，以后會(huì)直接從 localStorage 中獲取 Template 的內(nèi)容，直到 TC.VERSION 中的值變化，才會(huì)重新調(diào)用文件。從而減少了主頁(yè)面請(qǐng)求的字節(jié)數(shù)。

用過(guò) artTemplate 的人會(huì)習(xí)慣直接把一些內(nèi)容很短的模板直接寫(xiě)在 JS 里，類(lèi)似下面

template.compile('header', '<div class="header"><h3><%= header.name %></h3></div>');

復(fù)制代碼

當(dāng)然這樣更省事。

此方案的是保證減少頁(yè)面請(qǐng)求字節(jié)及頁(yè)面請(qǐng)求數(shù)的目的下還能做到方便維護(hù)而提供的！

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

歡迎光臨 Discuz! 官方交流社區(qū) (http://www.9999xn.com/)

久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线