超快的前端引擎——artTemplate-3.0


一、特性

  • 性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍,
  • 支持运行时调试,可精确定位异常模板所在语句,
  • 对 NodeJS Express 友好支持,
  • 安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板),
  • 支持include语句,可在浏览器端实现按路径加载模板,
  • 支持预编译,可将模板转换成为非常精简的 js 文件,
  • 模板语句简洁,无需前缀引用数据,
  • 支持所有流行的浏览器。

二、上手

  1、编写模板

    使用一个type="text/html"的script标签存放模板:  

    <script id="test" type="text/html">
      <h1>{{title}}</h1>
      <ul>
          {{each list as value i}}
              <li>索引 {{i + 1}} :{{value}}</li>
          {{/each}}
      </ul>
    </script>  2、渲染模板
    var data = {
        title: ‘标签‘,
        list: [‘A, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘]
    };
    var html = template(‘test‘, data);
    document.getElementById(‘content‘).innerHTML = html;

三、模板语法

  1、简洁语法

    推荐使用,语法简单实用,利于读写。

    {{if admin}}
        {{include ‘admin_content‘}}

        {{each list}}
            <div>{{$index}}. {{$value.user}}</div>
        {{/each}}
    {{/if}}

 2、使用

  引用简洁语法的引擎版本,例如:
  <script src="dist/template.js"></script>  3、表达式    {{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。 

  ①、输出表达式:      对内容编码的输出:{{content}}        不编码的输出:{{#content}}        注:编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。    ②、条件表达式:
    {{if admin}}
        <p>admin</p>
    {{else if code > 0}}
        <p>master</p>
    {{else}}
        <p>error!</p>
    {{/if}}
 ④、遍历表达式:    无论数组或者对象都可以用 each 进行遍历。
  {{each list as value index}}
      <li>{{index}} - {{value.user}}</li>
  {{/each}}

  亦可被简写:
  {{each list}}
      <li>{{$index}} - {{$value.user}}</li>
  {{/each}}

 ⑤、模板包含表达式

    用于嵌入子模板。


      {{include ‘template_name‘}}

    子模板默认共享当前数据,亦可以指定数据:


      {{include ‘template_name‘ news_list}}

  4、铺助方法

    使用template.helper(name, callback)注册公用辅助方法:

      template.helper(‘dateFormat‘, function (date, format) {
          // ..
          return value;
      });

    模板中使用的方式:

      {{time | dateFormat:‘yyyy-MM-dd hh:mm:ss‘}}

    支持传入参数与嵌套使用:

      {{time | say:‘cd‘ | ubb | link}}、

四、方法
  template(id, data)

   根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。

   如果没有 data 参数,那么将返回一渲染函数。

   template.compile(source, options)

   将返回一个渲染函数。

   template.render(source, options)

   将返回渲染结果。

   template.helper(name, callback)

   添加辅助方法。

   例如时间格式器:

   template.config(name, value)

   更改引擎的默认配置。

字段 类型 默认值 说明
openTag String ‘{{‘ 逻辑语法开始标签
closeTag String "}}" 逻辑语法结束标签
escape Boolean true 是否编码输出 HTML 字符
cache Boolean true 是否开启缓存(依赖 options 的 filename 字段)
compress Boolean false 是否压缩 HTML 多余空白字符
  五、使用预编译

    可突破浏览器限制,让前端模板拥有后端模板一样的同步“文件”加载能力:


    1、按文件与目录组织模板


      template(‘tpl/home/main‘, data)

    2、模板支持引入子模板


      {{include ‘../public/header‘}}

   基于预编译:

      ①、可将模板转换成为非常精简的 js 文件(不依赖引擎)

      ②、使用同步模板加载接口

      ③、支持多种 js 模块输出:AMD、CMD、CommonJS

      ④、支持作为 GruntJS 插件构建

      ⑤、前端模板可共享给 NodeJS 执行

      ⑥、自动压缩打包模板


 
 
 
 
 
 
 
时间: 2024-11-05 17:19:47

超快的前端引擎——artTemplate-3.0的相关文章

前端模板引擎arttemplate,后端模板引擎Nvelocity

It's my first blog 大家好,我叫曾岑,朋友们都叫我包子,今年21岁,湖北人,刚大学毕业,学的.net开发.去年一年,在南京工作了一年,那时候还没有拿到毕业证,找工作也是蛮难的,别人说没毕业证,也没经验,工资只能给个基础工资,不过还好,和几个朋友一起结伴去的,一起租的房子住的.在南京的工作经历就不说那么多了,至少让我看到了编程的这个世界. 今年7月份,辞掉了南京的工作,来到了深圳这个城市,重新开始找工作,运气还算不错,第二天就面试上了,第三天就正式上班了,工资待遇对于我这种新手来

js模板引擎--artTemplate

js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址),貌似最近耳边听到得最多的模板引擎也就是artTemplate了,所以就花个时间来研究下吧... artTemplate是新一代的javascript模板引擎,若采用拥有V8引擎的chrome浏览器进行测试,其渲染性能甚至能达到知名模板引擎Mustache的20倍以上以及模板引擎tmpl的40倍以上

WEB前端目录架构-v1.0

============================================================================== 前端目录架构-v1.0(项目级)============================================================================== Project/ ├── css/ │  ├── icon/ │  ├── page/ │ ├── base.css │  ├── reset.css

中国首创真空管磁悬浮轨道车:超快!

途牛网 5 月 9 日挂牌 5 月 9 日消息,据美国财经网站 iposcoop 网站报道,途牛旅游网将于今晚(5 月 9 日)在纳斯达克正式挂牌上市. 途牛网 4 月 4 日首次提交 IPO 招股书,最新版招股书显示,途牛网计划在纳斯达克上市,股票交易代码为"TOUR",发行价区间为每股美国存托股(ADS)9 美元至 11 美元,发行量最高 920 万股 ADS,最高融资额为 1.012 亿美元,销商为摩根士丹利国际.瑞信证券和华兴资本证券.OPPENHEIMER. 进入微软.亚马逊

性能卓越的js模板引擎--artTemplate

以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址),貌似最近耳边听到得最多的模板引擎也就是artTemplate了,所以就花个时间来研究下吧... artTemplate是新一代的javascript模板引擎,若采用拥有V8引擎的chrome浏览器进行测试,其渲染性能甚至能达到知名模板引擎Mustache的20倍以上以及模板引擎tmpl的40倍以上,测试截图如下: 下面进入正题: 特性

模板引擎artTemplate及模板预编译器TmodJS的使用入门

一.为什么要使用前端模板? 主要为了解决UI层与业务逻辑的纠缠不清.比如我们需要根据后端返回的数据动态生成一个表格或者类似表格的DOM(比如ul > li等)时,按照传统的方式,需要我们先获取数据,然后在页面的js中通过遍历数据.提取相关数值以及动态拼接html字串的方式,生成最终的DOM.这样就产生了UI与业务逻辑的纠缠.如果只是偶尔或者局部使用可能问题不明显,但如果代码量庞大.业务或数据十分复杂的情况下,这种方式产生的代码会十分不利于后期维护,这想必是每一个开发人员都不愿看到的.因此,便产生

HTML5开源RPG游戏引擎lufylegendRPG 1.0.0发布

经历了几个月的改进,终于发布1.0.0版了.虽然引擎依然存在漏洞,但是比起上次更新还是要好多了.在这里不得不感谢各位网友的大力支持. 首先为引擎做一个开场白吧,也好让大家了解一下它: lufylegendRPG是基于lufylegend的HTML5游戏引擎.使用它时,需要引入lufylegend.js. 包含了LTileMap,LCharacter,LTalk,LEffect等多个实用的类. 由于是基于lufylegend,所以你需要了解一下lufylegend的用法,这样才能更合理,更快捷地运

前端神器 Firebug 2.0 新特性一览

如果你从事Web前端方面的开发工作,那么对Firebug一定不会陌生,这是Firefox浏览器的一款插件,集HTML查看和编辑.Javascript控制台.网络状况监视器于一体,给Web开发者带来了极大的便利,堪称Web前端开发神器. 最新版本Firebug 2.0即将发布,下面就来看看这个大版本中有哪些改进. 1.  基于新的Firefox调试引擎(JSD2) 2.  新的UI,以匹配Firefox 29版本中引入的Australis主题 3.  Script面板支持语法高亮 4.  允许检查

百度JS模板引擎 baiduTemplate 1.0.6 版

A.baiduTemplate 简介 0.baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 注:等不及可以直接点左侧导航中的”C.使用举例“,demo即刻试用. 1.应用场景: 前端使用的模板系统 或 后端Javascript环境发布页面 http://tangram.baidu.com/BaiduTemplate 2.功能概述: 提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据, 生成对应数据产生的HTML片段,渲染不同的效果. 3.特性: 1.语法简单,学