封装格式化函数定义模板

Myth丶恋晨 2021-09-02 09:51 334阅读 0赞

1 定义模板 调整样式

2 发送ajax获取字典

var list=document.getElementsByTagName("ul")[0]
    
    调用接口：
    
       Ajax.get("/getMsg", "", function(data) {
    
       for (var i = 0; i < data.data.length; i++) {
    
                // 下面的方式是借助format函数 以及接口中定义的内容
    
                var result = format(tplStr, data.data[i]);
                  
                //上树
                list.innerHTML += result;
            }
     });

3 格式化

//获取template
     var template = document.getElementById("template");
    //获取template中的内容
     var tplStr = template.innerHTML;
    
    
     // 定义格式化函数
          /**
           * format 格式化函数
           * @tpl  模板字符串   ex: <div><%hello%></div>
           * @dic  字典对象     ex: {hello: "你好"}
           * @return 格式化之后的字符串 也就是html文案  ex: <div>你好</div>
          */
    
    function format(tpl, dic) {
      // 定义正则表达式
      var reg = /<%([a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*)%>/g;
      // 替换
      return tpl.replace(reg, function(match, $1) {
        // 以.分割
        var arr = $1.split(".");
        // 备份dic
        var result = dic;
        // 循环开始
        for (var i = 0; i < arr.length - 1; i++) {
          result = result[arr[i]];
        }
        return result[arr[i]];
      });
    }
    
    
    
    使用调用接口的内容 然后 遍历  格式化上树