UPDATE: juicer-0.3.1-dev published @ github.com. 让我们从一段代码说起，假设有一段这样的JSON数据： var json={ name:”流火”, blog:”ued.taobao.com” }; 我们需要根据这段JSON生成这样的HTML代码： 流火 (blog: ued.taobao.com) 传统的Javascript代码一定是这个样子： var html; html=” json.name ’ (blog: ‘ json.blog ’)'; 不言而喻，这样的代码混杂了html结构和代码逻辑，而且代码不具可读性，不便于后期维护，于是便有了这样一个函数： function sub(str,data) {     return str         .replace(/{(.*?)}/igm,function($,$1) {             return data[$1]?data[$1]:$;         }); } 有了这个函数，我们拼接字符串的工作就可以简化为： var tpl=’{name} (blog: {blog})’; var html=sub(tpl,json); 看到这里，不用我多说，我想通过这个例子直观的展现出前端模板引擎的好处所在，这么做能够完全剥离html和代码逻辑，便于多人协作和后期的代码维护。当然，当我们的业务逻辑需要对数据源进行循环遍历，if判断等的时候，这个简明的函数很显然并不能满足我们的需求，于是便有了如今这市面上众多的模板引擎，诸如Mustache, jQuery tmpl, Kissy template, ejs, doT, nTenjin, etc. “如无必要，勿增实体。” 这是著名的奥卡姆剃须刀法则，简单的说就是避免重复造轮子。那么就会有童鞋质疑，既然已然有这么多现成的东西可用，为什么还要重新打造一个呢？ 我个人认为一个完善的模板引擎应该兼顾这几点： 语法简明 执行效率高 安全性UPDATE: juicer-0.3.1-dev published @ github.com. 让我们从一段代码说起，假设有一段这样的JSON数据： var json={ name:”流火”, blog:”ued.taobao.com” }; 我们需要根据这段JSON生成这样的HTML代码： 流火 (blog: ued.taobao.com) 传统的Javascript代码一定是这个样子： var html; html=” json.name ’ (blog: ‘ json.blog ’)'; 不言而喻，这样的代码混杂了html结构和代码逻辑，而且代码不具可读性，不便于后期维护，于是便有了这样一个函数： function sub(str,data) {     return str         .replace(/{(.*?)}/igm,function($,$1) {             return data[$1]?data[$1]:$;         }); } 有了这个函数，我们拼接字符串的工作就可以简化为： var tpl=’{name} (blog: {blog})’; var html=sub(tpl,json); 看到这里，不用我多说，我想通过这个例子直观的展现出前端模板引擎的好处所在，这么做能够完全剥离html和代码逻辑，便于多人协作和后期的代码维护。当然，当我们的业务逻辑需要对数据源进行循环遍历，if判断等的时候，这个简明的函数很显然并不能满足我们的需求，于是便有了如今这市面上众多的模板引擎，诸如Mustache, jQuery tmpl, Kissy template, ejs, doT, nTenjin, etc. “如无必要，勿增实体。” 这是著名的奥卡姆剃须刀法则，简单的说就是避免重复造轮子。那么就会有童鞋质疑，既然已然有这么多现成的东西可用，为什么还要重新打造一个呢？ 我个人认为一个完善的模板引擎应该兼顾这几点： 语法简明 执行效率高 安全性