郑州宇泰信息技术有限公司返回旧站 付款方式 在线订单 网站报价 联系我们
news 技术中心
宇泰信息专注于中高端网站建设、网站设计、程序、软件开发以及FLASH多媒体制作。
Yu Tai info focusing on high-end website building, website design, programming, software development and flash production.

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