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 Event学习第三章 早期的事件处理程序
Feb 07 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 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
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
JS分页效果示例
2013/10/11 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
python各种excel写入方式的速度对比
2020/11/10 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
考察现实表现材料
2014/05/19 职场文书
规范化管理年活动总结
2014/08/29 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis