{include file="$pageheader"} {include file="$model"} {$i=Math.random()} {var $jstr='this is a j string'}

....

Hanjst特征/Features


{foreach $newscontentlist as $page} {foreachelse} {/foreach}

....

Hanjst样例/Demo


"$" is a speical and default tag served as a prefix marker for a variable in Hanjst.

Try to call a func named 'aFunc': {$aFunc($i)}
"aFunc" is an user-defined function with JavaScript.
"$aFunc($i)" is to call aFunc and display its return value.
Similarly, "$alist[$i]" or "$alist[$i][$j]" is to display an element with $i as its key in a hash or array object.

Call a built-in func: {$jstr.substring(0, 12)}
"substring" is a built-in function for JavaScript.
"jstr" is a variable from server response, which will be accessed via $jstr.
"$jstr" is to display the variable "jstr".
"$jstr.substring(0, 12) is to shorten the string for first 12 bytes and/or chars, then display the modified $jstr.

Give random numbers: {while $i<5}
  • line {$i}
  • {$i++} {whileelse}
  • Out of While.
  • {/while}
    ....

    2nd, try to list an associative list: {for var $k in $userlist}

  • Id:{$userlist[$k]['id']}, Name:{$userlist[$k]['name']}
  • {forelse}
  • No more User Data.
  • {/for}

    3rd, try to list an associative list: {foreach $userlist as $k}
  • {$k} Id:{$userlist[$k]['id']}, Name:{$userlist[$k]['name']}
  • {/foreach}

    Try to branch-if-else: {$i=Math.random()} {if $i < 0.3}

  • {$i} is lt 0.3
  • {else if $i<0.5 }
  • {$i} is lt 0.5
  • {else}
  • {$i} is gt 0.5
  • {/if}

    Try literal:
    {literal} {if $user['feedback'] == 2} {$user['age']} {/if} {/literal}

    This is A SPAN with embedded Tpl sentence.
    This is a name. This is a name, 2nd.
    This is a span, 2nd.

    Due to limitations of embedded tags in an HTML element,
    we introduce "lt;" as less than (<) and "gt;" as greater than(>).

    Hanjst @ Github


    {include content="$pagefooter"}
    { "pagetitle": "-Hanjst, Hanjst", "newslist": { "0": {"title":"基于JavaScript通用HTML页面模板引擎", "href":"#11"}, "1": {"title":"Hanjst模板语义, 语法及解析引擎", "href":"#10"}, "2": {"title":"God's return to God, Caesar's return to Caesar; ", "href":"#9"}, "3": {"title":"the backend runs in background, the frontend is executed in foreground.", "href":"#8"}, "4": {"title":"上帝的归上帝, 凯撒的归凯撒; 后端的归后台, 前端的归前台", "href":"#7"} }, "keywords": "Wadelau, Xenxin, Hanjst", "newslist_nextpage": "https://ufqi.com/#newlist_nextpage_value", "newscontentlist2":{ }, "newscontentlist":{ "0":{"title":"Runtime in client-side, reduce computing render in server-side; 客户端解析,节省服务器端计算资源;", "content":"Runtime in client-side, reduce computing render in server-side;", "pages":3}, "1":{"title":"Language-independent, not-bound with backend scripts/languages; 模板语言独立,不与服务器端资源做任何绑定", "content":"Language-independent, not-bound with backend scripts/languages;", "pages":3}, "2":{"title":"Totally-isolated between MVC, data transfer with JSON; 纯粹的MVC,层间数据用JSON格式传递", "content":"Totally-isolated between MVC, data transfer with JSON;", "pages":2}, "3": {"title":"Full-support template tags with built-in logic and customerized JavaScript functions; 常见模板语言功能全支持,附带复杂而强大的JavaScript编程能力", "content":"Full-support template tags with built-in logic and customerized JavaScript functions;"}, "4": {"title":"No more tags language to be learned, just JavaScript; 无学习成本,直接使用JavaScript书写模板语言....", "content":"No more tags language to be learned, just JavaScript;"} }, "user": { "feedback": 2, "iname": {"surname":"Wadelau", "familyname":"Lau"}, "age": "33" }, "userlist2": { }, "userlist": { "usera": {"id":1234, "name":"Alice张"}, "userb": {"id":4567, "name":"Bob李"} }, "atag": "Xenxin\"s Tag", "pageheader":"<div id=\"header\"> <div class=\"h_box\"> <div class=\"logo\"><a href=\"#\">Hanjst, Han JavaScript Template Engine</a></div> <div class=\"menu\"> <ul> <li><a href=\"Hanjst.demo.html?ri=\">首页</a></li> <li><a href=\"#\">关于Hanjst</a> <div class=\"submenu\"> <ul> <li class=\"title\"><a href=\"#\">Hanjst介绍</a></li> <li class=\"title\"><a href=\"#\">Hanjst品牌</a></li> </ul> </div> </li> <li><a href=\"#\" class=\"active\">Hanjst in 新闻</a></li> </ul> </div> </div> <div class=\"clear\"></div> </div>", "model":"<div class=\"news\"> <div class=\"title\"><h3>Hanjst新闻/News</><hr/></div> <div class=\"content\"> <ul class=\"cont\" tpldata=\"newslist::repeat::\"> {for (var $k in $newslist)} <li><a class=\"btn_show\" href=\"{$newslist[$k]['href']}\"> {$newslist[$k]['title']} </a> <a name=\"atag\" tpldata=\"atag::updatevalue\">{$newslist[$k]['title']}</a> {if $newslist[$k]['title'].length > 25 } <span>Length is too long!</span> {else} <span>Length is okay.</span> {/if} </li> {/for} </ul> </div> <div class=\"pages\"> <ul> </ul> </div> </div>", "pagefooter":"<div id=\"footer\"> <script> if(1==1){console.log(\"2nd 1==1.\"+(new Date()));} else if(2==2) {if(3==3){console.log(\"2nd 3==3\"+(new Date()));};}; function aFunc(myi){if (1==1){console.log(\"this is in aFunc \"+(new Date())+''+myi); return ('now:'+(new Date())+''+myi);}} </script> <div class=\"f_box\"> <div class=\"f_logo\"> </div> <div class=\"f_menu\"> <ul> <li><a href=\"#\">联系Hanjst</a></li> © <span tpldata=\"copyright_year::updatevalue::\">{$copyright_year}</span> <a href=\"/\">-UFQI</a>. All rights reversed.</li> </ul> </div> <div class=\"allright_2\" onclick=\"javascript:if(1==1){aFunc();}else{if(1==1){aFunc();}}\">Hanjst, Han JavaScript Template Engine</div> </div> </div>" }