模板引擎之hogan.js

时间 2019-11-13

原文原文链接

hogan.js 语法简单，且支持循环数据：

基本语法：

　　1. 标签能够嵌套使用css

　　2. {{data}} 转义的变量，不会渲染html标签

　　3. {{{data}}} 不转义的变量，会渲染html标签，好比接口返回的富文本编辑器的内容

　　4. {{#list}} {{/list}} 列表循环 / 真值判断,只能循环数组，不能循环字符串

　　5. {{^list}} {{/list}} 空列表 / 非真值判断

　　6. {{.}} 枚举的当前元素 //通常都是枚举数组，不能枚举字符串html

　　7. {{!}} 我是注释jquery

注意事项：

　　　　 1. hogan.js 如需作接口数据的逻辑处理，能够先用jqery循环再用hogan去渲染 git

　　　　　例如：一个数组Arr包括6个对象，若是只渲染Arr的话 1. 能够直接将 Arr丢给 hogan去渲染，2. 也能够将Arr用jquery循环后获得每个对象再丢给hogan去渲染；如需取到数组中每个对象的id，而后根据这个id去作其余的操做，只能用第2种方法，由于第1种方法很差保存循环出来的每一项的id，第2种方法能够保存，因此应该先用jqery去循环数组Arr，获得每个对象后再用hogan去渲染AA()函数，获得每个对象的id再去作其余操做; 　　　　　　es6

　　　　　　　　　　$(Arr).each(function (key,val) { 　　　　　　　　 　　　　//数据渲染 　　　　　　　　　　　　 AA(val); 用hogan去渲染 　　　　　　　　　　　　//其余操做 　　　　　　　　　　　　BB(val.id); 用hogan去渲染 　　　　　　　　　　 })

　　　　　2. 接口是对象形式 {"aa": bb} ,能够直接取到 aagithub

　　　　　3. 接口是两层或两层以上的数据循环把接口数据当作标签循环ajax

　　　　　4. 接口是数组形式 [aa,bb], 用枚举 {{.}} 取到 json

　　　　　5. 能够给对象添加一个字段/属性再用hogan渲染出来 obj.aa= bb;segmentfault

　　　　　6. hogan自己支持es6模板字符串，以下所示，可是在先后端不完全分离的状况下极可能会与后端的模板引擎冲突$，致使可使用``,不能使用$,此时注意：写在html文件中会冲突，单独写在js文件中不会冲突，因此建议把逻辑写在单独的js文件。后端

　　　　　　`{{#listaa}} 　　　　　<ul>
        　　　　<div>我叫{{name}}，code=${code}</div>
   　　　　　</ul> 　　　　　{{/listaa}}`;

参考文档：http://www.imooc.com/article/18493 https://segmentfault.com/a/1190000011401896

github地址：https://github.com/twitter/hogan.js 官网：https://twitter.github.io/hogan.js/

亦可引用BootCDN：BootCDN

1、实际项目中的用法以下：

实际项目中的用法：
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/hogan.js/3.0.2/hogan.js"></script>

<script>

    // 取接口数据
    $.ajax({
        url: "1.json",
        //type: "post",
        dataType: "json",
        data: {
            //"appUserId": appUserId,
            //"courseId": courseId
        },
        success: function (response) {
            console.log(response);
            var data = response.data;
            console.log(data);
            // 渲染数据
            bind(data);
        }
    })
    // 渲染数据
    function bind(data) {
        var tpl =
            `{{#listaa}}
                <ul>
                    <div>我叫{{name}}，我今年{{age}}岁，我喜欢吃{{food}}</div>
                    {{#videoList}}
                    <li>{{fileName}}</li>
                    {{/videoList}}

                    {{!注释: 指定渲染的数据对象后，下面的数据均可以直接用 标签名=数据名，好比此处的videoList}}
                </ul>
            {{/listaa}}`;
        var result = Hogan.compile(tpl).render({
            //指定渲染的数据对象，指定渲染的数据对象后，下面的数据均可以直接用 标签名=数据名
            listaa: data
        });
        // 最后添加到指定标签
        $('.box').append(result);
    }

</script>

对应的请求到的 json 数据以下：

{
  "result": true,
  "codeDesc": "获取视频成功",
  "code": "1",
  "data": [
    {
      "name": "lily",
      "age": 18,
      "food": "苹果",
      "videoList": [
        {
          "fileName": "aa"
        }
      ]
    },
    {
      "name": "lucy",
      "age": 20,
      "food": "香蕉",
      "videoList": [
        {
          "fileName": "cc"
        },
        {
          "fileName": "dd"
        }
      ]
    }
  ],
  "msg": "获取视频成功"
}

2、详细使用文档

　　因为公司jsp项目中不支持 ` ` 模板字符串的用法（由于${} 的语法和jsp有冲突），因此本人无心中发现有 hogan.js 这个模板引擎，由于它的语法是 {{}}，不会和jsp冲突。


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/hogan.js/3.0.2/hogan.js"></script>

<div id="box">

</div>
<script>
    // 保存接口数据的对象
    var obj = { data: { "list": [], "num": [1,2,3], "isme": true,//true显示 不显示包括：false、null、undefined、0
　　　　　　　"msg":"信息",

 }, onload: function () { // 定义模板
            // 有key的循环
            var tpl = `{{#list}} <div>我叫{{name}}, 今年{{age}}岁, 最爱吃{{food}}</div>
 {{/list}}`;
            var template = Hogan.compile(tpl); var result = template.render({list: this.data.list}); // 没有key的循环 只能这样写 // var tpl = // `{{#list}} // <div>我叫{{.}}</div> // {{/list}}`; // var template = Hogan.compile(tpl); // var result = template.render({list: this.data.num});

            // 对象型用法 // var tpl = // `{{#list}} // <div>我叫{{msg}}</div> // {{/list}}`; // var template = Hogan.compile(tpl); // var result = template.render({list: this.data});

            // 布尔型用法 // var tpl = // `{{#list}} // <div>我叫张瑞奇</div> // {{/list}}`; // var template = Hogan.compile(tpl); // var result = template.render({list: this.data.isme});

            // 最后添加到指定标签
 $('.box').html(result) } } // 取接口数据
 $.ajax({ url: "${ctxStatic}/z-img/1.json", //type: "post",
 dataType: "json", data: { //"appUserId": appUserId,
            //"courseId": courseId
 }, success: function (response) { console.log(response); var _data = response.data.dataList;//数组
 console.log(_data); // 将取到的数据赋值给obj的data.list
 obj.data.list = _data; console.log(obj.data.list); // 渲染完成
 obj.onload(); // 其余操做
 } }) </script>

两层循环（及两层以上）用法：

1. 两层循环标准的写法以下，项目中使用这种写法：

两层循环 <script>
    var tab = { data: { "aa": [ { "name": "lily", "age": 18, "food": "苹果", "videoList": [ { "fileName": "aa", } ] }, { "name": "lucy", "age": 20, "food": "香蕉", "videoList": [ { "fileName": "cc", }, { "fileName": "dd", } ] } ] }, onload: function () { var tpl = `{{#listaa}} <ul>
                    <div>我叫{{name}}，我今年{{age}}岁，我喜欢吃{{food}}</div>
 {{#videoList}} {{!注释: 指定渲染的数据对象后，下面的数据均可以直接用 标签名=数据名}} <li>{{fileName}}</li>
 {{/videoList}}
                </ul>
 {{/listaa}}`;
            var template = Hogan.compile(tpl); var result = template.render({ listaa: this.data.aa //指定渲染的数据对象
 }); // 最后添加到指定标签
 $('.box').append(result); } } // 调用
 tab.onload(); </script>

2. 这种写法是和jquery相结合的，不推荐此种写法，建议使用上面的第一种写法

<script>
    var tab = {
        data: {
            "list": [
                {
                    "name": "lily",
                    "age": 18,
                    "food": "苹果",
                    "videoList": [
                        {
                            "fileName": "aa",
                        },
                        {
                            "fileName": "bb",
                        }
                    ]
                },
                {
                    "name": "lucy",
                    "age": 20,
                    "food": "香蕉",
                    "videoList": [
                        {
                            "fileName": "cc",
                        },
                        {
                            "fileName": "dd",
                        }
                    ]
                }
            ],
            "num": [1, 2, 3],
            "isme": true,//true显示 false不显示
            "msg": "信息",
        },
        onload: function () {
            // 定义模板
            // 两层循环
            var tpl =
                `<ul>
                    {{#aa}}
                    <div>{{name}}</div>
                    {{/aa}}
                    {{#bb}}
                    <li>{{fileName}}</li>
                    {{/bb}}
                </ul>`;
            var template = Hogan.compile(tpl);
            $(this.data.list).each(function (key,val) {
                //console.log(val);
                var result = template.render({
                    aa: val,
                    bb: val.videoList
                });
                // 最后添加到指定标签
                $('.box').append(result);
            })
        }
    }
    // 调用
    tab.onload();

</script>