自編 jtle(javascript template language engine) javascript模板語言引擎, 輕松處理json數據! jtle是個簡單的javascript板模解析器,可以輕松操作json數據,基于json數據的ajax應用可以很方便的實現數據顯示邏輯!
修改了在firefox下不能正確運行問題!
一、測試例子(testJtle.html)
<html>
<head>
<script src="jtle.js"></script>
<script>
window.onload = function() {
var menus = new jtle({el:"source"});
menus.parse({menus:[{url:"http://www.163.com",subject: "163.com"}, {url:"http://www.baidu.com",subject: "百度"}]});
var books = new jtle({el:"bookList"});
books.parse({books:[
{name:"hibernate實戰教程", author:"李永勝", plsh:"李永勝出版社", price: "50.00"},
{name:"ajax and jtle文檔", author:"李永勝", plsh:"李永勝出版社", price: "0.00"},
{name:"spring webflow教程", author:"李永勝", plsh:"李永勝出版社", price: "60.00"},
{name:"dwr應用", author:"李永勝", plsh:"李永勝出版社", price: "30.00"}
]});
};
</script>
</head>
<body>
<div id="source">
<%
for(var i = 0; i < menus.length; i++) {
var menu = menus[i];
%>
<a href="${menu.url}">${menu.subject}</a>
<% } %>
</div>
<div id="bookList">
<table width="80%">
<tr bgcolor="#DEB887"><td>書籍名稱</td><td>作者</td><td>出版社</td><td>價格</td></tr>
<% for(var n = 0; n < books.length; n++) {
var book = books[n];
if(n % 2 != 0) {
%>
<tr bgcolor="#DCDCDC"><td>${book.name}</td><td>${book.author}</td><td>${book.plsh}</td><td>${book.price}</td></tr>
<% }else{ %>
<tr bgcolor="#FFFFE0"><td>${book.name}</td><td>${book.author}</td><td>${book.plsh}</td><td>${book.price}</td></tr>
<% } } %>
</table>
</div>
</body>
</html>
二、jtle.js 實現代碼
String.prototype.xsplit = function(regex) {
var item = this; //this指傳過來的字符串
var result = regex.exec(item);
var retArr = new Array();
while(result != null){
var first_idx = result.index;
if(first_idx != 0) {
var first_bit = item.substring(0, first_idx);
retArr.push(first_bit);
}
retArr.push(result[0]);
item = item.slice(first_idx+result[0].length);
result = regex.exec(item);
}
if(item != '' && item != null){
retArr.push(item);
}
return retArr;
};
function _toString(val){
if(val == null || val === undefined){
return "";
}
if(val instanceof Date){
return val.toDateString();
}
if(val.toString) {
return val.toString();
}
return "";
}
/*
* 說明：js腳本模板引擎
* 作者：lys
* @param options {el: "elId", _target:"編譯后輸出容器div id"}
*/
function jtle(options) {
this.source = " "; //待編譯的模板代碼
this.element; //板模源容器
this.script = "var _html = \"\";";
this._htmlVar = "_html += ";
this.buffer = "";
this._target = document.getElementById(options._target);
this.split_source = [];
this.left_delimiter = "<js>";
this.right_delimiter = "</js>";
this.left_writer = "$j{";
this.right_writer = "}";
this.startTag = null;
this.options = options;
this.compile = function() {
if(this._target == null) {
alert("請指定輸出目標DIV id");
return;
}
if(!this.options || !this.options.el) {
alert("new jtle(options)參數有誤");
return;
}
this.element = document.getElementById(this.options.el);
if(!this.element) {
alert("指定的板模源不合法");
return;
}
this.source = this.element.value.toLowerCase();
this.format();
this.scan();
};
this.parse = function(data) {
this.compile();
this.script = "(function(){ with(data) {" + this.script + "} return _html;})();";
var out = eval(this.script);
this._target.innerHTML = out;
};
this.scan = function() {
this.split_source = this.source.xsplit(/\n/);
var len = this.split_source.length;
for(var i = 0; i < len; i++) {
var item = this.split_source[i];
this.scanline(item);
}
};
this.scanline = function(item) {
var regex = /(<js>)|(<\/js>)|(\$j\{(\w*\.\w*)\})|(\n)/;
var line_split = item.xsplit(regex);
var len = line_split.length;
for(var i = 0; i < len; i++) {
var token = line_split[i];
if(token != null) {
this.appendBuffer(token);
}
}
};
this.appendBuffer = function(token) {
if(token) {
var rst = token;
if(token.indexOf("$j{") > -1) {
if(this.buffer != "") {
this.buffer = this._htmlVar + "\"" + this.clean(this.buffer) + "\";";
this.fush();
}
rst = rst.replace(/(\$j\{)/g, "");
rst = rst.replace(/\}/g, "");
this.buffer = this._htmlVar + "_toString(" + rst + ");";
this.fush();
return;
}
}
if(this.startTag == null) {
switch(token) {
case "\n":
this.buffer = this.buffer + "\n";
this.buffer = this._htmlVar + "\"" + this.clean(this.buffer) + "\";";
this.fush();
break;
case this.left_delimiter:
if(this.buffer != "") {
this.buffer = this._htmlVar + "\"" + this.clean(this.buffer) + "\";";
this.fush();
}
this.startTag = this.left_delimiter;
break;
case this.right_delimiter:
if(this.buffer != "") {
this.fush();
}
break;
default:
this.buffer = token;
break;
}
}else{
switch(token) {
case this.right_delimiter:
case "\n":
if(this.buffer != "") {
this.fush();
}
break;
default:
this.buffer = token;
break;
}
if(token == this.right_delimiter) {
this.startTag = null;
}
}
};
this.fush = function() {
this.script = this.script + this.buffer + "\n";
this.buffer = "";
};
this.format = function() {
this.source = this.source.replace(/(\r\n)/g, "\n");
this.source = this.source.replace(/\r/g, "\n");
this.source = this.source.replace(/(\n\r)/g, "\n");
};
this.clean = function(txt) {
txt = txt.replace(/\n/g, "\\n");
txt = txt.replace(/"/g, "\\\"");
return txt;
};
}
三、效果圖
備注: 當前實現只是初稿, 歡迎討論交流. 原創文章,如需轉載,請注明出處!
posted on 2008-05-25 10:24
Sonny Li 閱讀(2293)
評論(4) 編輯 收藏 所屬分類:
javascript編程語言