`
jj7jj7jj
  • 浏览: 50382 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

javascript 视图模板

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

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

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

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

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

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

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

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


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
分享到:
评论
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}这样的定义,首先你要不停的升级你的模版,然后用的人还要不停的看文档,如果是
<span><? date('YMD'); ?></span>,那这都是原生的js,成本就不同了。



呵呵 可能我跟阁下接触的脚本不一样,我最开始是使用的jsp里面的jstl,当时用挺爽的,这模板实际是为了项目需求定制化的一个,您上次和我说的内容,给了我不少灵感,万分感谢,jct等我忙了,我会仔细拜读~~
3 楼 achun 2011-09-05  
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}这样的定义,首先你要不停的升级你的模版,然后用的人还要不停的看文档,如果是
<span><? date('YMD'); ?></span>,那这都是原生的js,成本就不同了。
2 楼 jj7jj7jj 2011-08-29  
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脚本吗?
1 楼 achun 2011-08-28  
推荐博主看下我写的jCT,专题地址
http://achun.iteye.com/category/33268
关键是推荐jCT的思路,既然是js模版
为了减省成本和条提高通用性,首先采用原生js语法。
为了实现原生js语法的模版,参考了服务器端脚本php的方法,
也就是完成html和js混合的支持文法。通过简单的解析转换,
把这种混合文法转换成js文件就完成了js模版的设计。
jCT里面除了实现了这个想法,还做了写代码逻辑上的处理。这使得jCT代码的复杂度提高了。
如果只是要实现一个简单的js模版,强烈建议博主采用html和原生js混合的方案,实现起来非常简单。

相关推荐

    Python项目-自动办公-59 PPT_pptx_在PPT中写入图片和表格.zip

    Python课程设计,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。

    Python项目-实例-20 快递查询.zip

    Python课程设计,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。

    杂货产品检测43-YOLO(v5至v9)、CreateML、Paligemma、TFRecord、VOC数据集合集.rar

    杂货产品检测43-YOLO(v5至v9)、CreateML、Paligemma、TFRecord、VOC数据集合集.rarIPCV分配-V6 2024-01-21 6:10 PM ============================= *与您的团队在计算机视觉项目上合作 *收集和组织图像 *了解和搜索非结构化图像数据 *注释,创建数据集 *导出,训练和部署计算机视觉模型 *使用主动学习随着时间的推移改善数据集 对于最先进的计算机视觉培训笔记本,您可以与此数据集一起使用 该数据集包括7012张图像。 家庭废物以createMl格式注释。 将以下预处理应用于每个图像: *像素数据的自动取向(带有Exif-Arientation剥离) *调整大小为640x640(拉伸) 没有应用图像增强技术。

    绝对给力的源码,在线音乐播放器完整项目.zip

    Android 毕业设计,Android 毕业设计,小Android 程设计,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。

    毕业设计-0-1背包问题动态规划模型Python代码.rar

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、本项目仅用作交流学习参考,请切勿用于商业用途。

    保质量的周期边界2dAllen-Cahn方程求解器:纯隐格式迭代解

    谁喜欢谁下载,没啥商业价值,comsol也能做,不过我这产量更大

    Python项目-游戏源码-10 植物大战僵尸.zip

    Python课程设计,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。

    实现获取视频的缩略图(ThumbnailUtils),并且播放.zip

    Android 毕业设计,Android 毕业设计,小Android 程设计,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。

    推箱子Python小游戏

    推箱子Python小游戏

    基于ssm的新媒体视域下的中国古诗词展演源代码(java+vue+mysql+说明文档+LW).zip

    该新媒体视域下的中国古诗词展演主要为管理员和用户两类用户角色提供需求,管理员在后台可以对系统进行全面管理,用户在前台可以进行查看系统信息,注册登录,查询校园失物,评论,下载校园失物等操作。 项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 部署容器:tomcat7

    Matlab实现PSO-BiLSTM-Attention粒子群算法优化双向长短期记忆神经网络融合注意力机制多特征分类预测(含完整的程序,GUI设计和代码详解)

    内容概要:本文介绍了使用MATLAB实现PSO-BiLSTM-Attention粒子群优化双向长短期记忆神经网络融合注意力机制的多特征分类预测模型。通过PSO优化BiLSTM模型的超参数、引入注意力机制增强模型的特征提取能力,提升了多维度数据的分类精度。模型在金融风险预测、医疗健康预测、交通流量预测等多个领域具有广泛的应用前景。项目详细描述了模型架构、代码实现、训练与优化、模型评估与可视化、以及GUI界面设计等方面的内容。 适合人群:具备一定编程基础,工作1-3年的数据科学家和机器学习工程师。 使用场景及目标:① 金融、医疗、交通等领域的多特征分类预测任务;② 结合PSO优化BiLSTM超参数、引入注意力机制,提升模型预测准确度。 阅读建议:本文详细讲解了模型的理论背景、算法实现和应用案例,适合希望深入理解深度学习和优化算法的读者。建议结合代码和实际数据进行实验,以便更好地掌握模型的设计和优化过程。

    Java项目-基于SSM的物资管理系统项目源码.zip

    Java项目-基于SSM的物资管理系统项目源码

    Video_2024-12-18_000023.wmv

    Video_2024-12-18_000023.wmv

    Python项目-自动办公-26 Python从原Excel表中抽出数据存入同一文件的新的Sheet.zip

    Python课程设计,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。

    基于ssm的家居商城系统的设计与实现+jsp源代码(完整前后端+mysql+说明文档+LW).zip

    系统实现: 用户功能模块:用户点击进入到系统操作界面,可以对主页、个人中心、我的收藏管理、订单管理等功能模块,我的收藏管理:通过列表可以获取用户ID、收藏ID、表名、收藏名称、收藏图片信息并进行修改操作 管理员功能模块:管理员通过用户名和密码填写完成后进行登录。管理员登录成功后进入到系统操作界面,可以对主页、个人中心、用户管理、商品分类管理、商品信息管理、系统管理、订单管理等功能模块进行相对应操作。 项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 服务器:tomcat7

    STM32F103单片机采集温湿度及SPI FLASH数据保存并通过BC260-NBIOT模块上传数据到华为云物联网平台代码

    1、嵌入式物联网单片机项目开发实战。例程经过精心编写,简单好用。 2、代码使用KEIL 标准库开发,当前在STM32F103运行,如果是STM32F103其他型号芯片,依然适用,请自行更改KEIL芯片型号以及FLASH容量即可。 3、软件下载时,请注意keil选择项是jlink还是stlink。 4、有偿指导v:wulianjishu666; 5、如果接入其他传感器,请查看发布的其他资料。 6、单片机与模块的接线,在代码当中均有定义,请自行对照。 7、若硬件差异,请根据自身情况调整代码,程序仅供参考学习。 8、代码有注释说明,请耐心阅读。

    基于ssm的学习视频资源库的系统源代码(java+jsp+mysql+说明文档).zip

    项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 部署容器:tomcat7

    Java项目-基于SSM的网上淘书吧.zip

    Java项目-基于SSM的网上淘书吧

    Oracle 19c 中的闪回技术详解及实战

    内容概要:本文详细介绍了 Oracle 19c 中的闪回技术,包括闪回查询、闪回事务查询、闪回丢弃、闪回表、闪回数据库和闪回归档。具体讲解了每种闪回技术的原理、配置方法、操作步骤和限制条件,并提供了具体的实例和 SQL 命令。目的是帮助数据库管理员和开发人员理解和掌握如何利用这些技术来提高数据恢复和错误修复的能力,减少数据库管理的复杂性和风险。 适合人群:Oracle 数据库管理员、数据库开发人员及维护人员。 使用场景及目标:① 使用闪回技术快速恢复因误操作或其他错误导致的数据丢失;② 配置闪回技术以实现高效的数据库恢复;③ 在日常运维中监控和管理闪回操作。 其他说明:本文不仅提供了理论上的解释,还包含了实际操作的示例,以便读者能够更好地理解和应用这些技术。

Global site tag (gtag.js) - Google Analytics