aui / art-template Goto Github PK

View Code? Open in Web Editor NEW

9.8K 9.8K 2.7K 3.11 MB

High performance JavaScript templating engine

Home Page: https://aui.github.io/art-template/

License: MIT License

JavaScript 90.94% HTML 9.04% Smarty 0.02%

express javascript koa nodejs template-engine webpack

art-template's Introduction

art-template

English document | 中文文档

art-template is a simple and superfast templating engine that optimizes template rendering speed by scope pre-declared technique, hence achieving runtime performance which is close to the limits of JavaScript. At the same time, it supports both NodeJS and browser. speed test online.

art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。在线速度测试。

Feature

performance is close to the JavaScript rendering limits
debugging friendly. Syntax errors or runtime errors will be positioned accurately at which line of template. Support setting breakpoint in templating files (Webpack Loader)
support Express, Koa, Webpack
support template inheritance and sub template
browser version is only 6KB

特性

拥有接近 JavaScript 渲染极限的的性能
调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
支持 Express、Koa、Webpack
支持模板继承与子模板
浏览器版本仅 6KB 大小

捐助我(微信支付)

[AD] 前端招聘：在海边写代码

art-template's People

Contributors

Stargazers

Watchers

Forkers

evonli antife-yinyue jonas8 circlefanduck unwritten lt1946 banlyst jvfu wangxiao dirts grf110 chemandy bily fengdi lsncom shumtn daqing15 chlik chshouyu break123 fivenamefour frankyyang gotomypc woerwin ouxingzhi silverbolt lovesueee dancingfingers brightwill jinwentan stevenlsy wangwen1220 gorilahe myaniu panxuepeng yuanzhen bigrats chenchunwei webcoding zack-lin dolymood javafans yj33123 cydgcx sjbwylbs miketonthk zlss minr wjkhappy14 cmono coderjiav vartipz hzlisongyang grapewangyao gaojianzhuang xinde yunhor mfine2 ibeen weiguang3100 atlantisgreen blueforest hongcai shisensen hzl7652 newsky ekinwei mozii fudong1127 ummo uc2dabing baobei crowqu julienedies ctfzh lonjoy saiga19 zxsrendong seon77 zheng108 jitewei iamaddy lulu523 jamesxy aspxdiyer xiaoxiehang zuiwanting netvip khhhshhh curry5c philw9 cyij qbright king5699 bananaxzw xjy0925 imloama shaode w3cpress andrew703

art-template's Issues

IE8及以下若模板参数出现二级属性将报错：缺少标识符

如下模板：

今日预测 <%= data_today.forecast.new %> <%= data_today.forecast.active %> <%= data_today.forecast.rate %> <%= data_today.forecast.start %> <%= data_today.forecast.aver %>

简洁语法下表达式的支持。

当使用自定义简洁语法时，对JS语句的支持就不怎么好了。

我现在是稍微修改，以支持{{! var a = 1 }} 这样来支持的

case 'include':
code = 'include(' + split.join(',') + ');';
break;
case '!':
code = args;
break;
default:

用for in 循环无法渲染的问题

接回复错主题的问题，我的模板是这样写的
<% for (var p in json) { %>
<% for (var j=0,len=json[p].length; j < len; j++) { %>

<%= json[p][j].name %>

<% } %>
<% } %>
数据结构是：
var json = {
list1 : [itme1,item2,item3],
list2 : [itme1,item2,item3],
list3: [itme1,item2,item3]
}
渲染数据为空，只有把具体的项，如把json[p]换成list1，2.3，才能输出具体属性的内容，
求解，谢谢

辅助方法怎么才不会直接输出html

需求如下所示：

// ArtTemplate compareZero
ArtTemplate.helper('compareZero', function (range) {
    var cnt;
    if(range > 0) {
        cnt = '<span class="red">' + range + '</span>';
    } else if(range < 0) {
        cnt = '<span class="green">' + range + '</span>';
    } else {
        cnt = range;
    }
    return cnt;
});

什么时候能将artTemplate项目提交到Bower上呢？

如题

辅助方法，帮忙看看是否用的不对

