easy.templatejs
Version:
Small, pure, high-performance JavaScript template engine.
971 lines (879 loc) • 43.8 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>E:\360data\重要数据\我的文档\HBuilderProject\easytemplatejs\doc\.readme_zh_CN.md.html</title>
<style type="text/css">
body {
color: #333;
font: 13px/1.4 "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
padding: 0;
margin: 0;
}
a {
background: transparent;
color: #4183c4;
text-decoration: none;
}
a:active,
a:hover {
outline: 0 none;
text-decoration: underline;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0 none;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
}
code,
kbd,
pre,
samp {
font-family: monospace,monospace;
font-size: 1em;
}
pre {
overflow: auto;
font: 12px Consolas,"Liberation Mono",Menlo,Courier,monospace;
margin-bottom: 0;
margin-top: 0;
}
.markdown-body {
padding: 30px;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
}
.markdown-body>*:first-child {
margin-top: 0 ;
}
.markdown-body>*:last-child {
margin-bottom: 0 ;
}
.markdown-body .absent {
color: #c00;
}
.markdown-body .anchor {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
padding-right: 6px;
padding-left: 30px;
margin-left: -30px;
}
.markdown-body .anchor:focus {
outline: none;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
position: relative;
margin-top: 1em;
margin-bottom: 16px;
font-weight: bold;
line-height: 1.4;
}
.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
display: none;
color: #000;
vertical-align: middle;
}
.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
padding-left: 8px;
margin-left: -30px;
line-height: 1;
text-decoration: none;
}
.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
display: inline-block;
}
.markdown-body h1 tt,
.markdown-body h1 code,
.markdown-body h2 tt,
.markdown-body h2 code,
.markdown-body h3 tt,
.markdown-body h3 code,
.markdown-body h4 tt,
.markdown-body h4 code,
.markdown-body h5 tt,
.markdown-body h5 code,
.markdown-body h6 tt,
.markdown-body h6 code {
font-size: inherit;
}
.markdown-body h1 {
padding-bottom: 0.3em;
font-size: 2.25em;
line-height: 1.2;
border-bottom: 1px solid #eee;
}
.markdown-body h2 {
padding-bottom: 0.3em;
font-size: 1.75em;
line-height: 1.225;
border-bottom: 1px solid #eee;
}
.markdown-body h3 {
font-size: 1.5em;
line-height: 1.43;
}
.markdown-body h4 {
font-size: 1.25em;
}
.markdown-body h5 {
font-size: 1em;
}
.markdown-body h6 {
font-size: 1em;
color: #777;
}
.markdown-body p,.markdown-body blockquote,
.markdown-body ul,.markdown-body ol,
.markdown-body dl,.markdown-body table,
.markdown-body pre {
margin-top: 0;
margin-bottom: 16px;
}
.markdown-body hr {
height: 4px;
padding: 0;
margin: 16px 0;
background-color: #e7e7e7;
border: 0 none;
}
.markdown-body ul,
.markdown-body ol {
padding-left: 2em;
}
.markdown-body ul.no-list,
.markdown-body ol.no-list {
padding: 0;
list-style-type: none;
}
.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
margin-top: 0;
margin-bottom: 0;
}
.markdown-body li>p {
margin-top: 16px;
}
.markdown-body dl {
padding: 0;
}
.markdown-body dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-weight: bold;
}
.markdown-body dl dd {
padding: 0 16px;
margin-bottom: 16px;
}
.markdown-body blockquote {
padding: 0 15px;
color: #777;
border-left: 4px solid #ddd;
}
.markdown-body blockquote>:first-child {
margin-top: 0;
}
.markdown-body blockquote>:last-child {
margin-bottom: 0;
}
.markdown-body table {
display: block;
width: 100%;
overflow: auto;
word-break: normal;
word-break: keep-all;
}
.markdown-body table th {
font-weight: bold;
}
.markdown-body table th,
.markdown-body table td {
padding: 6px 13px;
border: 1px solid #ddd;
}
.markdown-body table tr {
background-color: #fff;
border-top: 1px solid #ccc;
}
.markdown-body table tr:nth-child(2n) {
background-color: #f8f8f8;
}
.markdown-body img {
max-width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.markdown-body span.frame {
display: block;
overflow: hidden;
}
.markdown-body span.frame>span {
display: block;
float: left;
width: auto;
padding: 7px;
margin: 13px 0 0;
overflow: hidden;
border: 1px solid #ddd;
}
.markdown-body span.frame span img {
display: block;
float: left;
}
.markdown-body span.frame span span {
display: block;
padding: 5px 0 0;
clear: both;
color: #333;
}
.markdown-body span.align-center {
display: block;
overflow: hidden;
clear: both;
}
.markdown-body span.align-center>span {
display: block;
margin: 13px auto 0;
overflow: hidden;
text-align: center;
}
.markdown-body span.align-center span img {
margin: 0 auto;
text-align: center;
}
.markdown-body span.align-right {
display: block;
overflow: hidden;
clear: both;
}
.markdown-body span.align-right>span {
display: block;
margin: 13px 0 0;
overflow: hidden;
text-align: right;
}
.markdown-body span.align-right span img {
margin: 0;
text-align: right;
}
.markdown-body span.float-left {
display: block;
float: left;
margin-right: 13px;
overflow: hidden;
}
.markdown-body span.float-left span {
margin: 13px 0 0;
}
.markdown-body span.float-right {
display: block;
float: right;
margin-left: 13px;
overflow: hidden;
}
.markdown-body span.float-right>span {
display: block;
margin: 13px auto 0;
overflow: hidden;
text-align: right;
}
.markdown-body code,.markdown-body tt {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: rgba(0,0,0,0.04);
border-radius: 3px;
}
.markdown-body code:before,
.markdown-body code:after,
.markdown-body tt:before,
.markdown-body tt:after {
letter-spacing: -0.2em;
content: "\00a0";
}
.markdown-body code br,
.markdown-body tt br {
display: none;
}
.markdown-body del code {
text-decoration: inherit;
}
.markdown-body pre>code {
padding: 0;
margin: 0;
font-size: 100%;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}
.markdown-body .highlight {
margin-bottom: 16px;
}
.markdown-body .highlight pre,
.markdown-body pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #f7f7f7;
border-radius: 3px;
}
.markdown-body .highlight pre {
margin-bottom: 0;
word-break: normal;
}
.markdown-body pre {
word-wrap: normal;
}
.markdown-body pre code,
.markdown-body pre tt {
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
.markdown-body pre code:before,
.markdown-body pre code:after,
.markdown-body pre tt:before,
.markdown-body pre tt:after {
content: normal;
}
.highlight .pl-coc,
.highlight .pl-entl,
.highlight .pl-entm,
.highlight .pl-eoa,
.highlight .pl-mai .pl-sf,
.highlight .pl-mm,
.highlight .pl-pdv,
.highlight .pl-sc,
.highlight .pl-som,
.highlight .pl-sr,
.highlight .pl-v,
.highlight .pl-vpf {
color: #0086b3;
}
.highlight .pl-eoac,
.highlight .pl-mdht,
.highlight .pl-mi1,
.highlight .pl-mri,
.highlight .pl-va,
.highlight .pl-vpu {
color: #008080;
}
.highlight .pl-c,
.highlight .pl-pdc {
color: #b4b7b4;
font-style: italic;
}
.highlight .pl-k,
.highlight .pl-ko,
.highlight .pl-kolp,
.highlight .pl-mc,
.highlight .pl-mr,
.highlight .pl-ms,
.highlight .pl-s,
.highlight .pl-sok,
.highlight .pl-st {
color: #6e5494;
}
.highlight .pl-ef,
.highlight .pl-enf,
.highlight .pl-enm,
.highlight .pl-entc,
.highlight .pl-eoi,
.highlight .pl-sf,
.highlight .pl-smc {
color: #d12089;
}
.highlight .pl-ens,
.highlight .pl-eoai,
.highlight .pl-kos,
.highlight .pl-mh .pl-pdh,
.highlight .pl-mp,
.highlight .pl-pde,
.highlight .pl-stp {
color: #458;
}
.highlight .pl-enti {
color: #d12089;
font-weight: bold;
}
.highlight .pl-cce,
.highlight .pl-enc,
.highlight .pl-kou,
.highlight .pl-mq {
color: #f93;
}
.highlight .pl-mp1 .pl-sf {
color: #458;
font-weight: bold;
}
.highlight .pl-cos,
.highlight .pl-ent,
.highlight .pl-md,
.highlight .pl-mdhf,
.highlight .pl-ml,
.highlight .pl-pdc1,
.highlight .pl-pds,
.highlight .pl-s1,
.highlight .pl-scp,
.highlight .pl-sol {
color: #df5000;
}
.highlight .pl-c1,
.highlight .pl-cn,
.highlight .pl-pse,
.highlight .pl-pse .pl-s2,
.highlight .pl-vi {
color: #a31515;
}
.highlight .pl-mb,
.highlight .pl-pdb {
color: #df5000;
font-weight: bold;
}
.highlight .pl-mi,
.highlight .pl-pdi {
color: #6e5494;
font-style: italic;
}
.highlight .pl-ms1 {
background-color: #f5f5f5;
}
.highlight .pl-mdh,
.highlight .pl-mdi {
font-weight: bold;
}
.highlight .pl-mdr {
color: #0086b3;
font-weight: bold;
}
.highlight .pl-s2 {
color: #333;
}
.highlight .pl-ii {
background-color: #df5000;
color: #fff;
}
.highlight .pl-ib {
background-color: #f93;
}
.highlight .pl-id {
background-color: #a31515;
color: #fff;
}
.highlight .pl-iu {
background-color: #b4b7b4;
}
.highlight .pl-mo {
color: #969896;
}
</style>
<script type="text/javascript">
function getDocumentScrollTop()
{
var res = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0;
// alert(res);
return res;
}
function setDocumentScrollTop(ypos)
{
window.scrollTo(0, ypos);
}
</script>
</head>
<body class="markdown-body">
<h1> <a id="easytemplatejs-模板引擎使用手册" class="anchor" href="#easytemplatejs-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>EasyTemplateJS 模板引擎使用手册</h1>
<p><strong>EasyTemplateJS（EasyTemplate JavaScript）是一款小巧，纯粹，高性能的 JavaScript 模板引擎。</strong></p>
<p>JavaScript 模板引擎作为数据与界面分离工作中最重要一环。使用 JavaScript 模板函数能够避免在 JavaScript 中拼接 <code>HTML</code> 字符串带来的不便和低维护性的缺点，利用反向思路，在 <code>HTML</code> 中嵌入 JavaScript 脚本，就像利用 <code>JSP</code> 和 <code>ASP</code> 技术编程一样。EasyTemplate 能够提供超高性能的渲染引擎，在 JavaScript 中使用模板技术来简化操作，并增强程序设计的灵活性。</p>
<p>The latest version: <code>2.1.1-RELEASE</code></p>
<h2> <a id="特点" class="anchor" href="#%E7%89%B9%E7%82%B9" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>特点</h2>
<ul>
<li><p>小巧，纯粹</p></li>
<li><p>预先静态编译，高性能</p></li>
<li><p>灵活自定义</p></li>
<li><p>支持转义输出表达式</p></li>
<li><p>支持 out 输出</p></li>
<li><p>模块化支持：<code>CommonJS</code>, <code>AMD</code>, <code>CMD</code>, <code>Node.js</code></p></li>
<li><p>Bower 支持</p></li>
</ul>
<h2> <a id="performance-test-comparison性能测试对比" class="anchor" href="#performance-test-comparison%E6%80%A7%E8%83%BD%E6%B5%8B%E8%AF%95%E5%AF%B9%E6%AF%94" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Performance test comparison/性能测试对比</h2>
<p>从渲染性能上来说， <strong>EasyTemplateJS</strong> 和 artTemplate 都是使用预先静态编译原理，可以说已经接近的性能极限，是当前性能最高的模板引擎。一些实现较差的引擎不仅可能影响客户体验，还会会引起浏览器崩溃或异常终止，百度的引擎则性能较差，对浏览器渲染执行影响巨大。</p>
<p><a href="imgs/performance.png" target="_blank"><img src="imgs/performance.png" alt="Performance test comparison" style="max-width:100%;" /></a></p>
<h2> <a id="使用" class="anchor" href="#%E4%BD%BF%E7%94%A8" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>使用</h2>
<h3> <a id="1-引入js文件" class="anchor" href="#1-%E5%BC%95%E5%85%A5js%E6%96%87%E4%BB%B6" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>1. 引入JS文件</h3>
<ul>
<li> <p>下载安装</p>
<div class="highlight highlight-text-html-basic">
<pre><<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/javascript<span class="pl-pds">"</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>easy.templatejs.min.js<span class="pl-pds">"</span></span>></<span class="pl-ent">script</span>></pre>
</div> </li>
<li> <p>安装</p>
<div class="highlight highlight-source-shell">
<pre>bower install easytemplatejs --save</pre>
</div>
<div class="highlight highlight-text-html-basic">
<pre><<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>bower_components/easytemplate/dist/easy.templatejs.min.js<span class="pl-pds">"</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/javascript<span class="pl-pds">"</span></span> <span class="pl-e">charset</span>=<span class="pl-s"><span class="pl-pds">"</span>utf-8<span class="pl-pds">"</span></span>></<span class="pl-ent">script</span>></pre>
</div> </li>
<li> <p>Npm 安装</p>
<div class="highlight highlight-source-shell">
<pre>npm install easytemplatejs</pre>
</div>
<div class="highlight highlight-source-js">
<pre><span class="pl-k">var</span> Et <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">'</span>easytemplatejs<span class="pl-pds">'</span></span>);</pre>
</div> </li>
</ul>
<h3> <a id="2-templatejs-模板表达式" class="anchor" href="#2-templatejs-%E6%A8%A1%E6%9D%BF%E8%A1%A8%E8%BE%BE%E5%BC%8F" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>2. TemplateJS 模板表达式</h3>
<p>TemplateJS 支持三类模板表达式，表达式不允许嵌套或交叉:</p>
<ol>
<li> <p><strong>脚本表达式</strong></p> <p><code>%{ JavaScript Script }%</code>： 执行任意的 JavaScript 代码（作用JSP的<code><% %></code>小脚本相同），JS脚本中的 <code><</code>、<code>></code> 等特殊符号，也可使用对应字符实体代替。</p> </li>
<li> <p><strong>输出表达式</strong></p> <p><code>{expression}</code>： 插入要输出的变量（作用与 JSP 的 <code><%=expression%></code> 相同）。</p> </li>
<li> <p><strong>转义输出表达式</strong></p> <p><code>{-expression}</code>： 用法与<code>{expression}</code>相同，输出数据时会自动转义特殊字符为字符实体。</p> </li>
</ol>
<ul>
<li> <p><strong>为什么选择 %{}%， {} 作为闭合标签？</strong></p> <p>EasyTemplateJS 没有选择常用的 <code><%%></code> 或 <code>${}</code> 作为模板引擎的默认闭合标签，因为在 <code>JSP</code>，<code>ASP</code> 等动态页面中，<code><%%></code>，<code>${}</code> 都本身是动态特殊标记，当在 <code>JSP</code> 页面定义模板标签时，会对 <code>JSP</code> 解析造成影响，导致编译错误。所以 EasyTemplate 选择了尽量不会与其他语言冲突的 <code>%{}%</code> <code>{}</code>。</p> <p>尽管如此，但是如果您更喜欢使用 <code><%%></code> 或 <code>${}</code>，本身 EasyTemplate 模板标签是对外允许自定义的，您可以修改为 <code><%%></code>，以兼容你旧的模板代码。 (<code>参考 5. 模板表达式闭合标签自定义</code>)</p> </li>
</ul>
<h3> <a id="3-使用实例" class="anchor" href="#3-%E4%BD%BF%E7%94%A8%E5%AE%9E%E4%BE%8B" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>3. 使用实例</h3>
<p>EasyTemplateJS 向外暴露了一个名为<strong><code>Et</code></strong>的对象，用来完成模板操作。</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c"><span class="pl-c">//</span> 1. 直接执行模板</span>
<span class="pl-k">var</span> result <span class="pl-k">=</span> <span class="pl-smi">Et</span>.<span class="pl-en">template</span>(tmplText, data);
<span class="pl-c"><span class="pl-c">//</span> 2. 模板编译</span>
<span class="pl-k">var</span> compiled <span class="pl-k">=</span> <span class="pl-smi">Et</span>.<span class="pl-en">template</span>(tmplText);
<span class="pl-c"><span class="pl-c">//</span> 编译后执行</span>
<span class="pl-k">var</span> res2 <span class="pl-k">=</span> <span class="pl-en">compiled</span>(data);
<span class="pl-k">var</span> res3 <span class="pl-k">=</span> <span class="pl-en">compiled</span>(data2);
<span class="pl-k">var</span> res4 <span class="pl-k">=</span> <span class="pl-en">compiled</span>(data3);</pre>
</div>
<ul>
<li> <p>模板基本示例</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c"><span class="pl-c">//</span> Basic demo</span>
<span class="pl-k">var</span> compiled <span class="pl-k">=</span> <span class="pl-smi">Et</span>.<span class="pl-en">template</span>(<span class="pl-s"><span class="pl-pds">"</span>hello: { name }, {-name}<span class="pl-pds">"</span></span>);
<span class="pl-k">var</span> res <span class="pl-k">=</span> <span class="pl-en">compiled</span>({
name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>MoMo<span class="pl-pds">'</span></span>
});
<span class="pl-en">console</span>.<span class="pl-c1">info</span>(res); <span class="pl-c"><span class="pl-c">//</span> hello: MoMo, MoMo</span>
<span class="pl-c"><span class="pl-c">//</span> Special label, test escape</span>
<span class="pl-k">var</span> res2 <span class="pl-k">=</span> <span class="pl-en">compiled</span>({
name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><MoMo><span class="pl-pds">'</span></span>
});
<span class="pl-en">console</span>.<span class="pl-c1">info</span>(res2); <span class="pl-c"><span class="pl-c">//</span> hello: <MoMo>, &lt;MoMo&gt;</span>
<span class="pl-c"><span class="pl-c">//</span> Test escape (Special label)</span>
<span class="pl-k">var</span> compiled2 <span class="pl-k">=</span> <span class="pl-smi">Et</span>.<span class="pl-en">template</span>(<span class="pl-s"><span class="pl-pds">"</span><u>{- value }</u><span class="pl-pds">"</span></span>);
<span class="pl-k">var</span> res3 <span class="pl-k">=</span> <span class="pl-en">compiled2</span>({
value<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><script><span class="pl-pds">'</span></span>
});
<span class="pl-en">console</span>.<span class="pl-c1">info</span>(res3); <span class="pl-c"><span class="pl-c">//</span> <u>&lt;script&gt;</u></span>
<span class="pl-k">var</span> res4 <span class="pl-k">=</span> <span class="pl-smi">Et</span>.<span class="pl-en">template</span>(<span class="pl-s"><span class="pl-pds">"</span>%{ out('Hello: '+name); }%<span class="pl-pds">"</span></span>, {
name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>JACK<span class="pl-pds">"</span></span>
});
<span class="pl-en">console</span>.<span class="pl-c1">info</span>(res4); <span class="pl-c"><span class="pl-c">//</span>Hello: JACK</span></pre>
</div> </li>
<li> <p>HTML 模板示例</p>
<div class="highlight highlight-text-html-basic">
<pre><span class="pl-c"><span class="pl-c"><!--</span> 普通模板 <span class="pl-c">--></span></span>
<<span class="pl-ent">script</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>tmpl<span class="pl-pds">"</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/tmpl<span class="pl-pds">"</span></span>>
%{ for(var i in people){ }%
<<span class="pl-ent">li</span>>{i} = { people[i] }</<span class="pl-ent">li</span>>
%{ } }%
</<span class="pl-ent">script</span>>
<span class="pl-c"><span class="pl-c"><!--</span> 使用HTML定义模板内容时，如果有<、>等特殊内容，可以使用对应字符实体代替 <span class="pl-c">--></span></span>
<<span class="pl-ent">script</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>tmpl2<span class="pl-pds">"</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/tmpl<span class="pl-pds">"</span></span>>
%{ for(var i=0; i <span class="pl-c1">&lt;</span> people.length; i++){ }%
<<span class="pl-ent">li</span>>{i} = { people[i] }</<span class="pl-ent">li</span>>
%{ } }%
</<span class="pl-ent">script</span>>
<span class="pl-c"><span class="pl-c"><!--</span> 使用 out 输出 <span class="pl-c">--></span></span>
<<span class="pl-ent">script</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>tmpl3<span class="pl-pds">"</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/tmpl<span class="pl-pds">"</span></span>>
%{
for(var i=0; i < people.length; i++){
out( "<<span class="pl-ent">li</span>>"+i+ " = "+people[i]+ "</<span class="pl-ent">li</span>> ");
}
}%
</<span class="pl-ent">script</span>>
<span class="pl-s1"><<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/javascript<span class="pl-pds">"</span></span>></span>
<span class="pl-s1"> <span class="pl-c"><span class="pl-c">//</span>借助了jQuery</span></span>
<span class="pl-s1"> <span class="pl-en">$</span>(<span class="pl-k">function</span>(){</span>
<span class="pl-s1"> <span class="pl-c"><span class="pl-c"><!--</span></span> 使用模板 <span class="pl-c"><span class="pl-c">--></span></span></span>
<span class="pl-s1"> <span class="pl-c"><span class="pl-c">//</span> temp demo</span></span>
<span class="pl-s1"> <span class="pl-k">var</span> tmpl <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>#tmpl<span class="pl-pds">"</span></span>).<span class="pl-en">html</span>();</span>
<span class="pl-s1"> <span class="pl-k">var</span> res5 <span class="pl-k">=</span> <span class="pl-smi">Et</span>.<span class="pl-en">template</span>(tmpl, {</span>
<span class="pl-s1"> people<span class="pl-k">:</span> [<span class="pl-s"><span class="pl-pds">'</span>MoMo<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>Joy<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>Ray<span class="pl-pds">'</span></span>]</span>
<span class="pl-s1"> });</span>
<span class="pl-s1"> <span class="pl-en">console</span>.<span class="pl-c1">info</span>(res5);</span>
<span class="pl-s1"></span>
<span class="pl-s1"> <span class="pl-c"><span class="pl-c">//</span> temp2 demo</span></span>
<span class="pl-s1"> <span class="pl-k">var</span> tmpl2 <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>#tmpl2<span class="pl-pds">"</span></span>).<span class="pl-en">html</span>(); </span>
<span class="pl-s1"> <span class="pl-k">var</span> res6 <span class="pl-k">=</span> <span class="pl-smi">Et</span>.<span class="pl-en">template</span>(tmpl2, {</span>
<span class="pl-s1"> people<span class="pl-k">:</span> [<span class="pl-s"><span class="pl-pds">'</span>MoMo<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>Joy<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>Ray<span class="pl-pds">'</span></span>]</span>
<span class="pl-s1"> });</span>
<span class="pl-s1"> <span class="pl-en">console</span>.<span class="pl-c1">info</span>(res6);</span>
<span class="pl-s1"></span>
<span class="pl-s1"> <span class="pl-c"><span class="pl-c">//</span> temp3 demo</span></span>
<span class="pl-s1"> <span class="pl-k">var</span> tmpl3 <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>#tmpl3<span class="pl-pds">"</span></span>).<span class="pl-en">html</span>(); </span>
<span class="pl-s1"> <span class="pl-k">var</span> res7 <span class="pl-k">=</span> <span class="pl-smi">Et</span>.<span class="pl-en">template</span>(tmpl3, {</span>
<span class="pl-s1"> people<span class="pl-k">:</span> [<span class="pl-s"><span class="pl-pds">'</span>MoMo<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>Joy<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>Ray<span class="pl-pds">'</span></span>]</span>
<span class="pl-s1"> });</span>
<span class="pl-s1"> <span class="pl-en">console</span>.<span class="pl-c1">info</span>(res7);</span>
<span class="pl-s1"> });</span>
<span class="pl-s1"></<span class="pl-ent">script</span>></span></pre>
</div> <p>输出结果：</p>
<div class="highlight highlight-text-html-basic">
<pre><<span class="pl-ent">li</span>>0 = MoMo</<span class="pl-ent">li</span>>
<<span class="pl-ent">li</span>>1 = Joy</<span class="pl-ent">li</span>>
<<span class="pl-ent">li</span>>2 = Ray</<span class="pl-ent">li</span>> </pre>
</div> </li>
</ul>
<h3> <a id="4-使用-out-输出信息" class="anchor" href="#4-%E4%BD%BF%E7%94%A8-out-%E8%BE%93%E5%87%BA%E4%BF%A1%E6%81%AF" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>4. 使用 out 输出信息</h3>
<p>您也可以在JavaScript代码中使用 <code>out</code> 函数输出信息，这样不用断开您的代码块，有时候这会比使用 <code>{name}</code> 更方便清晰。</p>
<div class="highlight highlight-text-html-basic">
<pre><span class="pl-c"><span class="pl-c"><!--</span> 使用 out 输出 <span class="pl-c">--></span></span>
<<span class="pl-ent">script</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>tmpl3<span class="pl-pds">"</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/tmpl<span class="pl-pds">"</span></span>>
%{
for(var i=0; i < people.length; i++){
// out function
out( "<<span class="pl-ent">li</span>>"+i+ " = "+people[i]+ "</<span class="pl-ent">li</span>> ");
}
}%
</<span class="pl-ent">script</span>></pre>
</div>
<div class="highlight highlight-source-js">
<pre><span class="pl-k">var</span> res4 <span class="pl-k">=</span> <span class="pl-smi">Et</span>.<span class="pl-en">template</span>(<span class="pl-s"><span class="pl-pds">"</span>%{ out('Hello: '+name); }%<span class="pl-pds">"</span></span>, {
name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>JACK<span class="pl-pds">"</span></span>
});
<span class="pl-en">console</span>.<span class="pl-c1">info</span>(res4); <span class="pl-c"><span class="pl-c">//</span>Hello: JACK</span></pre>
</div>
<h3> <a id="5-模板表达式闭合标签自定义" class="anchor" href="#5-%E6%A8%A1%E6%9D%BF%E8%A1%A8%E8%BE%BE%E5%BC%8F%E9%97%AD%E5%90%88%E6%A0%87%E7%AD%BE%E8%87%AA%E5%AE%9A%E4%B9%89" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>5. 模板表达式闭合标签自定义</h3>
<p>由于某些模板定义和执行块在某些动态页面（<code>JSP</code>, <code>ASP</code>）中具有特殊涵义，所以在某些页面中使用模板符号会引起错误。EasyTemplate允许改变模板设置, 使用别的符号来嵌入代码。</p>
<blockquote>
<p><strong>为什么选择 %{}%， {} 作为闭合标签？</strong></p>
<p>EasyTemplateJS 没有选择常用的 <code><%%></code> 或 <code>${}</code> 作为模板引擎的默认闭合标签，因为在 <code>JSP</code>，<code>ASP</code> 等动态页面中，<code><%%></code>，<code>${}</code> 都本身是动态特殊标记，当在 <code>JSP</code> 页面定义模板标签时，会对 <code>JSP</code> 解析造成影响，导致编译错误。所以 EasyTemplate 选择了尽量不会与其他语言冲突的 <code>%{}%</code> <code>{}</code>。</p>
<p>尽管如此，但是如果您更喜欢使用 <code><%%></code> 或 <code>${}</code>，本身 EasyTemplate 模板标签是对外允许自定义的，您可以修改为 <code><%%></code>，以兼容你旧的模板代码。 </p>
</blockquote>
<p><strong>注意：</strong> 如果您绝对修改模板表达式的闭合标签，您需要小心检查您的定义逻辑是否合理。</p>
<p><code>Et.tmplSettings</code> 默认配置：</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-smi">Et</span>.<span class="pl-smi">tmplSettings</span><span class="pl-k">=</span>{
<span class="pl-c"><span class="pl-c">//</span> 脚本表达式开始结束标记%{ JS script }%</span>
scriptBegin<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span>%{<span class="pl-pds">"</span></span>,
scriptEnd<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span>}%<span class="pl-pds">"</span></span>,
<span class="pl-c"><span class="pl-c">//</span> 输出表达式开始结束标记 {name}</span>
outBegin<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span>{<span class="pl-pds">"</span></span>,
outEnd<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span>}<span class="pl-pds">"</span></span>,
<span class="pl-c"><span class="pl-c">//</span> 转义输出表达式开始结束标记 {-name}</span>
escapeOutBegin<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span>{-<span class="pl-pds">"</span></span>,
escapeOutEnd<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span>}<span class="pl-pds">"</span></span>
}</pre>
</div>
<p>重新定义示例：</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c"><span class="pl-c">//</span> 修改脚本表达式开始结束标记</span>
<span class="pl-k">var</span> userSettings<span class="pl-k">=</span>
{
<span class="pl-c"><span class="pl-c">//</span> 脚本表达式开始结束标记 <% JS script %></span>
scriptBegin<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span><%<span class="pl-pds">"</span></span>,
scriptEnd<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span>%><span class="pl-pds">"</span></span>,
<span class="pl-c"><span class="pl-c">//</span> 输出表达式开始结束标记 <%=name %></span>
outBegin<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span><%=<span class="pl-pds">"</span></span>,
outEnd<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span>%><span class="pl-pds">"</span></span>,
<span class="pl-c"><span class="pl-c">//</span> 转义输出表达式开始结束标记 <%-name %></span>
escapeOutBegin<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span><%-<span class="pl-pds">"</span></span>,
escapeOutEnd<span class="pl-k">:</span><span class="pl-s"><span class="pl-pds">"</span>%><span class="pl-pds">"</span></span>
}</pre>
</div>
<div class="highlight highlight-source-js">
<pre><span class="pl-c"><span class="pl-c">//</span> 全局修改</span>
<span class="pl-smi">Et</span>.<span class="pl-smi">tmplSettings</span><span class="pl-k">=</span>userSettings;
<span class="pl-c"><span class="pl-c">//</span> 测试</span>
<span class="pl-en">console</span>.<span class="pl-c1">info</span>(
<span class="pl-smi">Et</span>.<span class="pl-en">template</span>(
<span class="pl-s"><span class="pl-pds">"</span>hello: <%= name %>, <%- name %><span class="pl-pds">"</span></span>, <span class="pl-c"><span class="pl-c">//</span> templateText</span>
{name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><MoMo><span class="pl-pds">'</span></span>} <span class="pl-c"><span class="pl-c">//</span> data</span>
)
); </pre>
</div>
<div class="highlight highlight-source-js">
<pre><span class="pl-c"><span class="pl-c">//</span> 局部修改测试</span>
<span class="pl-en">console</span>.<span class="pl-c1">info</span>(
<span class="pl-smi">Et</span>.<span class="pl-en">template</span>(
<span class="pl-s"><span class="pl-pds">"</span>hello: <%= name %>, <%- name %><span class="pl-pds">"</span></span>, <span class="pl-c"><span class="pl-c">//</span> templateText</span>
{name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><MoMo><span class="pl-pds">'</span></span>}, <span class="pl-c"><span class="pl-c">//</span> data</span>
userSettings <span class="pl-c"><span class="pl-c">//</span>settings</span>
)
); </pre>
</div>
<h3> <a id="6-api" class="anchor" href="#6-api" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>6. API</h3>
<p><code>Et</code> 暴露了有限的几个 API:</p>
<ul>
<li> <p>核心函数</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c">/**</span>
<span class="pl-c"> * 模板引擎编译核心函数</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{String}</span> <span class="pl-smi">tmplText</span> 模板代码</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{Object}</span> <span class="pl-smi">data</span> 模板数据；可选</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{Et.tmplSettings}</span> <span class="pl-smi">settings</span> 引擎动态控制参数；可选</span>
<span class="pl-c"> * <span class="pl-k">@return</span> <span class="pl-en">{String|function}</span> 如果 data 不为空，则返回 String 渲染结果；否则，返回一个编译后的 function 渲染函数</span>
<span class="pl-c"> */</span>
<span class="pl-smi">Et</span>.<span class="pl-en">template</span>(tmplText, data, settings);</pre>
</div> </li>
<li> <p>模板闭合标签自定义(<code>5. 模板表达式闭合标签自定义</code>)</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-smi">Et</span>.<span class="pl-smi">tmplSettings</span> <span class="pl-k">=</span>{<span class="pl-k">...</span>}</pre>
</div> </li>
<li> <p>将字符串中的特殊字符转义为字符实体，并返回</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c">/**</span>
<span class="pl-c"> * 将字符串中的特殊字符转义为字符实体，并返回</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{String}</span> <span class="pl-smi">text</span> 字符串</span>
<span class="pl-c"> * <span class="pl-k">@return</span> <span class="pl-en">{String}</span> 转意后的字符串</span>
<span class="pl-c"> */</span>
<span class="pl-smi">Et</span>.<span class="pl-en">escape</span>(text);</pre>
</div> </li>
<li> <p>escape的反向操作函数，将字符串中的字符实体转移为字符，并返回</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c">/**</span>
<span class="pl-c"> * escape的反向操作函数，将字符串中的字符实体转移为字符，并返回</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{text}</span> <span class="pl-smi">string</span> 字符串</span>
<span class="pl-c"> * <span class="pl-k">@return</span> <span class="pl-en">{String}</span> 转意后的字符串</span>
<span class="pl-c"> */</span>
<span class="pl-smi">Et</span>.<span class="pl-en">unescape</span>(text);</pre>
</div> </li>
<li> <p>遍历集合或对象</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c">/**</span>
<span class="pl-c"> * 遍历集合或对象。</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{Object}</span> <span class="pl-smi">obj</span> 要遍历的集合或对象</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{function}</span> <span class="pl-smi">iterator</span> 迭代函数，包括值、索引、集合对象三个参数</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{Object}</span> <span class="pl-smi">context</span> 将iterator绑定到context上执行，可用来向iteraotr传递一些其他元素</span>
<span class="pl-c"> */</span>
<span class="pl-smi">Et</span>.<span class="pl-en">each</span>(list, iterator, [context]);</pre>
</div> </li>
<li> <p>将 <code>Et</code> 引用的对象还原为原始对象，并返回 <code>Et</code> 对象。</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c">/**</span>
<span class="pl-c"> * 排除冲突</span>
<span class="pl-c"> * <span class="pl-k">@return</span> <span class="pl-en">{Et}</span> Et 对象</span>
<span class="pl-c"> */</span>
<span class="pl-smi">Et</span>.<span class="pl-en">noConflict</span>();</pre>
</div> </li>
</ul>
<h2> <a id="模块化支持" class="anchor" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%E6%94%AF%E6%8C%81" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>模块化支持</h2>
<ul>
<li> <p>AMD Example</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-smi">require</span>.<span class="pl-en">config</span>({
<span class="pl-c"><span class="pl-c">//</span> 指定模块id 和其对应文件的相对路径</span>
paths<span class="pl-k">:</span> {
Et<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>js/easy.templatejs.min-2.1.0<span class="pl-pds">"</span></span>
}
});
<span class="pl-c1">require</span>([<span class="pl-s"><span class="pl-pds">"</span>Et<span class="pl-pds">"</span></span>], <span class="pl-k">function</span>(<span class="pl-smi">Et</span>) {
<span class="pl-c"><span class="pl-c">//</span> Basic demo</span>
<span class="pl-k">var</span> compiled <span class="pl-k">=</span> <span class="pl-smi">Et</span>.<span class="pl-en">template</span>(<span class="pl-s"><span class="pl-pds">"</span>hello: { name }, {-name}<span class="pl-pds">"</span></span>);
<span class="pl-k">var</span> res <span class="pl-k">=</span> <span class="pl-en">compiled</span>({
name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>MoMo<span class="pl-pds">'</span></span>
});
<span class="pl-k">var</span> res2 <span class="pl-k">=</span> <span class="pl-en">compiled</span>({
name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><MoMo><span class="pl-pds">'</span></span>
}); <span class="pl-c"><span class="pl-c">//</span> Special label, test escape</span>
<span class="pl-en">console</span>.<span class="pl-c1">info</span>(res);
<span class="pl-en">console</span>.<span class="pl-c1">info</span>(res2);
});</pre>
</div> </li>
</ul>
<h2> <a id="结束" class="anchor" href="#%E7%BB%93%E6%9D%9F" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>结束</h2>
<h3> <a id="官方主页" class="anchor" href="#%E5%AE%98%E6%96%B9%E4%B8%BB%E9%A1%B5" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a><a href="http://www.easyproject.cn/easytemplate/zh-cn/index.jsp" title="官方主页">官方主页</a> </h3>
<p><a href="http://www.easyproject.cn/easytemplate/zh-cn/index.jsp#donation" title="留言评论">留言评论</a></p>
<p>如果您有更好意见，建议或想法，请联系我。</p>
<h3> <a id="the-official-home-page" class="anchor" href="#the-official-home-page" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a><a href="http://www.easyproject.cn/easytemplate/en/index.jsp" title="The official home page">The official home page</a> </h3>
<p><a href="http://www.easyproject.cn/easytemplate/en/index.jsp#donation" title="Comments">Comments</a></p>
<p>If you have more comments, suggestions or ideas, please contact me.</p>
<p>Email：<a href="mailto:inthinkcolor@gmail.com">inthinkcolor@gmail.com</a></p>
<p><a href="http://www.easyproject.cn" title="EasyProject Home">http://www.easyproject.cn</a></p>
<p><strong>支付宝钱包扫一扫捐助：</strong></p>
<p>我们相信，每个人的点滴贡献，都将是推动产生更多、更好免费开源产品的一大步。</p>
<p><strong>感谢慷慨捐助，以支持服务器运行和鼓励更多社区成员。</strong></p>
<p><a href="https://camo.githubusercontent.com/0079923bf4bc9ed15a8be36a117559592e024d1b/687474703a2f2f7777772e6561737970726f6a6563742e636e2f696d616765732f732e706e67" target="_blank"><img alt="支付宝钱包扫一扫捐助" src="https://camo.githubusercontent.com/0079923bf4bc9ed15a8be36a117559592e024d1b/687474703a2f2f7777772e6561737970726f6a6563742e636e2f696d616765732f732e706e67" title="支付宝钱包扫一扫捐助" height="256" width="256" data-canonical-src="http://www.easyproject.cn/images/s.png" style="max-width:100%;" /></a></p>
<p>We believe that the contribution of each bit by bit, will be driven to produce more and better free and open source products a big step.</p>
<p><strong>Thank you donation to support the server running and encourage more community members.</strong></p>
<p><a href="https://www.paypal.me/easyproject/10" title="Make payments with PayPal - it's fast, free and secure!"><img src="https://camo.githubusercontent.com/25fd45a9c199091fd684c9f11b37c386b4301087/687474703a2f2f7777772e6561737970726f6a6563742e636e2f696d616765732f70617970616c646f6e6174696f6e352e6a7067" alt="PayPal" data-canonical-src="http://www.easyproject.cn/images/paypaldonation5.jpg" style="max-width:100%;" /></a></p>
</body>
</html>