`

[原创]GT-Template, 一个超轻量级的js模板工具.

阅读更多
GT-Template beta? ---- 作者 fins

这是一个简单小巧的 模板工具类, 用来帮助使用者快速的拼装出所需要的字符串.

简单说明:
模板中 #{ ... /} 之间的数据将被 作为js脚本执行, 而其中VAR关键字代表的就是 seed 的值(从外部传入的一个变化的值).
模板分成两部分来执行, compile 和 run.
#{..../}之间的部分在run期间被执行,
#{#...../} 之间的部分在编译期执行.编译期执行的代码中不能传入seed.

更多的说明也不用再写了,因为确实很简单的功能 呵呵.

原理:
实际上就是 利用传入的参数对 模板字符串中 #{ .../} 的部分进行替换.(对 #{ .../}之间的部分执行eval(),之后再替换).


其他:
以后也许会对这个模板做一些争强和扩充,那要看具体的需求了.
目前我主要就是用他批量的生成测试数据.
如 批量的 insert sql, 批量的 json 数据, 批量的 <tr><td>..</td>....</tr>

以前我写过一个 TrimPath Template(一个已经死去的"js模板组件"项目) 的增强版,所以对这方面还是有一定的研究和心得的.
希望大家能够多提需求,只要实用 常用,我会加进去的.
示例:

字符串 inTmp :   Hello,#{ VAR.custName /},My name is #{ VAR.myName /}.

var templateC= GT.compileTemplate(inTmp);

var inArg= {
	custName 'Tom',
	myName: 'fins'
}

var outResult = GT.runTemplate(templateC,inArg);

字符串 outResult :  Hello,Tom,My name is fins.

在#{ .../} 也可以写如相对 复杂的 js脚本, 例如  #{ VAR.gender==1?'男':'女'  /}
如果再复杂些建议写成 function,然后在 #{ /}内部调用 (可以写成内联的function 也可以用调用时传参的).

真的是超轻量级, 所以就不发附件了 直接贴上来

if (!GT){
	GT={};
}
// template为 一个字符串, 返回的是编译好的一个字符串数组,该数组为 runTemplate:方法的输入参数之一.
GT.compileTemplate= function(template){
			var TEMPLATE_START="#{";
			var TEMPLATE_END="/}";
			var templateC=[];
			var snippets=[];
			var current=0;
			while(true){
				var start= template.indexOf( TEMPLATE_START ,current);
				var sBegin=start+2;
				var sEnd=template.indexOf( TEMPLATE_END ,sBegin);

				if (sBegin>=2 && sEnd>sBegin){
					templateC.push(template.substring(current,start) );
					var sn=template.substring(sBegin,sEnd);
					if (sn.indexOf("#")==0){
						sn=eval( sn.substring(1) );
					}else{
						snippets.push(templateC.length);
					}
					templateC.push( sn );
				}else{
					templateC.push( template.substring(current) );
					break;
				}
				current=sEnd+2;
			}
			templateC.push(snippets);
			return templateC;
	};

// templateC为编译好的字符串数组, invar为模板中要传入的变量.
// 如果要传入多个变量, 请使用 {},或[] .
GT.runTemplate= function(templateC,invar){
		var VAR=invar;

		var snippets=templateC[templateC.length-1];

		var rs=[];
		var sIdx=0;

		for (var i=0;i<templateC.length-1;i++ ){
			if (snippets[sIdx]==i){
				rs.push(  eval(templateC[i]) );
				sIdx++;
			}else {
				rs.push( templateC[i] )
			}
		}

		return rs.join("");

	};





分享到:
评论
7 楼 striveandlive 2015-06-05  
fins = js大牛
6 楼 Tin 2007-10-11  
JST没有死呀。这个轻量的引擎我觉得还是太轻了,内容太少。
你说的“以前我写过一个 TrimPath Template(一个已经死去的"js模板组件"项目) 的增强版”,不知道你的扩展是否已经提交给JST项目了呢?我觉得JST是页面端MVC的最佳模板引擎。
5 楼 fins 2007-09-21  
这是我以前发在国外一个论坛的 ,但是代码是06年初写的 现在看起来写的很不好 就不拿出来丢人了 以后再好好改造改造发出来.


the "macro" can be placed anywhere in the template.

ex:

{for vo in tdata}
${testMacro(vo)}
{/for}


{macro testMacro(v)}
....
{/macro}




change log:



build 20060817:

1 a new better parse() Method.  shorter ,faster , clearer. 

2 add a Debuger interface method. it can help developer to debug.

3 fix a bug in emitSectionText() Method ;



build 20060813:

1 add some statement.  (for  foreach  while  switch  inline ....)

2 add some modifier    (transform  times ...)

3 change block function  (  cdata  eval minify ) extract them  from parse Method.

4 change the statement-RegularExpressions and blockFunction-RegularExpressions .
	now they are built automatically.

5 add TrimPath.tagMaxLength . 
 in ver1.0.38 ,the maximum statement tag length is 10 and 10 is a hardcode.

6  extract them:	
	var self_OUT=" var _OUT_arr = []; var _OUT = { write: function(m) { if (m) _OUT_arr.push(m); } }; ";
	var self_OUTResultArr = "_OUT_arr.join('')" ;

7 add a helper function  TrimPath.replaceAll();
	the replace method in javascript is  cann't replace all match substring except use RegularExpressions.
	the TrimPath.replaceAll(str,oldsubstring,newsubstring) don't use RegularExpressions.
 
8  add TrimPath.parseXMLTemplate.
	now you can save the template in the CDATA node of any XML File.


9 etc.

....
4 楼 dengyin2000 2007-09-21  
fins 写道
呵呵 楼上的说的那个就是我以前改造过的那个jst的原版.

我后来改造的应该比那个原版 1.038好用 有机会重构一下再发上来吧.

我这次发的这个 只是一个足够简单 足够实用的 小家伙
野心没有 jst那么大
实际上我项目里也没用我写的这个小东西 我只是用这个小家伙来帮我批量的生成 "不重复的 但是有规律可循的" 数据.

更强大的jsTemplate语言 我暂时没有时间去写 不过我倒是很希望可以写一个更好更强大的 呵呵 如果能写个 js版的 freemarker我想一定是一件很有趣的事情 呵呵


我想知道你对jst有什么改造。 我觉得现在jst够用。
3 楼 fins 2007-09-21  
刚才主贴里的代码贴错了 呵呵 这次好了
2 楼 fins 2007-09-21  
呵呵 楼上的说的那个就是我以前改造过的那个jst的原版.

我后来改造的应该比那个原版 1.038好用 有机会重构一下再发上来吧.

我这次发的这个 只是一个足够简单 足够实用的 小家伙
野心没有 jst那么大
实际上我项目里也没用我写的这个小东西 我只是用这个小家伙来帮我批量的生成 "不重复的 但是有规律可循的" 数据.

更强大的jsTemplate语言 我暂时没有时间去写 不过我倒是很希望可以写一个更好更强大的 呵呵 如果能写个 js版的 freemarker我想一定是一件很有趣的事情 呵呵
1 楼 dengyin2000 2007-09-21  
这个是你自己写的?   比这个有什么好处?? http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

看到你说你也了解过JST。我们现在项目中就是用的JST

相关推荐

    Better-Minimal-WebGL-Template unity webgl打包模板 支持手机

    "Better-Minimal-WebGL-Template" 是一个优化过的Unity WebGL打包模板,旨在提供更好的性能和兼容性,特别强调了对手机设备的支持。 这个模板的核心目标是减少最终WebGL构建的大小,提高加载速度,同时保持良好的...

    vue-admin-template-master-3.8.0.zip

    总结来说,"vue-admin-template-master-3.8.0.zip"是一个基于Vue.js 3.8.0版本的后台管理模板,结合了ECMAScript的现代特性,利用了Vue.js的组件化和响应式数据绑定,以及Element UI的组件,为开发者提供了一个高效...

    vue-admin-template-4.4.0.zip

    Vue Admin Template则是基于Vue.js构建的后台管理界面模板,为开发人员提供了一个快速搭建后台管理系统的基础架构。4.4.0版本是这个模板的特定迭代,可能包含了性能优化、新功能和错误修复。 在"vue-admin-template...

    vue-admin-template-master.zip

    "vue-admin-template-master.zip" 是一个包含了一个使用 Vue.js 和 Element-UI 搭建的后台管理模板项目的压缩包。 这个模板工程的核心功能和知识点包括: 1. **Vue CLI**:Vue.js 提供的命令行工具,用于快速初始...

    前端插件art-template模板引擎art-template-test示例代码

    `art-template`是一个轻量级、高性能的JavaScript模板引擎,它旨在解决HTML模板编译问题,提高页面渲染速度,同时降低前后端耦合度。它的设计目标是简洁、易用,支持浏览器环境和Node.js环境,适用于各种类型的Web...

    elsarticle-template ,Elsevier LaTeX模版

    "elsarticle-template" 是 Elsevier 为作者提供的一个标准化的 LaTeX 文档类,旨在帮助作者按照期刊格式规范撰写论文,确保排版的一致性和专业性。本文将详细介绍 elsarticle-template 的使用方法、特点以及相关知识...

    express-template, 面向 Nuxt.js的入门模板.zip

    express-template, 面向 Nuxt.js的入门模板 带Express的 Nuxt.js安装这是一个用于 vue的项目模板。vue init nuxt-community/express-template &lt;project-name&gt;cd &lt;proj

    JS插件 ---- 腾讯的js模板引擎template.js

    腾讯的js模板引擎template.js 方便ajax请求的数据进行遍历和数据绑定。

    materio-vuetify-vuejs-admin-template.zip

    "materio-vuetify-vuejs-admin-template.zip" 是一个包含高质量管理界面模板的压缩文件,专为基于Vue.js和Vuetify框架的应用程序设计。这个模板是国外开发的,因此可以预期它包含了国际化的最佳实践和设计趋势。...

    管理系统系列--基于vue-admin-template 开发的后台权限管理系统 结合thinkphp5 权限管理 .zip

    管理系统系列--基于vue-admin-template开发的后台权限管理系统是现代Web应用程序开发中常见的一种架构模式,它结合了前端的Vue.js框架和后端的ThinkPHP5框架,为用户提供了一个功能完善的后台管理解决方案。...

    vueAdmin-template-master.zip

    VueAdmin-template-master.zip是一个包含Vue.js和Element UI框架的前端模板项目,主要用于简化Web开发过程中的前端构建工作。这个模板是基于Vue-admin-element的2.0版本,它提供了一个高效、可复用且易于定制的基础...

    基于vue-admin-template 修改后的通用动态权限路由模板

    【Vue-Admin-Template修改后的通用动态权限路由模板】是一个针对后台管理系统的优化方案,它基于流行的前端框架Vue.js,并且特别关注权限管理和动态路由。这个模板的核心特性是能够根据用户的权限动态生成路由表,...

    vim-template, 用于Vim的简单模板插件.zip

    vim-template, 用于Vim的简单模板插件 简单Vim模板插件作者:&gt; &lt;aperez@igalia.com对于Vim来说这是一个简单的插件,它允许你为某些文件类型设置一组模板。 在 C/C 报头中添加像警卫这样的样板代码是很有用的,或者是...

    vue3使用print-template生成pdfDemo

    总的来说,这个项目提供了一个使用Vue3和`print-template`库生成PDF的实例,涵盖了前端开发、TypeScript使用、现代构建工具Vite以及依赖管理等多个方面。对于想要学习如何在Vue3应用中实现PDF导出功能的开发者来说,...

    学习vue-admin-template,优化了大量融入代码,添加中文注释

    Vue-admin-template是基于Vue.js的一个后台管理系统模板,它提供了一个快速开发后台应用的基础架构。这个模板通常包含路由、组件、状态管理(Vuex)以及API调用等核心功能,极大地简化了开发流程。 在“学习vue-...

    vue-admin-template.zip

    Vue.js 是一个流行的前端JavaScript框架,由尤雨溪开发,用于构建用户界面。Vue-admin-template是一个基于Vue.js的项目模板,特别设计用于开发管理后台应用。这个模板包含了左侧侧边栏,提供了一种经典的后台首页...

    art-template.js

    "art-template.js" 是一个JavaScript库,特别版本为4.13.1。这个库主要用于HTML模板引擎,它提供了一种简洁的语法来处理数据和视图的绑定,使得开发者能够更方便地将动态数据注入到静态HTML模板中。通过引入...

    admin-vue-template-master.zip

    【标题】"admin-vue-template-master.zip" 是一个基于Vue.js框架构建的后台管理模板的压缩包文件。这个模板通常包含一系列预配置的组件、路由、样式和脚本,为开发人员提供了一个快速搭建企业级后台管理系统的基础。...

    Elsevier-template.doc

    Elsevier-template.doc 是 Elsevier 出版社提供的一种双栏 Word 模板,用于撰写期刊论文。下面将对该模板的标题、描述、标签和部分内容进行详细解释。 标题:Elsevier-template.doc 该标题表明该文档是 Elsevier ...

Global site tag (gtag.js) - Google Analytics