Javascript模板技术


Posted in Javascript onApril 27, 2007

/***Template.class.js***/

function Template()
{
this.classname="Template";
this.debug=false;
this.file=new HashMap();
this.root="";
this.varkeys=new  HashMap();
this.varvals=new  HashMap();
this.unknowns="remove";
this.halt_on_error="yes";
this.last_error=""; 
this.fso=new ActiveXObject("Scripting.FileSystemObject");
this.set_root=_set_root;
this.set_unknowns=_set_unknowns;
this.get_var=_get_var;
this.set_file=_set_file;
this.set_var=_set_var;
this.set_block=_set_block;
this.subst=_subst;
this.parse=_parse;
this.p=_p;
this.pparse=_pparse;
this.finish=_finish;
this.loadfile=_loadfile;
this.is_dir=_is_dir;
this.file_exists=_file_exists;
this.filename=_filename;
this.varname=_varname;
this.halt=_halt;
this.haltmsg=_haltmsg;
}

/**
* 设置模板文件根目录
* @param root
*/
function _set_root(root)
{
if(!this.is_dir(root))
{
 this.halt("set_root:"+root+" is not a directory.");
}
this.root=root;
}

/**
* 设定对未知模板变量的处理办法
* @param unknowns
*/
function _set_unknowns(unknowns)
{
this.unknowns=unknowns;
}

/**
* 设定模板文件
* @param handle
* @param filename
*/
function _set_file(handle,filename)
{
this.file.put(handle,this.filename(filename));
}

/**
* 设定模板变量
* @param varname
* @param value
*/
function _set_var(varname,value)
{
if(!this.varkeys.containsKey(varname))
{
 this.varkeys.put(varname,this.varname(varname));
}
if(!this.varvals.containsKey(varname))
{
 this.varvals.put(varname,value);
}
else
{
 this.varvals.remove(varname);
 this.varvals.put(varname,value);
}
//alert(varname+"=================="+value);
}

/**
* 设定块变量
* @param parent
* @param handle
* @param name
*/
function _set_block(parent,handle,name)
{
if(!this.loadfile(parent))

 this.halt("subst:unable to load "+parent);
}
if(name=="")
{
 name=handle;
}
var str=this.get_var(parent);
var re=new RegExp("<!--\\s+BEGIN " + handle + "\\s+-->([\\s\\S.]*)<!--\\s+END " + handle + "\\s+-->");
//Matcher m=p.matcher(str);
//var rs=m.find();
//var t=m.group(m.groupCount());
//this.set_var(handle,t);
var arr=re.exec(str);
if(arr!=null)
 this.set_var(handle,RegExp.$1);
str=str.replace(re,"{"+name+"}");
this.set_var(parent,str);
}

/**
* 进行变量替换
* @param handle
* @return 
*/
function _subst(handle)
{
if(!this.loadfile(handle))
{
 this.halt("subst:unable to load "+handle);
}
var str=this.get_var(handle);
var keys=this.varkeys.keySet();
//alert(keys.length);
for(var i=0;i<keys.length;i++)
{
 var key=keys[i];
 var re=new RegExp(this.varkeys.get(key),"g")
 str=str.replace(re,this.varvals.get(key));
}
   //alert(handle+"++++++++++++++++++"+str);
return str;
}

/**
* 进行变量复制
* @param target
* @param handle
* @param append
*/
function _parse(target,handle,append)
{
var str=this.subst(handle);
if(append)
{
 this.set_var(target,this.get_var(target)+str);
}
else
{
 this.set_var(target,str);
}
}

/**
* 返回替换后的文件
* @param varname
* @return 
*/
function _p(varname)
{
return this.finish(this.get_var(varname));
}

/**
* parse()和p()的合并
* @param target
* @param handle
* @param append
* @return 
*/
function _pparse(target,handle,append)
{
this.parse(target,handle,append);
document.writeln(this.p(target));
}

