JavaScript模板引擎应用场景及实现原理详解(2)

var Render = new Function("$data", "$filename", code); /*Outputs: function anonymous($data, $filename) { 'use strict'; var $utils = this, $helpers = $utils.$helpers, isAdmin = $data.isAdmin, $escape = $utils.$escape, title = $data.title, $each = $utils.$each, user = $data.user, name = $data.name, i = $data.i, $out = ''; if (isAdmin) { $out += '\n\n <h1>'; $out += $escape(title); $out += '</h1>\n <ul>\n '; $each(user, function(name, i) { $out += '\n <li>'; $out += $escape(i + 1); $out += ' ：'; $out += $escape(name); $out += '</li>\n '; }); $out += '\n </ul>\n\n '; } return new String($out); } */ console.log(Render);

2.5 装载数据，视图呈现

/*Outputs: <h1>User lists</h1> <ul> <li>1 ：zuojj</li> <li>2 ：Benjamin</li> <li>3 ：John</li> <li>4 ：Rubby</li> <li>5 ：Handy</li> <li>6 ：CIMI</li> </ul> */ console.log(new Render(data, filename) + ''); //对象转换为字符串 return new Render(data, filename) + '';

三、常见JavaScript模板引擎及测试对比

artTemplate —— 高性能JavaScript模板引擎(腾讯CDC)
Velocity.js —— 来自淘宝的JS 模板引擎

Juicer —— 高效、轻量的Javascript模板引擎
mustache.js —— Logic-less {{mustache}} templates with JavaScript

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》