javascript 视图模板 -

jj7jj7jj

浏览: 50329 次
性别:
来自: 武汉

最近访客更多访客>>

myeleven

taotao_284548593

看不见的咖啡馆

LTao5461218

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript 视图模板

博客分类：

javascript

任务原因，下周要实现一个模块，为了能提高效率，我做了一个通用工具类，其实也是在原基础上改的

以前的版本支持${..}这种样子的替换比如
<div style="display:${display}">...
替换为
<div style="display:none">...

有些比如时间格式化和判断之类就必须在代码处理好了之后在将值传给模板，但格式化和判断逻辑基本都是一致的，于是我想这些直接通过视图模板就处理好些问题

$date:时间格式化
$date{day,YY MM DD}
替换为
11 11 11

$pick:三目运算
$pick{age,25,好年轻,好老啊}
替换为(age = 24)
好年轻

模板如果想处理更灵活，需要对嵌套的情况做下处理比如：

$pick{age,${age2},${msg1},${msg2}}
替换为(age = 24,age2 = 25 , msg1 = 好年轻 ,msg2 = 好老啊)
好年轻

有时候模板需要过滤掉${..},可能真正输出就是这种格式，怎么办？加上"\\"
$pick{age,${age2},\\${msg1},${msg2}}
替换为(age = 24,age2 = 25 , msg1 = 好年轻 ,msg2 = 好老啊)
${msg1}

function extends(objOld,objNew){
    for(var n in objNew){
        if(objNew.hasOwnProperty(n)){
            objOld[n] = objNew[n];
        }
    }
}

Template = function(){
	this.initialize(arguments[0]);
};
Template.prototype = {
	initialize: function (template,opt) {
		this.template = template + '';
		//对\\进行过滤
		this.filter = "\\\\";
		//format:arguments[3],arguments[4]
		//pic:arguments[5],arguments[6],arguments[7],arguments[8]
		//defalut:arguments[9]
        //获取参数 
		this.regPattern = /(^|[\s\S])(\$date\{([^,]*?),([^}]*?)\}|\$pick\{([^,]*?),([^,]*?),([^,]*?),([^}]*?)\}|\$\{([^}]*?)\})/g;
        //是否嵌套
		this.isNesting = /(?:^|[\s\S])\$[^{]*?\{[^}]*?(?=\$[^{]*?\{[^}]*?\})/g;
        extends(this,opt);
	},
	evaluate: function (obj) {
		var _template = "";
		if (typeof obj == "object") {
			var _this = this;

			_template = this.template.replace(this.regPattern, function (s, v1, v2) {
				if(_this.isNesting.test(s)){
					for(var i = arguments.callee.length ;  i < arguments.length - 2 ;i ++){
						if(arguments[i]){
							arguments[i] = arguments[i].replace(_this.regPattern, arguments.callee);
						}
					}
				}

				if(new RegExp("^" + _this.filter,"").test(v1)){
					return v1 + v2;
				}else{
					if(/^\$\{/.test(v2)){
						return v1 + (obj[arguments[9]] || "");
					}
					if(/^\$date\{/.test(v2)){
						//2011-08-26 16:10:06
						return v1 + (obj[arguments[3]] ? _this._date_format(obj[arguments[3]],arguments[4]) : "");
					}
					if(/^\$pick\{/.test(v2)){
						return v1 + (obj[arguments[5]] ? (obj[arguments[5]] == arguments[6] ? arguments[7] : arguments[8]) : "");
					}
				}
			});
		}
		return _template;
	},
	//YY/YYYY MM DD hh mm ss
	_date_format : function(datestr,reg){
		var tmp = datestr.split(" ");
		var ymd = tmp[0];
		var hms = tmp[1];
		tmp = ymd.split("-");
		var Y = tmp[0];
		var M = tmp[1];
		var D = tmp[2];
		tmp = hms.split(":");
		var h = tmp[0];
		var m = tmp[1];
		var s = tmp[2];

		reg = reg || "hh:mm:ss";
	
		/\bss\b/.test(reg) && (reg = reg.replace(/\bss\b/,s));
		/\bmm\b/.test(reg) && (reg = reg.replace(/\bmm\b/,m));
		/\bhh\b/.test(reg) && (reg = reg.replace(/\bhh\b/,h));
		/\bMM\b/.test(reg) && (reg = reg.replace(/\bMM\b/,M));
		/\bDD\b/.test(reg) && (reg = reg.replace(/\bDD\b/,D));
		/\bYYYY\b/.test(reg) && (reg = reg.replace(/\bYYYY\b/,Y));
		/\bYY\b/.test(reg) && (reg = reg.replace(/\bYYYY\b/,Y.substring(2)));
		
		return reg;
	}
};

var str2 = '$date{ddd,mm:ss}asdfjakjsdlkfjkl<<><{}werwesdf$ {} sdfer $${display} $pick{vid,${vid},11,22}';


var t = new Template(str2);
var respance = t.evaluate({vid:"123123123",ddd:"2011-08-26 16:10:06",display:"true"});
alert(respance);

//更改前：
//$date{ddd,mm:ss}asdfjakjsdlkfjkl<<><{}werwesdf$ {} sdfer $${display} $pick{vid,${vid},11,22}
//更改后：
//10:06asdfjakjsdlkfjkl<<><{}werwesdf$ {} sdfer $true 11

需要修改过滤字符new Template(str2,{filter:"$"})

this.regPattern可以分为三段来看
\$\{([^}]*?)\}
    处理最普通的情况${...}
\$pick\{([^,]*?),([^,]*?),([^,]*?),([^}]*?)\}
    处理三目运算，里面获取4个参数