/**
* 加载模板文件
* @param handle
* @return 
*/
function _loadfile(handle)
{
if(this.varkeys.containsKey(handle) && this.varvals.get(handle)!=null)
{
 return true;
}
if(!this.file.containsKey(handle))
{
 _halt("loadfile:"+handle+" is not a valid handle.");
 return false;
}
var  filename=this.file.get(handle);
if(!this.file_exists(filename))
{
 this.halt("loadfile:while loading "+handle+","+filename+" does not exist.");
 return false;
}
try
{
 var fr=this.fso.OpenTextFile(filename); 
 var s=fr.ReadAll();
 if(s=="")
 {
  halt("loadfile:while loading "+handle+","+filename+" is empty.");
  return false;
 }
 this.set_var(handle,s);
}
catch(e)
{

}
return true;
}

/**
* 获取变量
* @param varname
* @return 
*/
function _get_var(varname)
{
if(this.varvals.containsKey(varname))
 return this.varvals.get(varname);
else
 return "";
}

/**
* 判断目录
* @param path
* @return 
*/
function _is_dir(path)
{
if(this.fso.FolderExists(path))
 return true;
else
 return false;
}

/**
* 判断文件
* @param filename
* @return 
*/
function _file_exists(filename)
{
if(this.fso.FileExists(filename))
 return true;
else
 return false;
}

/**
* 文件名处理
* @param filename
* @return 
*/
function _filename(filename)
{
if(!this.file_exists(this.root+filename))
{
 this.halt("filename:file "+filename+" does not exist.");
}
return this.root+filename;
}

/**
* 变量名处理
* @param varname
* @return 
*/
function _varname(varname)
{
return "{"+varname+"}";
}

/**
* 完成字符串的处理
* @param str
* @return 
*/
function _finish(str)
{
var re=new RegExp("{[^ \\t\\r\\n\\}]+\\}","g");
if(this.unknowns=="remove")
{
 str=str.replace(re,"");
}
else if(this.unknowns=="comment")
{
 str=str.replace(re,"<!-- Template Variable undefined -->");
}
else
{

}
return str;
}

function _halt(msg)
{
this.last_error=msg;
if(this.halt_on_error!="no")
{
 _haltmsg(msg);
}
if(this.halt_on_error=="yes")
{
 alert("Halted.");
 //System.exit(0);
}
}

function _haltmsg(msg)
{
alert("Template Error:"+msg);
}

/**
* HashMap构造函数
*/
function HashMap()
{
   this.length = 0;
   this.prefix = "hashmap_prefix_20050524_";
}
/**
* 向HashMap中添加键值对
*/
HashMap.prototype.put = function (key, value)
{
   this[this.prefix + key] = value;
   this.length ++;
}
/**
* 从HashMap中获取value值
*/
HashMap.prototype.get = function(key)
{
   return typeof this[this.prefix + key] == "undefined" 
           ? null : this[this.prefix + key];
}
/**
* 从HashMap中获取所有key的集合,以数组形式返回
*/
HashMap.prototype.keySet = function()
{
   var arrKeySet = new Array();
   var index = 0;
   for(var strKey in this)
   {
       if(strKey.substring(0,this.prefix.length) == this.prefix)
           arrKeySet[index ++] = strKey.substring(this.prefix.length);
   }
   return arrKeySet.length == 0 ? null : arrKeySet;
}
/**
* 从HashMap中获取value的集合,以数组形式返回
*/
HashMap.prototype.values = function()
{
   var arrValues = new Array();
   var index = 0;
   for(var strKey in this)
   {
       if(strKey.substring(0,this.prefix.length) == this.prefix)
           arrValues[index ++] = this[strKey];
   }
   return arrValues.length == 0 ? null : arrValues;
}
/**
* 获取HashMap的value值数量
*/
HashMap.prototype.size = function()
{
   return this.length;
}
/**
* 删除指定的值
*/
HashMap.prototype.remove = function(key)
{
   delete this[this.prefix + key];
   this.length --;
}
/**
* 清空HashMap
*/
HashMap.prototype.clear = function()
{
   for(var strKey in this)
   {
       if(strKey.substring(0,this.prefix.length) == this.prefix)
           delete this[strKey];   
   }
   this.length = 0;
}
/**
* 判断HashMap是否为空
*/
HashMap.prototype.isEmpty = function()
{
   return this.length == 0;
}
/**
* 判断HashMap是否存在某个key
*/
HashMap.prototype.containsKey = function(key)
{
   for(var strKey in this)
   {
      if(strKey == this.prefix + key)
         return true;  
   }
   return false;
}
/**
* 判断HashMap是否存在某个value
*/
HashMap.prototype.containsValue = function(value)
{
   for(var strKey in this)
   {
      if(this[strKey] == value)
         return true;  
   }
   return false;
}
/**
* 把一个HashMap的值加入到另一个HashMap中,参数必须是HashMap
*/
HashMap.prototype.putAll = function(map)
{
   if(map == null)
       return;
   if(map.constructor != JHashMap)
       return;
   var arrKey = map.keySet();
   var arrValue = map.values();
   for(var i in arrKey)
      this.put(arrKey[i],arrValue[i]);
}
//toString
HashMap.prototype.toString = function()
{
   var str = "";
   for(var strKey in this)

   {
       if(strKey.substring(0,this.prefix.length) == this.prefix)
             str += strKey.substring(this.prefix.length) 
                 + " : " + this[strKey] + "\r\n";
   }
   return str;
}

