Juicer – 一个Javascript模板引擎的实现和优化 |
作者:管理员 来源:本站 浏览次数:1961 发布时间:2014-12-5 13:34:06 |
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. “如无必要,勿增实体。” 这是著名的奥卡姆剃须刀法则,简单的说就是避免重复造轮子。那么就会有童鞋质疑,既然已然有这么多现成的东西可用,为什么还要重新打造一个呢? 我个人认为一个完善的模板引擎应该兼顾这几点: 语法简明 执行效率高 安全性
|
网站超市 支付宝 宇泰OA 优化推广 TQ洽谈通 宇泰分站 企业邮箱