我是靠谱客的博主 火星上雨,最近开发中收集的这篇文章主要介绍Javascript模板技术,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

/***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] + "rn";
   }
   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模板技术所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(98)

评论列表共有 0 条评论

立即
投稿
返回
顶部