JS封裝HTML <scrtpt type ="text/HTML"> JSPOP跨域請求

在實際開發過程中可能會遇到，用 Ajax或和JSOP（可跨域請求）後臺數據，然後利用JSONP格式返回來後在前端顯示，最笨的方法就是用一個

var html="<div>...</div>"
然後採用 $(".#id").append(html);的形式進行append到對應的容器當中去，這種方式比較死板，不利於templte的維護，下面介紹另外一種方法供參考（熟悉react的課繞道，大神亦可忽略）

<script type="text/html" id="relateProBox-tmpl">
<li style="float: left;">
<p class="catProCont">
<a href="" title="XXX">
<img id="triggerPicId"[pid] width="80" height="80" alt=""
 />
</a>
</p>
<a href="URL" title="Desc" class="proName">TTTTTTT<span class="hlNew"></span></a>
</li>

上面是簡化後的模板（僅供參考），注意[pid]是我最終需要用json裏面的數據替換的

訪問API獲取數據（採用原生js，也可以用Jquery。都是一眼的）

window.οnlοad=function(){
	
var s=document.createElement("script"); s.async=true; s.src="your api url here";
console.log(document.getElementsByTagName("script"));
var s2=document.getElementsByTagName("script")[0]; s2.parentNode.insertBefore(s,s2);
};
var array=new Array()

    //該函數的函數名必須與AIP返回來的callbackFunction名一致
	function CLIENTCALLBACK(response) {
	console.log(response);
		var id;
		for (i = 0; i < response.length; i++) {
			Object obj = new Object;
			obj.id=response[i].id;//構造對象，將需要的數據組成成對象
			array.push(obj);//此處爲數組賦值
		}
	}
	
	//主要用於遍歷和替換
	
	function replaceHtml(html,array){
		var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');//i g m是指分別用於指定區分大小寫的匹配、全局匹配和多行匹配，此處將匹配[]
		
		var finalHtml = '' ;
		
		for (var i=0;i<array.length;i++ ){
			
			finalHtml += html.replace(reg, function (node, key) { return { 'pid': array[i].id }[key]; }); //注意pid和需要替換的值
		}
		return finalHtml;
	}$("#XX").append(replaceHtml(document.getElementById('relateProBox-tmpl').innerHTML,array));

最後插入到對應地方即可，歡迎提問