模板引擎之hogan.js

hogan.js 語法簡單，且支持循環數據：

基本語法：

　　1. 標簽可以嵌套使用

　　2. {{data}} 轉義的變量，不會渲染html標簽

　　3. {{{data}}} 不轉義的變量，會渲染html標簽，比如接口返回的富文本編輯器的內容

　　4. {{#list}} {{/list}} 列表循環 / 真值判斷,只能循環數組，不能循環字符串

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

　　6. {{.}} 枚舉的當前元素  //一般都是枚舉數組，不能枚舉字符串

　　7. {{!}} 我是注釋

注意事項：

　　　　 1. hogan.js 如需做接口數據的邏輯處理，可以先用jqery循環再用hogan去渲染   

　　　　　例如： 一個數組Arr包括6個對象，如果只渲染Arr的話  1. 可以直接將 Arr丟給 hogan去渲染，2. 也可以 將Arr用jquery循環后得到每一個對象再丟給hogan去渲染；如需取到數組中每一個對象的id，然后根據這個id去做其他的操作，只能用第2種方法，因為第1種方法不好保存循環出來的每一項的id，第2種方法可以保存，所以應該先用jqery去循環數組Arr，得到每一個對象后再用hogan去渲染AA()函數，得到每一個對象的id再去做其他操作;   　　　　　　

　　　　　　　　　　$(Arr).each(function (key,val) { 　　　　　　　　 　　　　//數據渲染 　　　　　　　　　　　　 AA(val); 用hogan去渲染 　　　　　　　　　　　　//其他操作 　　　　　　　　　　　　BB(val.id); 用hogan去渲染 　　　　　　　　　　 }) 

　　　　　2. 接口是對象形式  {"aa": bb} ,可以直接取到  aa

　　　　　3. 接口是兩層或兩層以上的數據循環  把接口數據當做標簽循環

　　　　　4. 接口是數組形式 [aa,bb],  用枚舉 {{.}}  取到 

　　　　　5. 可以給對象添加一個字段/屬性再用hogan渲染出來   obj.aa= bb;

　　　　　6. hogan本身支持es6模板字符串，如下所示，但是在前后端不徹底分離的情況下很可能會與后端的模板引擎沖突$，導致可以使用``,不能使用$,此時注意：寫在html文件中會沖突，單獨寫在js文件中不會沖突，所以建議把邏輯寫在單獨的js文件。

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

 　　　　 7. 

　　　

參考文檔：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

一、實際項目中的用法如下：

實際項目中的用法：
<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 數據如下：

 對應的請求到的 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": "獲取視頻成功"
}

 

二、詳細使用文檔

　　由於公司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>