MyTpl高性能模板引擎

项目地址：https://github.com/NeverGiveUpLZ/MyTpl

 

之前发过一版本 https://blog.csdn.net/azazazazaz123456/article/details/80114452  不过这个版本过时了 

    很多模板引擎应用了缓存，我也看过有时候看着很搞笑，缓存并没有写入到 localStorage 等可以离线缓存地方，而是定义变量保存起来，这样的模板引擎基本就是忽悠人呢，来骗过模板引擎压力测试，页面刷新那些所谓的缓存也就当成垃圾被回收了，在实际中基本用不到，而useTpl则是真真实实的执行渲染了指定次数，所以测试数据量多少和模板字符串多少很重要

    开发这个引擎时候没有想过速度，不过开发出来，测试的速度还算可以，大神看到了不要笑话我，毕竟我不是搞前端的，我只是搞后台开发的

综合例子

https://github.com/NeverGiveUpLZ/MyTpl/blob/master/%E4%BE%8B%E5%AD%901-%E5%AD%97%E5%B8%96.html

 

• 注

   1我开发这个的时候为了小巧，没有可以注重速度方面
   2模板呢中两个空格以上将替换成一个空格
   3<!-- -->注释将被直接删除

• 使用

<!-- 可以在模板中定义额外变量 -->
{{var list=[{id:1},{id:2}];}}

<!-- 模板中的循环  -->
{{for(var iu=0;iu<list.length;iu++):}}
	{{=list[iu].id}}
{{/for}}

<!-- 使用上面js定义的 foreach  -->
{{var pi=3.1415926;}}
{{var arr=[{id:1},{id:2}];}}
{{ [{id:1},{id:2}].each(function(val){ }}
	###{{=val.id}}###
{{ }); }}


<!-- 可以批量定义变量 支持换行 -->
{{
	var fg='6';
	var gh="ES";
	var exc=2;
}}

<!--输出变量-->
<>{{=gh+fg*exc}}<br>
{{=pi}}<br>
{{=key定义变量才能作为模板的值}}<br>


<!--判断-->
{{if( 1>3 ):}}
	++
{{elseif(3>4):}}
	+++
{{else:}}
	++++
{{/if}}

<br>
<!--for循环-->
{{for(var iu=0;iu<10;iu++):}}
	--
{{/for}}

 

<!-- 可以在模板中定义额外变量 -->
{{var list=[{id:1},{id:2}];}}

<!-- 模板中的循环  -->
{{for(var iu=0;iu<list.length;iu++):}}
{{=list[iu].id}}
{{/for}}

<!-- 使用上面js定义的 foreach  -->
{{var pi=3.1415926;}}
{{var arr=[{id:1},{id:2}];}}
{{ [{id:1},{id:2}].each(function(val){ }}
###{{=val.id}}###
{{ }); }}


<!-- 可以批量定义变量 支持换行 -->
{{
var fg='6';
var gh="ES";
var exc=2;
}}

<!--输出变量-->
<>{{=gh+fg*exc}}<br>
{{=pi}}<br>
{{=key定义变量才能作为模板的值}}<br>


<!--判断-->
{{if( 1>3 ):}}
++
{{elseif(3>4):}}
+++
{{else:}}
++++
{{/if}}

<br>
<!--for循环-->
{{for(var iu=0;iu<10;iu++):}}
--
{{/for}}

 

其他

   设置边界符
   var uefn=usetpl({tagBegin:'{>',tagEnd:'<}'});
   设置模板
   uefn=uefn(模板);
   进行渲染
   document.write(uefn(数据,true));

   直接渲染输出
   document.write(usetpl(模板,数据));

• 注 下面的测试模板使用了自定义边界符，默认的边界符如下

   {
       tagBegin:'{{',
       tagEnd:'}}',
       tagOut:'='
   }

• 模板临时定义变量

  {>var pi=3.1415926;<}
  或
  {>
  	var a=1;
  	var b='b';>
  	var c="c";
  	var a=10+5+a;
  <}

• 输出

  {>=a<}
  或者输出参与计算
  {>=a+a*3<}

• 模板中直接运行函数

   {>alert('123');<}
   
   假如系统定义增强函数 each 函数如下
   Array.prototype.each=function(c){ /*1.1*/
       for(var i=0,val;val=this[i++];){
           (c||empfunc)(val,i);
       }
       return this;
   };
   使用
   {> [{id:1},{id:2}].each(function(val,key){ <}
       {>=val.id<}
   {> }); <}

• 判断 if 注意分号

   {>if( a>3 ):<}
       <span>a大于3</span
   {>elseif(a>4):<}
       <span>a大于4</span
   {>else:<}
  	<span>a不大于3也不大于4</span
  {>/if<}

• 循环

  {>var list=[{id:1},{id:2}]; <}
  {>for(var k=0;k<list.length;k++): <}
  	{>=list[k].id<}
  {>/for<}