搜索
查看: 5821|回复: 5

[扩展库] 字符串模版Template----jsTemplate

  [复制链接]

3

主题

23

帖子

153

积分

一级会员

Rank: 2

积分
153
发表于 2013-7-16 17:04:54 | 显示全部楼层 |阅读模式
        underscore.js的template 修改过来的,用了一天的时间~~
        实现思想其实是通过eval返回一个中间函数,相当于一个简单的翻译模版过程
        模版字符串,可以向在JSP中那样定义,使用方法见下面的,喜欢用哪种就哪种好了
        例子A:在没有定义settings.variable的情况下,用了with(obj),外部函数需要..访问了
  1. import string.jsTemplate;
  2. import console;
  3. var str = /***
  4. print(myName):<% print(myName) %>;
  5. myName:<%=myName%>;

  6. <% for(k,v in dec ){
  7.         ..console.log(k,v);
  8. %>
  9. key: <%=k%>;
  10. value: <%=v%>;
  11. <%}%>
  12. ***/

  13. console.log(string.jsTemplate(str,{myName="wgu";dec={name="wgu";userName="legu2009"}}))
复制代码
例子B:定义了settings.variable为myobj,相关属性引用就需要指定myobj
  1. import string.jsTemplate;
  2. import console;
  3. var str = /***
  4. print(myName):<% print(myobj.myName) %>;
  5. myName:<%=myobj.myName%>;

  6. <% for(k,v in myobj.dec ){
  7.         console.log(k,v);
  8. %>
  9. key: <%=k%>;
  10. value: <%=v%>;
  11. <%}%>
  12. ***/

  13. console.log(jsTemplate(str,{myName="wgu";dec={name="wgu";userName="legu2009"}},{variable="myobj"}))
复制代码
jsTemplate的实现代码:
  1. namespace string;

  2. class jsTemplate {
  3.         ctor(text, data, settings) {
  4.                 var render;
  5.                 settings = ..table.mixin({
  6.                         interpolate = "\<\%(=?)([\s\S]+?)\%\>";
  7.                 },settings);
  8.                 var source = "__p++=/***";
  9.                 source ++= ..string.replace(text,settings.interpolate,function(operator, codes) {
  10.                          if (operator == "") {
  11.                                 return ("***/;" + codes + ';__p++=/***');
  12.                          } else if (operator == "=") {
  13.                                 return ("***/;__t=("+ codes +");__p++=(__t==null?'':__t);__p++=/***");
  14.                          }
  15.                 });       
  16.                 source ++= "***/;";
  17.                 // __p++=/******/ 修正 __p++=/******/ 语法错误;
  18.                 source = ..string.replace(source,"++=/******/;","++='';");
  19.                 if(!settings.variable)
  20.                 source = 'with(obj||{}){' + source + '}';
  21.                 source = "var __t,__p,__j='','',..string.join; var print = function (...){__p++=__j({...},'');};" + source + "return __p;";
  22.                 try {
  23.                         render = eval("function ("+(settings.variable||"obj")+") {" + source +"}");
  24.                 } catch (e) {
  25.                         return;
  26.                 }
  27.                 if(data)
  28.                         return render(data);
  29.                 var template = function(data) {
  30.                         return render(data);
  31.                 };
  32.                 return template;
  33.         };
  34. }

  35. /**intellisense()
  36. string.jsTemplate(text) = 编译后的模版函数
  37. string.jsTemplate(text,data) = 模版输出字符串
  38. string.jsTemplate(text,,settings) = 编译后的模版函数\n settings:(配置table),设置interpolate,改变匹配符号,设置variable,设定数据table
  39. string.jsTemplate(text,data,settings) = 模版输出字符串\n settings:(配置table),设置interpolate,改变匹配符号,设置variable,设定数据table
  40. end intellisense**/
复制代码

评分

参与人数 4专家分 +100 银币 +65 收起 理由
ZeronoFreya + 5 很给力!
Alive + 10 赞一个!高手呀!
51ak + 50 很给力!
look + 100 赞一个!

查看全部评分

回复

使用道具 举报

14

主题

56

帖子

525

积分

培训班

积分
525
发表于 2013-7-16 17:09:26 | 显示全部楼层

辛苦了,但我还真没看出来这个的作用{:L}

辛苦了,但我还真没看出来这个的作用
回复

使用道具 举报

9

主题

462

帖子

2551

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2551
发表于 2013-7-16 17:23:42 | 显示全部楼层

模板还是非常有用的。例如你用web ui做界面, 其中的一些动态显示的HTML可以写到模板里,这样HTML可以分离出来,代码比较整洁也容易维护。 提供几个生

模板还是非常有用的。例如你用web ui做界面,
其中的一些动态显示的HTML可以写到模板里,这样HTML可以分离出来,代码比较整洁也容易维护。
提供几个生成模板的方法:

简单的字符串模板(用表作参数就可以,非常简单)

  1. import string.template;

  2. var tmpStr = string.template()
  3. tmpStr.template = /***
  4.         ${模板参数}
  5.         ${模板参数2}
  6. ***/

  7. io.open()
  8. io.print( tmpStr.format(
  9.         模板参数 = 123;
  10.         模板参数2 = "xxxx"
  11. ), )
复制代码
namwonsta 写的 string.jsonTemplate

  1. import console;
  2. import string.jsonTemplate

  3. templatestr = /**
  4. {# This is a comment and will be removed from the output.}

  5. {.section songs}
  6.   <h2>Songs in '{playlist-name}'</h2>

  7.   <table width="100%">
  8.   {.repeated section @}
  9.     <tr>
  10.       <td><a href="{url-base|htmltag}{url|htmltag}">Play</a>
  11.       <td><i>{title}</i></td>
  12.       <td>{artist}</td>
  13.     </tr>
  14.   {.end}
  15.   </table>
  16. {.or}
  17.   <p><em>(No page content matches)</em></p>
  18. {.end}
  19. **/

  20. jsonstr = /**
  21. {
  22.   "url-base": "http://example.com/music/",
  23.   "playlist-name": "Epic Playlist",
  24.   "songs": [
  25.     {
  26.       "url": "1.mp3",
  27.       "artist": "Grayceon",
  28.       "title": "Sounds Like Thunder"
  29.     },
  30.     {
  31.       "url": "2.mp3",
  32.       "artist": "Thou",
  33.       "title": "Their Hooves Carve Craters in the Earth"
  34.     }
  35.   ]
  36. }
  37. **/

  38. tpl = string.jsonTemplate( templatestr ) ;  
  39. res = tpl.expandJson( jsonstr )
  40. console.log(res);

复制代码
回复

使用道具 举报

0

主题

9

帖子

83

积分

一级会员

Rank: 2

积分
83
发表于 2013-7-18 01:56:44 | 显示全部楼层

不太清楚这库能干嘛~

不太清楚这库能干嘛~
回复

使用道具 举报

6

主题

50

帖子

370

积分

二级会员

Rank: 3Rank: 3

积分
370
发表于 2018-8-28 22:00:35 | 显示全部楼层
roger 发表于 2013-7-16 17:23
模板还是非常有用的。例如你用web ui做界面,
其中的一些动态显示的HTML可以写到模板里,这样HTML可以分离 ...

请问这个模板库,怎么能输入循环体的index,比如aardio里的for(i=1;10),输入这里的 i?
回复

使用道具 举报

6

主题

50

帖子

370

积分

二级会员

Rank: 3Rank: 3

积分
370
发表于 2018-8-31 01:42:58 | 显示全部楼层
看了库源码,已解决,JsonTemplate库有一个@index,取得索引值
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-12-13 10:00 , Processed in 0.062500 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表