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>

时间: 2024-11-03 20:46:44

Javascript模板技术的相关文章

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_o

基于jTemplates、ascx协同工作的酷UI模板技术

在很久很久以前,也就是asp.net ajax刚引起大众关注不久,asp.net ajax团队成员ScottGu发布 了一篇非常实用的文章: 英文:Tip/Trick: Cool UI Templating Technique to use with ASP.NET AJAX for non-UpdatePanel scenarios , 中文:技巧和诀窍:在不用UpdatePanel的情形下可与ASP.NET AJAX 使用的酷UI模板技术 看完之后,非常受用,并给我留下了非常深刻的映像,之后

详解Javascript模板引擎mustache.js_javascript技巧

本文总结它的使用方法和一些使用心得,内容不算很高深,纯粹是入门内容,看看即可.不过要是你还没有用过此类的javascript引擎库,那么本文还是值得你一读的,相信在你了解完它强大的功能和简单用法之后,一定会迫不及待地将之用于你的工作当中. 1. 从一个简单真实的需求讲起目前公司做了一个统一的开发平台,后台封装了MVC的接口和数据增删改查的接口,前端我自己用bootstrap+手写各类组件的方式弄了一套开发框架:集成了CAS,在CAS的基础上,首先做了一套统一权限管理系统,这个系统是我们开发平台的

推荐13款javascript模板引擎

javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简单易用! 2. EasyTemplate 在使用过Freemarker模 板后,感觉它的 语法比较朴实,平易近人,容易上手,于是决定按它的语法风格实现一个前端的 模板引擎,这就有了

13 款 JavaScript 模板引擎

JavaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简单易用! 2. EasyTemplate 在使用过Freemarker模板后,感觉它的 语法比较朴实,平易近人,容易上手,于是决定按它的语法风格实现一个前端的 模板引擎,这就有了下

javascript模板引擎artTemplate的特性实现

文章简介:本文将用最简单的示例代码描述现有的 javascript 模板引擎的原理,包括新一代 javascript 模板引擎 artTemplate 的特性实现原理,欢迎共同探讨. 随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在

PHP中的模板技术

综述: 在多人开发大型PHP项目时,模板技术非常有用,它可以分开美工和程序员的工作,并且方便界面的修改和完善:不仅如此,利用模板技术,我们还可以简单有效地定制或者修改站点.现在我们将要以PHPLIB的模板为例子讲述如何在PHP中应用模板技术. 如何使用PHPLIB模板? 设我们有一个模板, 名为UserTemp,路径为/home/user_dir/user_temp/,它的内容如下: 你订购的是:{Product} 大括号表示Product是一个模板变量. 然后我们编写如下的

关于PHP模板技术的基本概念

概念|模板 如果你正在设计一个交互式网站,你一定会关注两个主要的问题,就是美工和程序.这也是一个网站在建设中抛开其内容之后最关键的要素.通常有两种方式来协调美工和程序之间的关系: 1.先做好美工页面,然后由程序员直接在美工页面的HTML文件中嵌入ASP.JSP.PHP等程序代码. 2.美工和程序同时进行,但这时因为没有页面框架,程序只能做出一些关键代码,双方完成后再进行一次美工页面和程序代码的嵌入合成. 在实际的网站建设过程中,由于人员.进度等环境的限制,大家通常会混合地使用上面两种协调方式.然

Javascript模板引擎handlebars使用实例及技巧

我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文档中非常大量的块进行操作呢?这时JS模版就派上用场了. 源地址:http://rfyiamcool.blog.51cto.com/1030776/1278620 这是一个实例,我们可以把json的数据,按照自己的想法嵌入到模板里面. <!DOCTYPE html> <html> <head> <title>Handlebars Expressions Examp