Javascript模板技術

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] + "\r\n";
    }
    return str;
}

<!--     main.htm     -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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>