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;
	     }
      }