前端juicer一个javascript模板引擎实现优化.pdfVIP

Juicer–一个Javascript模板引擎的实现和优化

2012年04月23日|前端技术

让我们从一段代码说起，假设有一段这样的JSON数据：

varjson={

name:流火,

blog:ued..com

};

我们需要根据这段JSON生成这样的HTML代码：

流火(blog:ued..com)

传统的Javascript代码一定是这个样子：

varhtml;

html=++(blog:+json.blog+);

functionsub(str,data){

returnstr

.replace(/{(.*?)}/igm,function($,$1){

returndata[$1]?data[$1]:$;

});

}

有了这个函数，我们拼接字符串的工作就可以简化为：

vartpl={name}(blog:{blog});

varhtml=sub(tpl,json);

看到这里，不用我多说，通过这个例子直观的展现出前端模板引擎的好处所在，这么做

能够完全剥离html和代码逻辑，便于多人协作和后期的代码。当然，当我们的业务逻

辑需要对数据源进行循环遍历，if判断等的时候，这个简明的函数很显然并不能满足我们

的需求，于是便有了如今这市面上众多的模板引擎，诸如Mustache,jQuerytmpl,Kissy

template,ejs,doenjin,etc.

“如无必要，勿增实体。”这是著名的奥卡姆剃须刀法则，简单的说就是避免重复造。

那么就会有童鞋质疑，既然已然有这么多现成的东西可用，为什么还要重新打造一个呢？

我个人认为一个完善的模板引擎应该兼顾这几点：

语法简明

执行效率高

安全性

错误处理机制

多语言通用性

而市面上现有的模板引擎没有做到兼顾以上几点，比如Mustache支持多种语言，通用性不

错，不过性能稍差，而且语法不支持高级特性，例如遍历的时候无法做if判断，也无法获

得index索引值，jQuerytmpl依赖jQuery，缺乏可移植性，Kissytemplate虽然依赖

Kissy,不过性能和语法都值得推荐，doenjin性能和灵活性都很不错，但是语法需

要用原生的js来写，写好的模板代码可读性稍差。

鱼和熊掌不可兼得，语法的处理，安全性的输出过滤和错误处理机制的引入在一定程度上都

会或多或少降低模板引擎的性能，因此就需要我们权衡。Juicer在实现上首先将性能看做

第一个重要的指标，毕竟性能好坏直接影响用户的感知，同时兼顾了安全性和错误处理机制

（即便这样会导致性能的略微下降）。

首先来看下jsperf上同几个主流模板引擎的性能对比。

可以看到，性能上比传统模板引擎均有提升，下边的介绍主要从语法、安全性和错误处理，

以及如何使用这几个方面介绍下Juicer.

a.语法

循环{@each}…{@/each}

判断{@if}…{@elseif}…{@else}…{@/if}

变量（支持函数）${varname|function}

注释{#commenthere}

详细的语法请参考JuicerDocs.

b.安全性

安全性，简单地说就是对输出数据在输出前进行一次转义过滤，避免XSS这样的注入

，简单扫下盲，举个XSS的例子。

varjson={

output:alert(XSS);

};

了安全转义的，当然如果不想被转义，可以使用$${varname}。

juicer.to_html(${output},json);

//输出：;script;alert(XSS);;/script;

juicer.to_html($${output},json);

//输出：scriptalert(XSS);/script

c.