best-template

模板引擎

1.2.0
latest
npm

Version published: 6 years ago

Maintainers: 1

Created: 7 years ago

Source

模板引擎

根据doT.js修改,特点是快，小，无依赖其他插件。新增支持过滤器,ejs语法,缓存

安装

yarn add best-template

用法

<html>
<div id="app"></div>
<script id="app-temp" type="text/temp">
  <div><%=data.title%></div>
  <ul>
  <%for(var i=0;i<data.list.length;i++){%>
    <li><%=data.list[i]%></li>
  <%}%>
  </ul>
</script>
</html>

import bestT from "@fastweb/http-temp";
let mydata={
  title:'题目',
  list:[1,2,3,4,5]
}
bestT.renderDom('app','app-temp',mydata)

方法

renderDom 渲染模板插入dom

bestT.renderDom(dom,tmpl,data,def,id) 参数:

dom(string|dom)-被插入渲染结果的dom
tmpl(string)-模板
data(object)-数据
def(object)(可选)-模板片段
id(number|string)(可选)-唯一id(提高渲染速度)

render 渲染模板返回html

bestT.renderDom(tmpl,data,def,id) 参数同renderDom

compile 返回模板函数

bestT.compile(tmpl,def,id) 参数同renderDom

bestT.renderDom(dom,tmpl,data)
//等同
dom.innerHTML=bestT.render(tmpl,data)
//等同
dom.innerHTML=bestT.compile(tmpl)(data)

过滤器 |

  bestT.filters={
    sex:function(str){
      if(str==0){
        return "男人"
      }else if(str==1){
        return "女人"
      }
      return "妖人"
    },
    describe:function(str){
      if(/男/.test(str)){
        return '帅气的'+str
      }else if(/女/.test(str)){
        return '漂亮的'+str
      }
      return str
    },
    age:function(str){
      if(srt>18){
        return "成年"
      }
      return "未成年"
    }
  }
  let tmpl=`<div><%=data.name%>是一个<%=data.age|age%><%=data.sex|sex|describe%></div>`;
  let data={
    name:'老王',
    age:'40',
    sex:0
  }
  bestT.render(tmpl,data);
  //<div>老王是一个成年帅气的男人</div>

模板语法

同ejs,常用<%%>,<%=%>

FAQs

Is best-template well maintained?

Package last updated on 28 May 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install