JavaScript标签中有时候会看见<script type="text/tmplate" >,大概就是一个放置模板的地方,而这些东西并不显示在页面,我们暂且就把它当成一个容器.百度查了一下也没查到怎么个用法,所以自己就写了一下代码,以便应用这些模板内容。
我们举个例子,在script标签中创建一个模板.
<script type="text/tmplate" id="tmp">
<div>
<ul>
<li class="{name}">姓名:{name}</li>
<li>年龄:{age}</li>
<li>电话:{phone}</li>
</ul>
</div>
< /script>
这就是等下我们要用的模板,为了能使用模板中的内容{string},我们需要写js,大概原理就是,我们取模板的内容,正则匹配出所有的内容,然后用其他的东西替换掉,把替换后的字符串放置到另一个容器中。那我们就来创建一个函数
function getTemplate(tplID){
var _this=this; //保存自身指针
var assignArr=[]; //定义一个哈希数组,存放assign的k,v
var config={ //配置项
limitL:"{",
limitR:"}",
voidModify:'', //如果模板元素无值,则显示为空
}
var limitArr={ //私有变量,存储转义定界符
'<':'<',
'>':'>',
};
var encodeLimter=function(str){ //私有方法,转义字符
for(var tmp in limitArr){
if(str.search(tmp)>=0){
str=str.replace(tmp,limitArr[tmp]);
}
}
return str;
};
this.action={ //公有方法,修改定界符,空参数
setLimitL:function(str){
config.limitL=encodeLimter(str);
return _this;
},
setLimitR:function(str){
config.limitR=encodeLimter(str);
return _this;
},
setVoidModify:function(str){
config.voidModify=str;
return _this;
}
}
this.assign=function(key,value){
//赋值,创建带有定界符哈希数组
assignArr[config.limitL+key+config.limitR]=value;
return this;
};
this.display=function(elementID){
try{
var targetID=elementID||tplID; //如果elementID为空,说明模板容器与放置容器是同一个
var tmplate=document.getElementById(tplID).innerHTML; //获取模板容器的内容
var ptn=new RegExp(config.limitL+'(\\w+)?'+config.limitR,'g'); //创建正则表达式
var tmpRegArr=tmplate.match(ptn); //存储所有符合条件的模板元素
for(var i=0;i<tmpRegArr.length;i++){
//移除模板内容中的标签,替换为值
var changeStr=assignArr[tmpRegArr[i]]||config.voidModify;
tmplate=tmplate.replace(tmpRegArr[i],changeStr);
}
}catch(e){
console.log(e.message);
console.log("The limit code is not accord with your set");
}
document.getElementById(targetID).innerHTML= tmplate;
return this;
}
};
当我们要应用模板的时候,我们需要有一个<div id="Container"></div>,然后应用我们创建的函数去加载模板
<script type="text/javascript">
//首先我们创建一个对象存储数据,当然也可以不创建,使用assign函数来赋值
var tmpObj={
name:'萧十三楼',
age:25,
phone:18888888888,
QQ:905519160
}
//首先我们需要创建一个新的对象
var container=new getTemplate('tmp');
for(var tmp in tmpObj){
//通过for循环,把数据中的值赋值到模板标签里面
container.assign(tmp,tmpObj[tmp]);
}
//加载放置容器
container.display('container');
< /script>
还有另一个写法是,我们在html中创建模板,然后替换他本身
<div id="el">
<ul>
<li class="{class}">姓名:{name}</li>
<li>年龄:{age}</li>
<li>电话:{phone}</li>
<li>QQ:{QQ}</li>
</ul>
< /div>
<script type="text/javascript">
//html标签做模板
var elObj={
name:'萧十二楼',
phone:18815285569,
class:'show',
QQ:905519160
}
var el=new getTemplate('el');
//我们可以修改配置项,让值为空的模板标签显示出我们想要的结果,默认为空
el.action.setVoidModify('值为空')
.action.setLimitL('<{')
.action.setLimitR('}>');
for(var tmp in elObj){
el.assign(tmp,elObj[tmp]);
}
//display不写参数,则模板项与放置项是同一个容器
el.display();
</script>
这样我们就可以把模板中的内容应用出来,如果需要有大量赋值的情况下,应用这种方法还是很方便的,当然现在有很多的开发框架,这个只是给大家一个参考,让大家明白,我们还可以这么做。
完整版代码:
<!DOCTYPE html><html>
<head>
<title>js模板加载</title>
</head>
<body>
<script type="text/javascript">
/*
* getTemplate(id tplID) 参数,模板容器的id
* getTemplate.assign(key,value) 赋值,将数据赋值到模板中
* getTemplate.display(str elementID) 加载模板内容,将模板内容放置到elementID中
* 如果elementID为空,说明模板容器与放置容器是同一个
* getTemplate.action.setLimitR/setLimitL(str) 设置左右定界符
*
*/
function getTemplate(tplID){
var _this=this; //保存自身指针
var assignArr=[]; //定义一个哈希数组,存放assign的k,v
var config={ //配置项
limitL:"{",
limitR:"}",
voidModify:'', //如果模板元素无值,则显示为空
}
var limitArr={ //私有变量,存储转义定界符
'<':'<',
'>':'>',
};
var encodeLimter=function(str){ //私有方法,转义字符
for(var tmp in limitArr){
if(str.search(tmp)>=0){
str=str.replace(tmp,limitArr[tmp]);
}
}
return str;
};
this.action={ //公有方法,修改定界符,空参数
setLimitL:function(str){
config.limitL=encodeLimter(str);
return _this;
},
setLimitR:function(str){
config.limitR=encodeLimter(str);
return _this;
},
setVoidModify:function(str){
config.voidModify=str;
return _this;
}
}
this.assign=function(key,value){
//赋值,创建带有定界符哈希数组
assignArr[config.limitL+key+config.limitR]=value;
return this;
};
this.display=function(elementID){
try{
var targetID=elementID||tplID; //如果elementID为空,说明模板容器与放置容器是同一个
var tmplate=document.getElementById(tplID).innerHTML; //获取模板容器的内容
var ptn=new RegExp(config.limitL+'(\\w+)?'+config.limitR,'g'); //创建正则表达式
var tmpRegArr=tmplate.match(ptn); //存储所有符合条件的模板元素
for(var i=0;i<tmpRegArr.length;i++){
//移除模板内容中的标签,替换为值
var changeStr=assignArr[tmpRegArr[i]]||config.voidModify;
tmplate=tmplate.replace(tmpRegArr[i],changeStr);
}
}catch(e){
console.log(e.message);
console.log("The limit code is not accord with your set");
}
document.getElementById(targetID).innerHTML= tmplate;
return this;
}
};
</script>
<script type="text/tmplate" id="tmp">
<div>
<ul>
<li>姓名:{name}</li>
<li>年龄:{age}</li>
<li>电话:{phone}</li>
<li>QQ:{QQ}</li>
</ul>
</div>
</script>
<div id="container"></div>
<!-- 分隔线 -->
<div id="el">
<ul>
<li class="{class}">姓名:<{name}></li>
<li>年龄:<{age}></li>
<li>电话:<{phone}></li>
<li>QQ:<{QQ}></li>
</ul>
</div>
<div id="el2"></div>
<script type="text/javascript">
//text/tempLate 模板
var tmpObj={
name:'萧十三楼',
age:25,
phone:18888888888,
QQ:905519160
}
var container=new getTemplate('tmp');
for(var tmp in tmpObj){
container.assign(tmp,tmpObj[tmp]);
}
container.display('container');
</script>
<script type="text/javascript">
//html标签做模板
var elObj={
name:'萧十二楼',
phone:18888888888,
class:'show',
QQ:905519160
}
var el=new getTemplate('el');
el.action.setVoidModify('值为空')
.action.setLimitL('<{')
.action.setLimitR('}>');
for(var tmp in elObj){
el.assign(tmp,elObj[tmp]);
}
el.display();
</script>
</body>
</html>