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

最后插入到对应地方即可，欢迎提问