\$date\{([^,]*?),([^}]*?)\}
    处理时间格式化，获取里面2个参数
(^|[\s\S])
    [\s\S] 匹配任意字符，包含\r,\t ,还包括开头

这正则干了这么两件事：
     1）获取$前面的一个字符，如果是开头则不取，用来判断是否过滤
     2）获取普通，时间格式化，三目运算的参数

扩展：
     添加对应正则，添加对应的处理策略

2
顶

2
踩

分享到：

javascript 视图模板 2.0 | js中可能你不知道的地方

2011-08-28 02:06
浏览 1389
评论(4)
分类:Web前端
查看更多

4 楼 jj7jj7jj 2011-09-05

achun 写道

jj7jj7jj 写道

achun 写道

推荐博主看下我写的jCT,专题地址
http://achun.iteye.com/category/33268
关键是推荐jCT的思路，既然是js模版
为了减省成本和条提高通用性，首先采用原生js语法。
为了实现原生js语法的模版，参考了服务器端脚本php的方法，
也就是完成html和js混合的支持文法。通过简单的解析转换，
把这种混合文法转换成js文件就完成了js模版的设计。
jCT里面除了实现了这个想法，还做了写代码逻辑上的处理。这使得jCT代码的复杂度提高了。
如果只是要实现一个简单的js模版，强烈建议博主采用html和原生js混合的方案，实现起来非常简单。

achun你好，JCT对我的项目可能暂时还用不上，因为模板只是我们里面的一个小工具类，只需要将获取json对象替换掉模板上标记的元素就行了，还有一句话不太明白“采用html和原生js混合的方案”是指在模板里面直接支持写SCRIPT脚本吗？

jCT关键的地方就是模仿了php的脚本方式，php天生就是个脚本，可以随时嵌入其他文本，比如html,jCT这样模仿也是经历了一个过程，最后醒悟，这就是所谓的“采用html和原生js混合的方案”了。jCT仅仅是对此进行了翻译和做了些逻辑上的支持而已。这样就全部都是原生的了，原生的好处是：没有附加的学习成本。比如:$date{day,YY MM DD}这样的定义，首先你要不停的升级你的模版，然后用的人还要不停的看文档，如果是
<? date('YMD'); ?>,那这都是原生的js,成本就不同了。

呵呵可能我跟阁下接触的脚本不一样，我最开始是使用的jsp里面的jstl，当时用挺爽的，这模板实际是为了项目需求定制化的一个，您上次和我说的内容，给了我不少灵感，万分感谢，jct等我忙了，我会仔细拜读~~

3 楼 achun 2011-09-05

jj7jj7jj 写道

achun 写道

2 楼 jj7jj7jj 2011-08-29

achun 写道

1 楼 achun 2011-08-28

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript 视图模板

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript 视图模板

评论

发表评论

相关推荐

热烈祝贺Polymer中文组织网站上线

slider组件重构【原创】

with(){} 的用法(javascript忍者的秘密) 【转】

利用JavaScript破解验证码(转)

js自定义滚动条

javascript 视图模板 2.0

js中可能你不知道的地方

跨域总结

达芬奇密码之Javascript的密码

js版 a星算法(原创:算法独立出来了)

js世界里的诡异和离奇

html5 之 processing.js 学习笔记

constructor与prototype的深入分析

最近访客更多访客>>