js中模板化开发，text/template

来源：互联网发布：上海知行生物科技传销编辑：程序博客网时间：2024/05/22 05:27

JavaScript标签中有时候会看见<script type="text/tmplate" >,大概就是一个放置模板的地方,而这些东西并不显示在页面,我们暂且就把它当成一个容器.百度查了一下也没查到怎么个用法,所以自己就写了一下代码,以便应用这些模板内容。

我们举个例子,在script标签中创建一个模板.

这就是等下我们要用的模板,为了能使用模板中的内容{string},我们需要写js,大概原理就是,我们取模板的内容,正则匹配出所有的内容，然后用其他的东西替换掉,把替换后的字符串放置到另一个容器中。那我们就来创建一个函数

当我们要应用模板的时候,我们需要有一个<div id="Container"></div>,然后应用我们创建的函数去加载模板

//首先我们需要创建一个新的对象
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>

//我们可以修改配置项,让值为空的模板标签显示出我们想要的结果，默认为空
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>

1 0