fastpl简单高效的前端模板

简要

fastpl 是一个高效、轻量的Javascript模板引擎。

• 速度优秀
• 体积小，压缩后只有4kb不到
• 语法简洁，宽松写法减少错误，提供很多简洁的语法糖
• 入门快，与主流js、node和后端smarty等模板引擎语法接近，上手简单
• 自定义函数，提供方便的格式化函数，可添加自定义函数
• 快速的错误定位，变量、语法等错误明确提示，未知错误抛出代码

测试对比：test

在线demo：demo

快速使用

html模板：

      <script type="text/tmpl" id="test">
        {{ if showList }}
          {{for list}}
            <a href="#"> ${ v } </a>
          {{/for}}
          <span>${ dataTime｜date_format:'yyyy-MM-dd EEE' }</span>
        {{/if }}
　　　　　<p> ${number || 0} </p>
      </script>

js代码：

    // 数据
    var data = {
          list: ["js", "html", "css"],
          showList: true，
          person: {
                name: 'json',
                age: 18
          }
          dataTime: '2014-12-1 14:14:14',
          number: 12345678
      }
    // 调用模板
    var tpl = fasTpl( document.getElementById( 'test' ).innerHTML ),
        html = tpl.render( data );
      // 快捷写法
      // var html = fasTpl( document.getElementById( 'test' ).innerHTML, data );

变量

变量语法，用来输出变量，提供逻辑运算和自定义方法。

逻辑运算：

　　<p>${ dateTimes || '不存在dateTimes' }</p>
　　<p>${ dateTimes ? '存在dateTimes' : '不存在dateTimes' }</p>
　　<p>${ !!dateTimes }</p>

自定义方法：

      <p>${ person|count }</p>
      // fastpl-plus.min.js 才支持下面2个方法
      <p>${ dateTime| date_format:'yyyy-MM-dd' }</p>
      <p>${ number|number_format }</p>

 自定义方法结果：

      2
      2014-12-01
      12,345,678

自定义方法

添加自定义方法

    fastpl.tools( 'toString', function( val, args ){ 
            return String( val ).toString();
      })
      // 或者
      fastpl.tools({
            'toString': function( val, args ){ 
                  return String( val ).toString();
            }
      })

获取全部自定义方法 fastpl.getTools();

语法糖

{{ for }} 默认值 v 和 i ，分别是值和索引。

访问数据全局变量可使用_data。

for提供一个极好的功能，就是像原生for一样自定义循环。

    {{ for list(0,1000) }}
        <a href="#"> ${list} </a>
    {{/for }}

 

{{var}} 申明一个或多个变量

    // {{var}}
    {{var i = 10}}
    {{for (1,i) }}
        <a href="#"> ${ i }  </a>
    {{/for}}

{{log}} console.log日志输出，可以用来调试

    // {{ log }}
    <a href="#"> {{log '123'}} </a>

 

错误提示 

错误标签、未声明变量、标签语法错误等提供明确提示，未闭合标签可在chrome vm下查看编译代码。

可以看到未被编译的标签语法。

具体api请看：fastpl（Github只是有点慢，安心等待，Safari请切换代理到chrome）:)

 

如今的各种框架和库对模板支持都很完美了，但依赖性强，这里只是提供多一种选择。