<!--     main.htm     -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<p>{HEAD}</p>
<p>{WELCOME}
</p>
<table width="100%"  border="1" cellspacing="1" cellpadding="3">
 <!-- BEGIN BROWS -->
 <tr>
  <!-- BEGIN BCOLS -->
   <td>{NUMBER}</td>
<!-- END BCOLS --> 
 </tr>
 <!-- END BROWS -->
</table>
<p>{FOOT}</p>
</body>
</html>

<!--      head.htm       -->

<table width="100%"  border="1" cellspacing="1" cellpadding="3">
 <tr>
   <td>网站首页</td>
 </tr>
</table>

<!--     foot.htm       -->

<table width="100%"  border="1" cellspacing="1" cellpadding="3">
 <tr>
   <td>版权所有:网站梦工厂</td>
 </tr>
</table>

<!--    index.htm     -->

<script src="/script/Template.class.js"></script>
<script>
var tmplt=new Template();
var root=location.href;
root=unescape(root.substring(8,root.lastIndexOf("/")+1));
tmplt.set_root(root);
tmplt.set_file("fh","tpl/main.htm");
tmplt.set_file("head","tpl/head.htm");
tmplt.set_file("foot","tpl/foot.htm");
tmplt.set_block("fh","BROWS","rows");
tmplt.set_block("BROWS","BCOLS","cols");
tmplt.set_var("WELCOME","欢迎光临");
for(var i=0;i<10;i++)
{
tmplt.set_var("cols","");
for(var j=0;j<10;j++)
{
 tmplt.set_var("NUMBER",i+"."+j);
 tmplt.parse("cols","BCOLS",true);
}
tmplt.parse("rows","BROWS",true);
}
tmplt.parse("HEAD","head",false);
tmplt.parse("FOOT","foot",false);
tmplt.pparse("out","fh",false);
</script>

Javascript 相关文章推荐
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
js定时器实现倒计时效果
Nov 05 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
JS原型与继承操作示例
May 09 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
JavaScript 去重和重复次数统计
Mar 31 Javascript
javascript函数库-集合框架
Apr 27 #Javascript
仿服务器端脚本方式的JS模板实现方法
Apr 27 #Javascript
改版了网上的一个js操作userdata
Apr 27 #Javascript
用 JSON 处理缓存
Apr 27 #Javascript
转一个日期输入控件,支持FF
Apr 27 #Javascript
学习jquery之一
Apr 27 #Javascript
JavaScript与函数式编程解释
Apr 27 #Javascript
You might like
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
php获取参数的几种方法总结
2014/02/18 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
php中socket的用法详解
2014/10/24 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
进一步了解Python中的XML 工具
2015/04/13 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python实现区域填充的示例代码
2021/02/03 Python
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
材料采购员岗位职责
2013/12/17 职场文书
网络程序员自荐信
2014/01/25 职场文书
培训专员岗位职责
2014/02/26 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
弄虚作假心得体会
2014/09/10 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
工作时间调整通知
2015/04/24 职场文书
自我检讨书怎么写
2015/05/07 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
Mysql基础之常见函数
2021/04/22 MySQL