easy.templatejs
Version:
Small, pure, high-performance JavaScript template engine.
965 lines (873 loc) • 42.5 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>E:\360data\重要数据\我的文档\HBuilderProject\easytemplatejs\doc\.readme_en.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-template-engine-user-guide" class="anchor" href="#easytemplatejs-template-engine-user-guide" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>EasyTemplateJS Template Engine User Guide</h1>
<p><strong>EasyTemplateJS(EasyTemplate JavaScript) is a small, pure, high-performance JavaScript template engine.</strong></p>
<p>JavaScript template engine as the data and interface separation of the most important part. Using JavaScript template functions to avoid the inconvenience and low maintenance of splicing <code>HTML</code> strings in JavaScript, embedding JavaScript scripts in<code>HTML</code> as opposed to using <code>JSP</code> and<code>ASP</code> Technical programming. EasyTemplate provides an ultra-high-performance rendering engine that uses template technology in JavaScript to simplify operations and enhance program design flexibility.</p>
<p>The latest version: <code>2.1.1-RELEASE</code></p>
<h2> <a id="feature" class="anchor" href="#feature" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Feature</h2>
<ul>
<li><p>Small, pure</p></li>
<li><p>Pre-statically compiled, high-performance</p></li>
<li><p>Flexible customization</p></li>
<li><p>Escape output expressions are supported</p></li>
<li><p>Support out output</p></li>
<li><p>Module support:<code>CommonJS</code>, <code>AMD</code>, <code>CMD</code>, <code>Node.js</code></p></li>
<li><p>Bower support</p></li>
</ul>
<h2> <a id="performance-test-comparison" class="anchor" href="#performance-test-comparison" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Performance test comparison</h2>
<p>From the rendering performance, <strong>EasyTemplate</strong> and artTemplate are using pre-static compilation principle, can be said to have close to the performance limit, is the highest performance of the template engine. Some poor engine may not only affect the customer experience, but also cause the browser to crash or abnormal termination, Baidu engine performance is poor, the implementation of the browser rendering a huge impact.</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="use" class="anchor" href="#use" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Use</h2>
<h3> <a id="1-download" class="anchor" href="#1-download" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>1. Download</h3>
<ul>
<li> <p>Download install</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>Bower install</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 install</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-template-expression" class="anchor" href="#2-templatejs-template-expression" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>2. TemplateJS Template expression</h3>
<p>TemplateJS supports three types of template expressions, which do not allow nesting or crossover:</p>
<ol>
<li> <p><strong>The script expression</strong></p> <p><code>%{ JavaScript Script }%</code>: The implementation of arbitrary JavaScript code (JSP <code><%%></code> the same small script), JS script <code><</code>,<code>></code> and other special symbols can also be used instead of the corresponding character entities.</p> </li>
<li> <p><strong>The output expression</strong></p> <p><code>{expression}</code>： Insert the variables to be output (the same as <code><%= expression%></code> for JSP).</p> </li>
<li> <p><strong>The escape output expression</strong></p> <p><code>{-expression}</code>： Usage is the same as <code>{expression}</code>, and special characters are automatically escaped as character entities when outputting data.</p> </li>
</ol>
<ul>
<li> <p><strong>Why do I choose% {}%, {} as a closed tag?</strong></p> <p>EasyTemplateJS 没有选择常用的 <%%> 或 ${} 作为模板引擎的默认闭合标签，因为在 JSP，ASP 等动态页面中，<%%>，${} 都本身是动态特殊标记，当在 JSP 页面定义模板标签时，会对 JSP 解析造成影响，导致编译错误。所以 EasyTemplate 选择了尽量不会与其他语言冲突的 %{}% {}。</p> <p>尽管如此，但是如果您更喜欢使用 <%%> 或 ${}，本身 EasyTemplate 模板标签是对外允许自定义的，您可以修改为 <%%>，以兼容你旧的模板代码。 (参考 5. 模板自定义)</p> </li>
</ul>
<h3> <a id="3-examples" class="anchor" href="#3-examples" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>3. Examples</h3>
<p>EasyTemplateJS exposes an object named <strong><code>Et</code></strong> to complete the template operation.</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c"><span class="pl-c">//</span> 1. Execute the template directly</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. Template compilation</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> Compiled and executed</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>Basic Template Example</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 Template Example</p>
<div class="highlight highlight-text-html-basic">
<pre><span class="pl-c"><span class="pl-c"><!--</span> Ordinary template <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> Use HTML to define template content, if there are special content such as <,>, you can use the corresponding character entity instead <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> Use the out output <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> With 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> Use the template <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>Output:</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-use-out-output-information" class="anchor" href="#4-use-out-output-information" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>4. Use out output information</h3>
<p>You can also use the <code>out</code> function to output information in your JavaScript code so that you do not have to break your code block, which is sometimes easier and clearer than using <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-customization-template-expression-closed-tag" class="anchor" href="#5-customization-template-expression-closed-tag" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>5. Customization template expression closed tag</h3>
<p>Because certain template definition and execution blocks have special meanings in some dynamic pages (<code>JSP</code>,<code>ASP</code>), the use of template symbols on some pages can cause errors. EasyTemplate allows you to change the template settings and use other symbols to embed the code.</p>
<blockquote>
<p><strong>Why do I choose% {}%, {} as a closed tag?</strong></p>
<p>EasyTemplateJS did not select the commonly used <%%> or $ {} as the default closing tag of the template engine, because in the JSP, ASP and other dynamic pages, <%%>, $ {} itself is a dynamic special mark, When a page defines a template tag, it affects JSP parsing, resulting in compilation errors. So EasyTemplate chose% {}% {} that will not conflict with other languages as much as possible.</p>
<p>However, if you prefer to use <%%> or $ {}, the EasyTemplate template tag is external to allow customization, you can modify it to <%%> to match your old template code.</p>
</blockquote>
<p><strong>Note:</strong> If you absolutely modify the closing label of a template expression, you need to be careful to check that your definition logic is reasonable.</p>
<p><code>Et.tmplSettings</code> Default configuration:</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> Script expression %{ 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> Output expression {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> Escape output expression {-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>Redefine the example:</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-k">var</span> userSettings<span class="pl-k">=</span>
{
<span class="pl-c"><span class="pl-c">//</span> Script expression <% 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> Output expression <%=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> Escape output expression <%-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> Global modifications</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> test</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> Local modification test</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> Exposing a limited number of APIs:</p>
<ul>
<li> <p>Core function</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c">/**</span>
<span class="pl-c"> * The template engine compiles the core functions</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{String}</span> <span class="pl-smi">tmplText</span> Template code</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{Object}</span> <span class="pl-smi">data</span> Template data; optional</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{Et.tmplSettings}</span> <span class="pl-smi">settings</span> Engine dynamic control parameters; optional</span>
<span class="pl-c"> * <span class="pl-k">@return</span> <span class="pl-en">{String|function}</span> If the data is not empty, return String rendering results; otherwise, return a compiled function rendering 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>Template closure label custom (<code>5. template expression closed tag custom</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>Special characters in a string are escaped as character entities and returned</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c">/**</span>
<span class="pl-c"> * Special characters in a string are escaped as character entities and returned</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 the reverse operation function, the string of characters into the characters, and return</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c">/**</span>
<span class="pl-c"> * Escape the reverse operation function, the string of characters into the characters, and return</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{text}</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">unescape</span>(text);</pre>
</div> </li>
<li> <p>Traversing a collection or object</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c">/**</span>
<span class="pl-c"> * Traversing a collection or object.</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{Object}</span> <span class="pl-smi">obj</span> The collection or object to be traversed</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{function}</span> <span class="pl-smi">iterator</span> Iteration functions, including the value, index, set the three parameters of the object</span>
<span class="pl-c"> * <span class="pl-k">@param</span> <span class="pl-en">{Object}</span> <span class="pl-smi">context</span> Binding an iterator to the context executes it, which can be used to pass some other elements to 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>Restores the object referenced by <code>Et</code> as the original object and returns the<code>Et</code> object.</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c">/**</span>
<span class="pl-c"> * Eliminate conflicts</span>
<span class="pl-c"> * <span class="pl-k">@return</span> <span class="pl-en">{Et}</span> Et object</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="module-support" class="anchor" href="#module-support" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Module support</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>({
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="end" class="anchor" href="#end" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>END</h2>
<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>
<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>
<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>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>