前言:
原本纠结于Web 模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中eval函数。虽然eval函数很强大,强大到可以“凭空”生成对象或执行代码,但总觉得他破坏了代码的优雅性。加之"eval"和"evil"(邪恶)长得挺像的。Eval函数的印象不太好,大多数时候将其当做"禁手"。这时候反正也没有什么好办法了。通过Handlebars自定义函数使用eval执行想要的逻辑。以拼接字符的模式来进行逻辑判断理论上可以如同EL表达式一样处理页面上的大部分逻辑。好像效果还不错哦。
案例:
安装handlebars
npm install handlebars
还是在我们之前的express项目里。建两个文件。
模板:test_expression.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> {{#expression '(' x.a'==' 3 '||' x.a'>' 4 ')&&' x.b'>' 1}} green {{else}} red {{/expression}} </body> </html>
js代码:test_expression.js
var fs = require('fs'); var hbs = require('handlebars'); //主要思想是使用eval执行想要的逻辑。以拼接字符的模式来进行逻辑判断理论上可以如同EL表达式一样处理页面上的大部分逻辑。如:{{#expression a '==' b '&&' c '>' 0}} hbs.registerHelper('expression', function() { var exps = []; try{ //最后一个参数作为展示内容,也就是平时的options。不作为逻辑表达式部分 var arg_len = arguments.length; var len = arg_len-1; for(var j = 0;j<len;j++){ exps.push(arguments[j]); } var result = eval(exps.join(' ')); if (result) { return arguments[len].fn(this); } else { return arguments[len].inverse(this); } }catch(e){ throw new Error('Handlerbars Helper "expression" can not deal with wrong expression:'+exps.join(' ')+"."); } }); var template = hbs.compile(fs.readFileSync('../templates/test_expression.html').toString()); var http =require("http"); http.createServer(function(request,response) { var conditions = {x:{a:4,b:2}}; var html = template(conditions); response.writeHead(200, { "Content-Type":"text/html", "charset":"UTF-8" }); response.write(html); response.end(); }).listen(3000);
运行CMD命令行模式下进入node.express\test目录下执行node test_expression.js
可以改变var conditions = {x:{a:4,b:2}}来验证逻辑表达式。
总结:
万分感谢能看到这里的童鞋。上面的内容其实就是一些基本的套页面流程。着重点在于handlebar的自定义helper功能和解决页面弱逻辑。个人支持handlebar作者提出的页面弱逻辑观点。但是觉得至少得支持下逻辑表达式。否则一个页面写一堆if else或其他逻辑表达式衍生代码,太累人了。一度想要放弃这块。直到写出expression标签,发现前面又有路了。预知后事如何,且听下回分解。
时间: 2024-10-05 03:52:26