Node.js开发札记之二·页面篇

2024-02-23 22:38
文章标签 开发 页面 js 之二 node 札记

本文主要是介绍Node.js开发札记之二·页面篇,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


前言:

原本纠结于Web 模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascripteval函数。虽然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标签,发现前面又有路了。预知后事如何,且听下回分解。

这篇关于Node.js开发札记之二·页面篇的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/740153

相关文章

基于Python开发电脑定时关机工具

《基于Python开发电脑定时关机工具》这篇文章主要为大家详细介绍了如何基于Python开发一个电脑定时关机工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 简介2. 运行效果3. 相关源码1. 简介这个程序就像一个“忠实的管家”,帮你按时关掉电脑,而且全程不需要你多做

Java中的Opencv简介与开发环境部署方法

《Java中的Opencv简介与开发环境部署方法》OpenCV是一个开源的计算机视觉和图像处理库,提供了丰富的图像处理算法和工具,它支持多种图像处理和计算机视觉算法,可以用于物体识别与跟踪、图像分割与... 目录1.Opencv简介Opencv的应用2.Java使用OpenCV进行图像操作opencv安装j

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一

使用JavaScript将PDF页面中的标注扁平化的操作指南

《使用JavaScript将PDF页面中的标注扁平化的操作指南》扁平化(flatten)操作可以将标注作为矢量图形包含在PDF页面的内容中,使其不可编辑,DynamsoftDocumentViewer... 目录使用Dynamsoft Document Viewer打开一个PDF文件并启用标注添加功能扁平化

SpringBoot如何访问jsp页面

《SpringBoot如何访问jsp页面》本文介绍了如何在SpringBoot项目中进行Web开发,包括创建项目、配置文件、添加依赖、控制层修改、测试效果以及在IDEA中进行配置的详细步骤... 目录SpringBoot如何访问JSP页python面简介实现步骤1. 首先创建的项目一定要是web项目2. 在

在 VSCode 中配置 C++ 开发环境的详细教程

《在VSCode中配置C++开发环境的详细教程》本文详细介绍了如何在VisualStudioCode(VSCode)中配置C++开发环境,包括安装必要的工具、配置编译器、设置调试环境等步骤,通... 目录如何在 VSCode 中配置 C++ 开发环境:详细教程1. 什么是 VSCode?2. 安装 VSCo

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

C#图表开发之Chart详解

《C#图表开发之Chart详解》C#中的Chart控件用于开发图表功能,具有Series和ChartArea两个重要属性,Series属性是SeriesCollection类型,包含多个Series对... 目录OverviChina编程ewSeries类总结OverviewC#中,开发图表功能的控件是Char

鸿蒙开发搭建flutter适配的开发环境

《鸿蒙开发搭建flutter适配的开发环境》文章详细介绍了在Windows系统上如何创建和运行鸿蒙Flutter项目,包括使用flutterdoctor检测环境、创建项目、编译HAP包以及在真机上运... 目录环境搭建创建运行项目打包项目总结环境搭建1.安装 DevEco Studio NEXT IDE