art-Template.js

前端模板:前端(html)和数据(请求到的数据)合并在一起,拼接合并渲染生成HTML。

 1.什么是art-template

        前端高性能模板,采用预编译,所以性能超级好

        1.优点:

            性能强,资源比较小

            有预编译,使用+=的字符串拼接方式,更加高性能,速度更快

        2.基本语法

            1.{{var}}模板语法--变量用双层花括号包裹

            2.条件表达式

                {{if admin}}

                  相应的html模板

                {{else if code>0}}

                  相应的html模板

                {{else}}

                    相应的html模板

                {{/if}} 

                //条件的终结-几乎等同于js的if

            3.遍历表达式

                {{each arr as value index}}

                    <p>当前{{index}}项的值为{{value}}</p>

                    //arr就是我们要遍历的对象,value就是当前遍历的子项,index就是当前子项在arr里面的下标

                {{/each}}

说明:这里我都是写的简单的表达式,没有写原生的,反正不用,何必写入。以上。

        3.使用步骤

            1.引入对应的js

            2.编写模板

            3.模板与变量合并与渲染,生成html

            4.通过dom操作,将相应的html放到指定的位置

               简单示例如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="wrap"></div>

    <script type="text/html" id="Values">

      {{each ListInfo as List}}

            {{List}}

      {{/each}}

    </script>

    <script src="./js/template.js"></script>

    <script>

      var data = {

          "name":"LBX",

          "ListInfo":[1,2,3,4,5,6]

      }

            var newhtml = template('Values',data); 

            //将数据data加载到id位Values的模板里面去

            document.getElementById("wrap").innerHTML = newhtml; 

            //将拼接好的html加入到指定的id里面去

    </script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,843评论 1 45
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,144评论 0 2
  • 【复盘】2018.10.26 你有多久没畅聊了? 文/阡陌 【今日任务】 马甲线养成记 瑜伽(完成) 点名,提前跟...
    是阡陌呀阅读 216评论 0 2
  • 恍恍惚惚 想这些许年来如何过活我自己大概也说不清 记忆里好像从那时起就一步一步错的不可收拾 愈来愈糟糕 直至现在...
    橘喵_阅读 130评论 0 0
  • 久久期盼的, 是过年的喜悦, 依依不舍的, 是温暖的被窝。 我知道, 放纵任性, 会使人疯狂着魔。 我知道, 叮咛...
    长风潇雨阅读 426评论 17 12

友情链接更多精彩内容