Javascript模板技术

 更新时间:2007年04月27日 00:00:00   作者:  
/***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常用对话框小集

    对话框,大家对这个词汇可谓是各有所解,本文有个不错的例子,里面包含了各种常见对话框的实现,感兴趣的朋友可以了解下
    2013-09-09
  • 比较常见的javascript中定义函数的区别

    比较常见的javascript中定义函数的区别

    js定义函数有好多种,但是他们之间的区别,大家都了解吗,接下来,小编通过本文给大家介绍比较常见的js中定义函数的区别,对本文感兴趣的朋友一起看看吧
    2015-11-11
  • ES6基础之字符串和函数的拓展详解

    ES6基础之字符串和函数的拓展详解

    这篇文章主要介绍了ES6基础之字符串和函数的拓展,结合实例形式分析了ES6字符串与函数扩展的相关操作技巧与注意事项,需要的朋友可以参考下
    2019-08-08
  • JavaScript中跨域调用Flash的方法

    JavaScript中跨域调用Flash的方法

    这篇文章主要介绍了JavaScript中跨域调用Flash的方法,只需要在Flash中加一句话即可,需要的朋友可以参考下
    2014-08-08
  • 老生常谈javascript的类型转换

    老生常谈javascript的类型转换

    下面小编就为大家带来一篇老生常谈javascript的类型转换。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JS中的oninput和onchange事件的区别及如何正确使用

    JS中的oninput和onchange事件的区别及如何正确使用

    在JavaScript中,oninput和onchange事件是用于处理用户输入的常见事件,本文将介绍oninput和onchange事件的区别,以及如何在实际开发中正确使用它们,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • uni-app做微信小程序的分包处理方法

    uni-app做微信小程序的分包处理方法

    分包指的是把一个完整的小程序项目,按照不同的需求划分为不同的子包,在构建时打包成不同的分包,用户在浏览时按需加载,这篇文章主要介绍了uni-app做微信小程序的分包处理,需要的朋友可以参考下
    2023-02-02
  • JavaScript实现简单动态进度条效果

    JavaScript实现简单动态进度条效果

    这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • 基于JavaScript实现简单的音频播放功能

    基于JavaScript实现简单的音频播放功能

    本文给大家带来了基于js实现简单的音频播放功能,数据是由后台提供的,具体实例代码大家参考下本文
    2018-01-01
  • 五十音小游戏中的前端知识小结

    五十音小游戏中的前端知识小结

    本文内容主要介绍小游戏开发流中程涉及到的前端知识的如深色模式、离线缓存、樱花动画、横屏判断等知识的归纳介绍和个人收获总结,感兴趣的朋友一起看看吧
    2021-10-10

最新评论