正在试用artTemplate，增加辅助方法
调用：
template.helper('$toDate', function (content) {
return content;
});
var html = template.render('category_t', data);
$("#Items").html(html);
模版：
<%= $toDate(list[i].update_time）%>

输出：
{Template Error}

图片src中的http://xxx处理错误

本不想再提了，但这个bug很明显。例如<img src="http://xxx" /> http后边处理错误。通过compile.cmd编译后出的问题，应该是正则处理错误。。

模板中 for 或 if 语句中对全局变量的引用报错

首先赞一下artTemplate对错误捕捉的支持，巧妙的插入一个line变量来记录错误位置。但是担心如果模板中也有$line变量会怎么样？这个我接下来验证下。

update：看了下其它issue，这个别人已经提出过了。但是这里我觉得可以考虑是否支持这样用。

另，着重看下面的$line变量污染错误信息的问题。

-----------------------------------------------问题开始------------------------------------------------------

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>debug-demo</title>
<script src="../template.js"></script>
</head>

<body>
<h1>错误捕获（请打开控制台）</h1>
<script type="text/javascript">
  var counter = 10;
</script>
<script id="test" type="text/html">
<ul>
<% for (var i = 0; i < window.counter; i ++) { %>
  hello <%= i  %> <br/>
<% } %>
</ul>
</script>

<script>
var html = '';
html = template.render('test', {});
document.write(html);
</script>
</body>
</html>

for 语句中有对window下的全局变量counter的引用，感觉应该是支持这样用的吧，但是运行后报错：

...
[message]:
Cannot read property 'counter' of undefined
...

显然把window当成一个变量来处理了。

不知道这里是怎么考虑的？

能不能支持下后加载模板

比如requirejs的text插件载入的模板
根据页面id获取模板感觉好蠢让用户自己用选择器搞定把dom传进接口会好一点吧
话说好几个月没更新了已经弃坑了么。。

helpers重复问题

如果把多个html模版，用编译工具打包成JS文件，每个文件里都有
var helpers = { "$escapeHTML": function(){},"$getValue":function(){} }，
这个有必要么？是不是可以再优化下

如何添加一个$.format的辅助方法

很多jquery 组件都是在$下面扩展的，这个方法要怎么定义呢？
然后我发现连我有个例子new Date()都不可以用！
抛出的错误
Date is not a constructor
例子如下：
F.Date(new Date(xTime),"YYYY")

子模板能不能提供不基于ID的？

有些项目比较通用的模板都放在JS变量里，所以不能用默认提供的<%include(id, [data])%>，希望提供类似dot的子模板机制。

spring form tag BUG

form:radiobuttons path="level.id"

标签与jsp冲突

<% 的标签是jsp写java代码的开始，导致冲突。能否换一个呢？或者有什么解决方案？

模板的语法与JSP的标记冲突

模板的语法与JSP的标记冲突，有没有简单的办法重新设定这些标记：<% %>，<%= %>

“<%= xxx %>” 这种语法，被有些网页安全检测网站报告成了安全漏洞

请问，这算是安全漏洞吗？
有的搜索引擎也会报错了，不知道其它搜索引擎怎么处理。

模版问题

1.模版只能写在JavaScript标签里面吗，如果模版数据比较大呢，能不能从文件加载？
2.如果能从文件加载，那文件的格式会是什么呢（这个貌似不重要），模版里面支持CSS和JS吗？
3.模版可以缓存吗，如果模版从文件加载总不能每次都从后台重新加载模版

Tip:ejs可以从文件加载，格式为.ejs，但是不知道模版里面是否支持CSS和JS
kissy的模版挺强大，不过貌似也不支持从文件加载模版

v1.4和v2.0的差别是？不向下兼容吗？

之前用v1.4，现在升级到v2.0，之前正常的，现在直接显示{Template Error}，会是什么可能性？谢谢

[name]:
Render Error

[message]:
No Template template.js:185
exports.onerror

大哥我文档找了半天没找到注释怎么写

如题

template和template.compile的id参数现在怎么一个必选一个可选不一致了？

如题，更新到最新版报错，看了下发现是template的时候没有传入id，文档也没有说明，囧~

有没有考虑做个nodejs下面的静态编译工具

如题，现在项目使用grunt构建的，貌似如果支持nodejs下面的静态化就更好了。

有层级的数据我想递归输出结构

需求是无限层级的列表功能，数据是一层嵌套一层
但是突然想不到怎么在模板里实现递归操作
编译后的代码也不知道怎么编译

有什么比较好的实现方案么？

动态加载问题

在跨域环境中，使用Script标签动态加载template.js文件，会出现找不到template对象。

javascript 代码变量静态分析

2013-09-06 更新

上一版本的分析器包含两个BUG，导致模板逻辑语法中出现地雷：

无法正确处理特殊情况下的字符串 "\"" 或者 '\''
无法解析$号开头且后面为数字的变量，如 $0

以下是新的解析器实现，完善字符串与数字判断的正则，解决上述两个BUG：

// 静态分析模板变量
var KEYWORDS =
    // 关键字
    'break,case,catch,continue,debugger,default,delete,do,else,false'
    + ',finally,for,function,if,in,instanceof,new,null,return,switch,this'
    + ',throw,true,try,typeof,var,void,while,with'

    // 保留字
    + ',abstract,boolean,byte,char,class,const,double,enum,export,extends'
    + ',final,float,goto,implements,import,int,interface,long,native'
    + ',package,private,protected,public,short,static,super,synchronized'
    + ',throws,transient,volatile'

    // ECMA 5 - use strict
    + ',arguments,let,yield'

    + ',undefined';

var REMOVE_RE = /\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|[\s\t\n]*\.[\s\t\n]*[$\w\.]+/g;
var SPLIT_RE = /[^\w$]+/g;
var KEYWORDS_RE = new RegExp(["\\b" + KEYWORDS.replace(/,/g, '\\b|\\b') + "\\b"].join('|'), 'g');
var NUMBER_RE = /^\d[^,]*|,\d[^,]*/g;
var BOUNDARY_RE = /^,+|,+$/g;

var getVariable = function (code) {

    code = code
    .replace(REMOVE_RE, '')
    .replace(SPLIT_RE, ',')
    .replace(KEYWORDS_RE, '')
    .replace(NUMBER_RE, '')
    .replace(BOUNDARY_RE, '');

    code = code ? code.split(/,+/) : [];

    return code;
};

测试代码：

// test
var test = function () {
    /*tang bin*/
    // hello
    var $1, $1$, a$0, a$$, a0;
    var str = c$0 + 'fdsf\'hello';//word
    var $ = 7;
    var x = {};
    x.toString();

    var _me; _2, _;

    var $test = _2 > 399  || _3 < -235;

    return false;
}.toString();

console.log(getVariable(test))

算法采用过滤的思路实现：

删除注释、字符串、方法名，这一步是为了排除干扰
删除可组成变量的字符，只保留字母、数字、美元符号与下划线，并进行分组
删除分组中的 js 关键字与保留字成员
删除分组中的数字成员

经过四轮过滤后，剩下来的就是模板变量列表了，且不会有漏网之鱼，从而避免编译后的函数出现未定义的变量。当然，出于使用场景考虑，忽略了下面的两个问题：

没有排除对象字面量
没有排除正则表达式

关于第2点，有个现实的问题是是：要完美区分正则与除法在不使用语法分析的情况下是无法实现的，引入 ast 成本过大。

最后，默念一遍：没有完美的方案，只有最适合的方案。如有问题欢迎提出

新需求，是否可以把模版放入js文件？

新需求，实现单页多模块应用，所以想把各模块模版放入各自单独的文件中，比如

请问模板内有没有办法自身构件一个JS对象

因为有些CMS静态页面，内容又很多，不太合适分开写

是否把注册后的help和缓存的编译函数公开出来呢？

如题，helper目前可以去prototype拿到，但是缓存后的模板函数想要操作就么办法了！Handlebars处理方式是把helper注册到了Handlebars.helpers属性上，子模板partial注册到了partials属性上，便于后期进行个别处理！

使用语法扩展的时候用include貌似有问题

发生的情况是：我用了语法扩展，在模板里用了include，并且传入了data。模板片段如下：

{each list as row index}
{include 'img_tmp' {list:row}}
{/each}

编译出的代码里面相关的一行是：

$out+=' include \'img_list\' ';
$out+=$escape($string(data:row));
$out+=' ';

于是出现了语法错误。我猜想是语法扩展把{list:row}中的大括号给转成其他的东西了。如果不写{list:row}而直接写row则编译的模板没有语法错误，但是嵌入的模板就获取不到数据了。

我不清楚是我用的不对还是一个bug。文档中没有关于include带data时的写法，是不是也应该补个例子？

建议添加nodejs本地模板文件的支持！

现在artTemplate模板是通过ID来读取html中script标签中的内容获取模板字符串，在nodejs环境下，建议添加本地模板文件的读取支持！

能不能提供jquery整合的snippet

render('template-name', {})

当template-name本身不存在的时候会报错

而一般jquery选择元素，当不存在时并不报错

不支持二维数组？

模板是这样子的

<td><%=list[i]['jd']></td>

输出成这样

<td>=list[i]['jd']></td>

关于data数据判空，有没有简单的方法？

因为实际项目中某些ajax请求返回的data中某些key值是null或不存在的，我基本都是用：<% if(title) { %><%=title%><% } %>。
有没有简单的方法，比如类似freemark中的“!”，例：<%= title! %>或
<%= title??default("")%>。
谢谢。

artTemplate 有没有像Backbone的templete一样有数据格式化的例如 fomatDate

artTemplate 有没有像Backbone的templete一样有数据格式化的例如 fomatDate,格式化日期的

GCC 高级模式下使用出错

GCC 高级模式下，需要用 obj[propertyName] 取缔 obj.propertyName 去暴露接口

代码中，需要调用 _helpers 的接口，都需要带上引号，如 _helpers.$each --> _helpers['$each']
{
$include: template.reander,
$...
}
-->
{
'$include': template.render,
'$...'
}

但在 compile 的 string 中，$helpers.$include(...) 则可不需要修改

combine.html工具当开启压缩后，模板中含有"//"则解析错误

问题代码在combine.html 131行
.replace(//*(.|\n)?_/|//[^\n]\n|//[^\n]_$|/g, '')
"http://"会被当成行注释过滤掉

IE8下速度稍慢，能否优化一下

附图，在IE8下大概比yaya和doT慢了50%，其他浏览器挺不错的，不知道能否优化一下，毕竟IE8市场占有率还是挺大的，谢谢

稳定版本打一下tags吧

稳定版本打一下tags吧，1.3.0貌似不能用了，配套文档也没有及时更新

“引擎支持调试。若渲染中遇到错误，调试器可精确定位到产生异常的模板语句，解决前端模板难以调试的问题。这一切都在 2kb(gzip) 中实现”

264行报的line1，错误也报错了。如果模版被压缩成一行字符串不好定位行号时，应该提供出错字段名。跟这耗了快1小时，几百行的模版字符串二分法排错。

IE下速度不理想，能否优化下，毕竟很多客户还是用ie的

项目中用了artTemplate，感觉不错
但是，有个大列表渲染，客户反映ie下很慢，随后用ie789测试，即便是9，速度也和chrome差距很大。现在普通用户，用ie的还是很多的，糖糖有空优化下ie下的渲染速度呗！

添加从mustache到artTemplate的转化的实现

提一个feature

render后得到的html代码带有双引号. 用jq append到element中居然为空,这个算bug么?

通过template.render('xxx');得到得html带有"" 双引号.这个能否去掉.

是否支持加载文件，继承

类似EJS的文件加载，希望能够以文件片段的方式管理
模板是否支持extends，而非include

在某些移动浏览器执行的时候，会导致模版错误，原因我已经找到，希望能采纳改进到代码里面。

// 提取模板中的变量名
function getKey (code) {

        code = getVariable(code);

        // 分词
        forEach(code, function (name) {

            // 除重
            if (!uniq.hasOwnProperty(name)&&name.length>0) {

//add by hongfa.yy &&name.length>0
setValue(name);
uniq[name] = true;
}

        });

    }

例如：
<%shanks.each([1,2,3],function(index,item){%>
结束时间：<%=data.endTime%>
<%});%>只有类似这种形式才会出问题，整个方法的{}被断开的时候。
<%shanks.each([1,2,3],function(index,item){}%>这样的形式是不会出问题。
以上情况出现错误只在i9100上面。

extension能支持for in 吗？

我要遍历一个对象。而不是数组。
{{each data as value key}}

{{ key }}
{{ value.value }}
{{ value.remark }}

{{/each}}

急！！！以下是mustache.js中的代码实例，请问artTemplate.js中是否能实现

请问如何用artTemplate实现下列将复杂的结构拆分成几个小的子模块呢？
//code
var data = {
"company": "Apple",
"address": {
"street": "1 Infinite Loop Cupertino
",
"city": "California ",
"state": "CA ",
"zip": "95014 "
},
"product": ["Macbook ","iPhone ","iPod ","iPad "]
}

    var tpl = "<h1>{{company}}</h1> <ul>{{>address}}</ul>"
    var partials = {address: "{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}"}

        var html = Mustache.render(tpl, data, partials);
        $('#contaner').html(html);

"Template Error" in artTemplate and underscore

本人在项目里面同时使用到underscore和artTemplate，控制台报错如下：

seajs.use(['$', 'underscore', '/test/arttemplate'], function ($, _, template) {  
        // underscore
        tplData = [
            {
                name: "张三",
                content: "是好人",
                date: "2013-12-30"
            },
            {
                name: "李四",
                content: "是坏人",
                date: "2013-12-31"
            }
        ];
        // 如果把这句注释掉，artTemplate就可以正常运行了
        $("body").html(_.template($("#tplItem").html(), tplData));

        // arttemplate
        var data = {
            title: '基本例子',
            isAdmin: true,
            list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
        };
        var html = template.render('test', data);
        document.body.innerHTML = html;
});

请问这是由于underscore和artTemplate冲突造成的么？