/mini-tpl

A simple template engine,only 50 rows.

Primary LanguageJavaScriptMIT LicenseMIT

mini-tpl

NPM version

A simple template engine,just several rows.

超简单的模板引擎,只有几十行。

https://github.com/shalldie/mini-tpl

About

  • Small size, 0.74KB of mini-tpl.min.js
  • Support from IE6.
  • The syntax same as ejs*,you will get it easy if you've written jsp or asp/asp.net .

  • 超小的体积,压缩后的min版本只有 0.74KB
  • IE6 就能用 0_o
  • ejs 语法,如果你写过jsp、asp、webform之类的,可以直接上手

How to get it

If you use npm or yarn.

npm install mini-tpl
or
yarn add mini-tpl

Another way,include the script in browser.(build/mini-tpl.min.js)

How to use

The syntax same as ejs.

ejs一样的语法。

Example

In node:

// es6 module , typescript
import tpl from 'mini-tpl';
// nodejs
// const tpl = require('mini-tpl'); 

const content = `
<ul>
<% for(var i=0; i < data.length; i++){
    var item = data[i];
    if(item.age < 30){%>
        <li>我的名字是<%=item.name%>,我的年龄是<%=item.age%></li>
    <%}else{%>
        <li>my name is <%=item.name%>,my age is a sercet.</li>
    <%}%>
<% } %>
</ul>`;

const data = [{ name: 'tom', age: 12 }, { name: 'lily', age: 24 }, { name: 'lucy', age: 55 }];

console.log(tpl(content, data));

result:

<ul>

        <li>我的名字是tom,我的年龄是12</li>


        <li>我的名字是lily,我的年龄是24</li>


        <li>my name is lucy,my age is a sercet.</li>


</ul>

In browser:

<body>
    <div id="root"></div>
    <script id="tplContent" type="text/html">
    <ul>
        <% for(var i=0; i < data.length; i++){
            var item = data[i];
            if(item.age < 30){%>
                <li>我的名字是<%=item.name%>,我的年龄是<%=item.age%></li>
            <%}else{%>
                <li>my name is <%=item.name%>,my age is a sercet.</li>
            <%}%>
        <% } %>
    </ul>
    </script>
    <script src="../build/mini-tpl.min.js"></script>
    <script>
        var data = [{ name: 'tom', age: 12 }, { name: 'lily', age: 24 }, { name: 'lucy', age: 55 }];
        var content = document.getElementById('tplContent').innerHTML;
        var result = miniTpl(content, data);
        document.getElementById('root').innerHTML = result;
    </script>
</body>

Who use it

东方头条、携程