javascript代码实例教程-JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

发布时间:2019-01-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。  最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemplate。

 

     项目之初用的是BaiduTemplate引擎,项目完成后发布到互联网,发现数据量大时,加载速度慢了点,就考虑换其它模板引擎是否提高渲染效率,在网上查找、对比后发现ArtTemplate更好一点,就深入了解与学习了下,两个引擎语法有点差别,但结果是一至的,下面具体介绍一下两个引擎的使用情况:

 

 

 

BaiduTemplate 代码引入

复制代码

<script tyPE="text/javascript">

    VAR htML;

    var BT = baidu.template;

    $(function () {

        $.ajax({

            type: "GET",

            url: "/Json/Analysis.js",

            dataType: &#39;json',

            success: function (data) {

                html = bt('t:Jtlm_Analysis', {

                    list: data

                });

                document.getElementById('Jtlm_Analysis').innerHTML = html;

            }

        });

    });

</script>

复制代码

模板定制

 

复制代码

<script id="t:Jtlm_Analysis" type="text/html">

    <% for(var i=0;i< list.length;i++){%>

    <p class="widget-box transparent collapsed">

        <p class="widget-header widget-header-flat">

            <h6 class="orange">

                <a href="/d/d/<%=list[i].Id%>" alt="<%=list[i].TITle%>" title="<%=list[i].Title%>" target="_blank"><%=list[i].Title%></a>

            </h6>

            <p class="widget-toolbar">

                <a href="#" data-action="collapse">

                    <i class="icon-chevron-up"></i>

                </a>

                <a href="#" data-action="close">

                    <i class="icon-remove"></i>

                </a>

            </p>

            <p class="widget-toolbar">

                <a>

                    发布时间:<%=list[i].UpdateOn%>

                </a>

            </p>

        </p>

        <p class="widget-body">

            <p style="display: block;">

                <p class="widget-main">

                    <p class="alert alert-success">

                        <%=list[i].Summary%>【<a href="/d/d/<%=list[i].Id%>" target="_blank">详情</a>】

                    </p>

                </p>

            </p>

        </p>

    </p>

    <%}%>

</script>

复制代码

渲染结果

 

 

 

 

 

ArtTemplate 代码引入

 

复制代码

 $.ajax({

            type: "GET",

            url: "Json/HomeJsonFirst.js?r=" + Math.random(),

            dataType: 'json',

            success: function (data) {

                //Tab 切换

                html = template('t:layout_2', {

                    list: data.Layout_2

                });

                document.getElementById('layout_2').innerHTML = html;

                //看点

                html = template('t:layout_6', {

                    title: JLConsts.Group_Layout_6_Name,

                    list: data.Layout_6

                });

                document.getElementById('layout_6').innerHTML = html;

                //开心一刻

                html = template('t:layout_7', {

                    title: JLConsts.Group_Layout_7_Name,

                    list: data.Layout_7

                });

复制代码

 

 

ArtTemplate 模板

 

复制代码

<script id="t:layout_8" type="text/html">

    <h4>{{title}}<i></i></h4>

    {{each list as value i}}

    <dl class="CF">

        {{each value.HList as a i}}

        <dd>

            <a title="{{a.Title}}" alt="{{a.Title}}" target="_blank" href="/Detail/d/{{a.Id}}">

                <img src="{{a.ImgSrc}}" title="{{a.Title}}" alt="{{a.Title}}" />

            </a>

        </dd>

        <dt>

            <a target="_blank" href="/Detail/d/{{a.Id}}" title="{{a.Title}}" alt="{{a.Title}}">{{a.Title}}</a>

        </dt>

        {{/each}}

    </dl>

    <ul>

        {{each value.List as l i}}

        <li>

            {{each l.List as a i}}

            <a title="{{a.Title}}" alt="{{a.Title}}" target="_blank" href="/Detail/d/{{a.Id}}">{{a.Title}}</a>

            {{/each}}

        </li>

        {{/each}}

    </ul>

    {{/each}}

</script>

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用全部内容,希望文章能够帮你解决javascript代码实例教程-JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。