Most of the powerful template engines need to parse the template syntax, which may cause performance problems. By dividing a large template engine into multiple independent template controls based on different presentation requirements, the processing complexity can be reduced to provide processing performance, you can flexibly combine these template controls as needed to obtain a customizable template function library.
A template control specifies its template syntax and js api. This is a js implementation of the repeater control:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "gb2312"/>
<Title> JavaScript Repeater control </title>
</Head>
<Body>
<Div id = "crossRate">
<! -- PlaceHolder {-->
<Table width = "815" class = "table-data">
<Tr>
<Th> Code </th>
<Th> name </th>
<Th> latest price </th>
<Th> increase/decrease </th>
<Th> increase/decrease </th>
<Th> opening </th>
<Th> maximum </th>
<Th> Minimum </th>
<Th> Accept </th>
</Tr>
</Table>
<! -- PlaceHolder} -->
<Script type = "text/template" id = "crossRateHeader">
<Table width = "815" class = "table-data">
<Tr>
<Th> Code </th>
<Th> name </th>
<Th> latest price </th>
<Th> increase/decrease </th>
<Th> increase/decrease </th>
<Th> opening </th>
<Th> maximum </th>
<Th> Minimum </th>
<Th> Accept </th>
</Tr>
</Script>
<Script type = "text/template" id = "crossRateItem">
<Tr>
<Td >{$ dataRow [1]} </td>
<Td >{$ dataRow [2]} </td>
<Td >{$ dataRow [5]} </td>
<Td >{$ dataRow [17]} </td>
<Td >{$ dataRow [18]} </td>
<Td >{$ dataRow [4]} </td>
<Td >{$ dataRow [6]} </td>
<Td >{$ dataRow [7]} </td>
<Td >{$ dataRow [3]} </td>
</Tr>
</Script>
<Script type = "text/template" id = "crossRateFooter">
</Table>
</Script>
</Div>
<Script>
// View
(Function (ns ){
Function init (){
Var container = document. getElementById ("crossRate ");
Container. setAttribute ("data-headertemplate", document. getElementById ("crossRateHeader"). text );
Container. setAttribute ("data-itemtemplate", document. getElementById ("crossRateItem"). text );
Container. setAttribute ("data-footertemplate", document. getElementById ("crossRateFooter"). text );
}
Function render (dt ){
Var container = document. getElementById ("crossRate "),
Headerhtml = container. getAttribute ("data-headertemplate "),
Rowhtml = container. getAttribute ("data-itemtemplate "),
Footerhtml = container. getAttribute ("data-footertemplate ");
Var repater = new Repater (headerhtml, rowhtml, footerhtml );
Var dataRow = [];
For (var I = 0, n = dt. length; I <n; I ++ ){
DataRow = dt [I]. split (",");
Repater. set ("dataRow", dataRow );
Repater. parse ();
}
Container. innerHTML = repater. toHTML ();
}
Ns. crossRate = {
Init: init,
Render: render,
Fill: function (data ){
Render (data );
}
};
Ns. crossRate. init ();
} (Window ));
// Asynchronously Retrieve data Rendering data
Var datas = ["USDEUR0, USDEUR, USD euro, 0.7731, 0.7732, 0.7723, 0.7734, 0.7717, 0.0000, 0.7731, 0.0000,-0.0008,-0.10%, 0.0000, 0.0000, 0.0000, 0,-7.7625, 7.7633, 7.7621, 13:49:53, 3 "," USDHKD0, USDHKD, USD, 7.7634, 7.7617, 0.0000, 7.7625, 0.0000, 0.0004, 0.01%,-0.0000,-0.0000,-0.0000, 0,-, 13:49:49, 3 "," USDJPY0, USDJPY, USD 79.71, 79.73, 79.62, 79.77, 79.57, 0.00, 79.71, 0.00,-0.09,-0.11%, 0.00,-1, 0,-1, -1, 0.00, 0.00, 13:50:13, 3 "," USDCHF0, USDCHF, USD ruilang, 0.9285, 0.9287, 0.9276, 0.9289, 0.9266, 0.0000, 0.9285, 0.0000, 0.0009,-0.10%,-0.0000, 0.0000, 0.0000, 1.6134, 0,-, 13:50:02, 3 "," GBPUSD0, GBPUSD, £, 1.6136, 1.6138, 1.6144, 1.6121, 0.0000, 1.6134, 0.0000, 0.0004, 0.02%, 0.0000, 0.0000, 0.0000, 13:50:04, 3 "];
// Fill in data to view
CrossRate. fill (datas );
// Repater template control www.2cto.com
Function Repater (headerhtml, rowhtml, footerhtml ){
Var _ this = this;
Var n = 0;
_ This. cache = [];
_ This. dic = {};
_ This. header = headerhtml;
_ This. row = rowhtml;
_ This. footer = '</table> ';
If (headerhtml) _ this. header = headerhtml;
If (rowhtml) _ this. row = rowhtml;
If (footerhtml) _ this. footer = footerhtml;
_ This. set = function (tag, val ){
This. dic [tag] = val;
};
_ This. parse = function (dic ){
Var row = this. row,
Dic = dic | this. dic,
Re =/\ {\ $ (\ w + )(? : \ [(\ D +) \])? (? : \ | (\ W + ))? \}/G,
Html;
Html = row. replace (re, function (a, B, c, d ){
Var val;
If (typeof dic [B] = "undefined "){
Return B;
}
If (dic [B]. constructor = Array ){
Val = dic [B] [c];
} Else {
Val = dic [B];
}
If (Repater [d] | window [d]) {// Modifier
Val = (Repater [d] | window [d]) (val );
}
Return val;
});
_ This. cache [n ++] = html;
Return html;
};
_ This. toHTML = function (args ){
Var cache = _ this. cache,
Result;
_ This. cache = [];
N = 0;
Result = _ this. header + cache. join ("") + _ this. footer;
For (I in args ){
If (args. hasOwnProperty (I )){
Result = result. replace ("{$" + I + "}", args [I]);
}
}
Return result;
};
}
</Script>
</Body>
</Html>
From web Programming