easy.templatejs
Version:
Small, pure, high-performance JavaScript template engine.
717 lines (638 loc) • 18.2 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>E:\360data\重要数据\我的文档\HBuilderProject\easytemplatejs\.readme.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" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>EasyTemplateJS</h1>
<p><strong>EasyTemplateJS（EasyTemplate JavaScript）是一款小巧，纯粹，高性能的 JavaScript 模板引擎。</strong></p>
<p><strong>EasyTemplateJS(EasyTemplate JavaScript) is a small, pure, high-performance JavaScript template engine.</strong></p>
<p>The latest version: <code>2.1.1-RELEASE</code></p>
<h2> <a id="feature特点" class="anchor" href="#feature%E7%89%B9%E7%82%B9" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Feature/特点</h2>
<ul>
<li> <p><strong>中文</strong></p>
<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> </li>
<li> <p><strong>English</strong></p>
<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> </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>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="doc/imgs/performance.png" target="_blank"><img src="doc/imgs/performance.png" alt="Performance test comparison" style="max-width:100%;" /></a></p>
<h2> <a id="installation安装" class="anchor" href="#installation%E5%AE%89%E8%A3%85" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Installation/安装</h2>
<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/Bower 安装</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/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>
<h2> <a id="use-document使用文档" class="anchor" href="#use-document%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Use document/使用文档</h2>
<h3> <a id="中文" class="anchor" href="#%E4%B8%AD%E6%96%87" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>中文</h3>
<p><a href="doc\.readme_zh_CN.md.html">中文详细使用文档</a></p>
<p><a href="http://www.easyproject.cn/easytemplate/zh-cn/index.jsp" title="官方主页">官方主页</a></p>
<p><a href="http://www.easyproject.cn/easytemplate/zh-cn/index.jsp#donation" title="留言评论">留言评论</a></p>
<p>如果您有更好意见，建议或想法，请联系我。</p>
<h3> <a id="english" class="anchor" href="#english" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>English</h3>
<p><a href="doc\.readme_en.md.html">English detailed documentation</a></p>
<p><a href="http://www.easyproject.cn/easytemplate/en/index.jsp" title="The official home page">The official home page</a></p>
<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>
<h2> <a id="end" class="anchor" href="#end" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>End</h2>
<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>