基于 JS artTemplate 模板引擎 Template 加载的优化

admin · 发表于 2022-8-14 10:05:13

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

artTemplate （http://aui.github.io/artTemplate）一种全新的 javascript 模板引擎，它采用了预编译的方式让性能有了质的飞跃，并充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。但是在实际应用中我们发现，和Ajax配合后通常会产生很多的 Template，这些 Template 都堆积在页面源码中时间一长难免会越来越多，影响页面加载的字节数，让页面越来越大。

我们对此进行了优化，由于我们的业务主要是针对移动产品的，因此我们可以放心的使用 HTML5 的 localStorage 进行缓存操作，缓存部分代码如下：

artTemplate （http://aui.github.io/artTemplate）一种全新的 javascript 模板引擎，它采用了预编译的方式让性能有了质的飞跃，并充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。但是在实际应用中我们发现，和Ajax配合后通常会产生很多的 Template，这些 Template 都堆积在页面源码中时间一长难免会越来越多，影响页面加载的字节数，让页面越来越大。我们对此进行了优化，由于我们的业务主要是针对移动产品的，因此我们可以放心的使用 HTML5 的 localStorage 进行缓存操作，缓存部分代码如下：

复制代码

这时，我们可以把诸多的 Template 分门别类的存放在不同的文件中，比如把首页的 Template 代码存放在 tpl_index.html 中，列表页的 Template 代码存放在 tpl_list.html 中。每个文件中可以放多个 Template 定义，文件内容如下：

<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>······

复制代码

在我们使用的时候，直接引用文件即可，如下：

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

复制代码

首次访问此函数时，会调用 tmpl/tpl_list.html 文件并缓存到 localStorage 中，以后会直接从 localStorage 中获取 Template 的内容，直到 TC.VERSION 中的值变化，才会重新调用文件。从而减少了主页面请求的字节数。

用过 artTemplate 的人会习惯直接把一些内容很短的模板直接写在 JS 里，类似下面

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

复制代码

当然这样更省事。

此方案的是保证减少页面请求字节及页面请求数的目的下还能做到方便维护而提供的！

此功能在打通版微社区中实现！

©dz插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
如有侵权请邮件与我们联系处理:discuz-x@qq.com（手机随时接收邮件）并出示相关证明以便删除。敬请谅解！

基于 JS artTemplate 模板引擎 Template 加载的优化

马上注册，免费下载更多dz插件网资源。

相关帖子

回复

More猜你喜欢

关于我们

服务支持

discuzaddons@vip.qq.com