JS之Ajax请求数据后渲染数据

Ajax请求完接口之后拿到数据再使用JS，在内进行拼接渲染结构，代码总觉得不太够优雅，于是想到了字面量方式

优雅的渲染结构方式

先创建一个模板（这里的script type="text/template" 是不会渲染结构也不会报JS错误），将需要渲染替换的字段使用{{}}进行包裹，例：{{Title}}

<script type="text/template" id="teamEvaluate">
        <li class="clearfix">
            <div class="doctor-images">
                <img src="{{Headimg}}" />
                <p>{{Title}}</p>
            </div>
            <div class="doctor-evaluate clearfix oh">
                <div class="evaluate-top">
                    <h4 class="disease-name">疾病名称：{{Disease}}</h4>
                    <div class="service-tag">
                        <span>服务态度：<strong>10.0</strong> </span>
                        <span>治疗效果：<strong>10.0</strong></span>
                        <div class="star-score"></div>
                    </div>
                </div>
                <div class="evaluate-desc">
                    <p>{{Content}}</p>
                    <p class="evaluate-date"><span>{{AddTime}}</span><span>点评类型：医院就诊</span></p>
                </div>

                <div class="replay-con">
                    [医生回复]：{{ReplyMsg}}
                </div>

            </div>
        </li>
    </script>

敲黑板，重点JS部分来了（这里就不写ajax请求了）

var PageHandle={
            //拿到了数据并调用该方法
            DrawEvaluate: function (data) {
		var htmlstr = "";
                //拿到上面script申明的模板
		var temphtmlstr = document.querySelector("#teamEvaluate").innerHTML;
                //将数据集合逐一进行遍历渲染，Reder
		for (var i = 0; i < data.length; i++) {
			var obj = data[i];
                        //每个即将渲染的htmlDOM
			var repstr = temphtmlstr; 
                        //将数据对象的key和值拿到，并且替换DOM里面的{{key}}，
			for (var key in obj) {
				repstr = repstr.replace("{{" + key + "}}", obj[key]);
			}
                        //将单个结果进行添加到总体结果
			htmlstr += repstr;
		}
                //这里return不return都无所谓，再里面或外面也可以进行追加到想放到的地方
		//$("").append(htmlstr);
		return htmlstr;
	     }
      }