js中模板化開發，text/template
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>