java模板引擎 jade_jade模板引擎

article/2025/3/16 23:55:26

jade是使用JavaScript实现,可供nodejs使用的高性能模板引擎(性能高不高,有些争议。姑且称之为高性能吧!)。模板引擎有很多,主要使用比较广泛的是jade和ejs,modejs项目默认使用jade作为模板引擎,我也就不多说了至于如何选择,还是得就事论事综合各种因素来考虑。在此不对优缺点进行分析。插一句嘴,ejs的语法更像jsp、asp这样的技术而jade更像python的语法风格,缩进来缩进去,有点绕。不过这并不影响代码的可读性(我是这么认为的)。不管是jade还是ejs语法都比较简单,所以不存在哪个容易上手,就算你没使用过jsp或者Python也不会影响学习,只是接触过jsp或者Python的人看jade代码可能比较亲切罢了,我觉得把一个技术语言和另一个技术语言来做比较的这么学习是不太明智的,起码不能什么都去比较。每种语言都有自己的风格和独立性,不混在一块为妙。

jade是nodejs一个重要模块,jade文件可以被预编译成为.js文件,也可以被编译成为目标html代码,还是很友好的。如果你得到的是预编译后的js文件,那么你完全可以在客户端去调用执行,没有任何问题!下面简单的记录一下jade的基本使用规则和一些示例代码:

1,代码缩进、文档申明、标签的属性书写、标签元素的内容书写

04e57dc69da47d920175b01e2fddacb7.png

以上简单的列出了一些jade的基本语法,不写元素的情况下,jade默认解析成为div元素。属性一般写在一对括号中间,两个属性使用逗号分隔。

2,jade的文档注释和内容换行

0b28a6854e2f3acffc23e70f69858396.png

行注释很清楚,块注释是没有见过的!不过也不麻烦。文本换行使用元素后边加. 或者文本前边加|。但是必要的缩进是得明确的。

3,jade的变量申明和变量引用

170ff94578dc046c71c073b3ed944f96.png

没有什么可说的!

4,jade的编译

原谅我总是这么马虎,jade是node生态之中的一个模块,你可以使用npm 安装到本地。npm install jade -g。建议使用-g来安装到全局使用。jade的使用也很简单。jade fileName.jade –P –w 就可以了。-P表示pretty也就是漂亮的格式化的,-w表示修改检查和自动编译。好了,插播完毕。

5,内部声明的变量会被优先执行,如果有继承那么你也可以说是被复写了。

6,变量是有方法提供使用的哦!例如数组变量就有length可以用。具体就不列举了,大致和js差不多。遇到错误直接去查API就好了。

7,jade的转义和非转义

14866917022efbf186d27fc2777f575a.png

上面好像也已经很清楚了。但是需要注意的是 p=varName 这种形式的情况下 后面是不能再追加内容的!但是一定不能追加吗?不一定。呵呵,因为原来p=varName如果varName没有被定义会输出undefined,但是现在输出的是空串哦!所以再插一句嘴:jade包括node在内的所有框架工具集合的更新速度非常之快。所以再生产环境中需要自己去测试或者去看官方的解释文档来做判断。

8,条件语句、循环语句、switch语句

d05285633c3b5bb39c4b22997beaec01.png

9,mixin

现在开始搞点有比较好玩的,对,没错,就叫迷信。

f7012c18db557470f7b6ae987d0279b3.png等等,mixin 还有点没说完!

d412f3d6d68ac67326980bc7cd5ddc6e.png

有点凌乱不过看起来非常的犀利!

10,block和extends

block blockName  换行定义的所有jade模板都是blockName的内容。在jade文件中可以随意调用(本文件中)。extends可以使得jade实现继承关系。假设index.jade中定义了头部和尾部,那么在头尾之间可以插入对block的调用,block blockName 然后再blockName的定义文件中在文档首部写上extend index.jade 。那么index.jade文件就会是包括头尾合blockName块的完整代码。对,没错。这样的话就实现了代码的简单的模块化处理。

11,include

搞过jsp的都知道

12,jade在node中的渲染

var http = require('http')var jade = require('jade')//var html2jade = require('html2jade')

http.createServer(function(req, res) {

res.writeHead(200, {'Content-Type': 'text/html'})//html2jade.convertDocument(document, {}, function(err, jade) {

//})

//1. jade.compile

//var fn = jade.compile('div #{course}', {})

//var html = fn({course: 'jade'})

//2. jade.render

//var html = jade.render('div #{course}', {course: 'jade render'})

//3. jade.renderFile

var html = jade.renderFile('index.jade', {course: 'jade renderFile', pretty: true})

res.end(html)

}).listen(1337, '127.0.0.1')

console.log('Server running at 1337')

这里使用到了一些jade的核心API,有renderFile render   compile 这些接口可以实现在node中对jade文件的编译输出控制。还有HTML2Jade这个模块的使用,顾名思义,HTML和Jade之间的互相转化。貌似非常有用,先标记备用吧!renderFile好像比较常用一点吧!

13,jade的扩展:filter

filter的作用就是插入其他语言的脚本并且对其进行解释。比如:

:markdown

Hi,this is **huazi** [link](http://huazihear.github.io)

:less

body{

p{

color:red;

}

}

14,jade的客户端使用!

jade文件的目标编译语言是HTML,但是我们知道jade使用JavaScript实现的编译系统,所以jade可以使用类似预编译的功能,使其目标代码指向js。呵呵,js是可以在客户端来调用的,so,jade的客户端使用问题解决了!

了解完这些,估计算是基本的开发需求差不多满足了,当然对于jade的描述只是一部分。而且jade和其他node生态平台中的模块一下在不停的发展,所以在使用的过程中最好还是对照API使用保险一点。


http://chatgpt.dhexx.cn/article/N7WvrYLa.shtml

相关文章

jade java_JADE提升篇

以下如果未特殊声明,都在JADE管理器中运行,然后再Eclipse控制台中查看! JADE行为类 在前面的例子中,Agent所作的工作都定义在了setup方法中,实际上它具有的行为和执行的动作都应该定义在Behavious类中,我们…

Windows系统缺失jade6.dll文件导致程序无法运行解决办法

其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下…

JADE平台搭建

首先从下列官方网站下载必要的软件或文件。 JADE官方网站:http://jade.tilab.com/; JAVA环境搭建之JDK官网:http://www.oracle.com/technetwork/java/javase/downloads/index.html eclipse软件下载:https://www.eclipse.org/do…

html jade文件,Jade模板

Express框架里内嵌了Jade模板引擎。正好项目里也要用到,本篇整理了下Jade的相关用法。 安装与执行 标签和属性 多行文本 变量 语句 Mixin 模板 注释 过滤器 安装与执行 安装很简单: npm install jade –global 安装后本地随便新建一个sample.jade文件&am…

MDI Jade6的安装(含ocx控件的安装、PDF索引建立、修改注册表)

前言 关于介绍及安装jade的资料及教程,上小木虫、六维、百度等一搜一大堆,这里不再详细介绍及逐一列举。 这里只谈干货,里面很多问题需要仔细摸索解决,这里就一一说明了。 记住:不管是安装文件还是所需要的文件&…

Jade6安装及PDF卡片导入

2020年是中国脱贫攻坚的收官之年,也是全面建成小康社会的关键一年。在这样一个具有标志性意义的年代,我觉得应该没有人像我一样还用着过渡版的Windows 8了。别问为什么不装Windows 10,因为电脑带不动,毕竟伴随我进行了十年的艰苦征…

Ubuntu系统重装Ubuntu系统

系统环境:Ubuntu18.04 目的:重装Ubuntu系统 步骤: 1. sudo usb-creator-gtk 2. 选择iso系统文件 Ubuntu 18.04.4.XXX.iso 3. 选择u盘,并选择Make Startup Disk 4. 制作完成后重启电脑,长按F12(联想笔记本&#xf…

【2021】重装ubuntu16.04系统

2021年3月3日19点47分 本人因为种种原因导致ubuntu16.04系统崩溃,现需要重装系统,故记录下这次重装ubuntu之旅。 原因:ubuntu16.04 - 检测到系统程序出现问题 一直在登录用户的界面,登录进去后再闪退出来,一直循环登…

重装Ubuntu系统及系列软件安装

重装Ubuntu系统及系列软件安装 【1】安装ubuntu20.04.03系统下载Ubuntu20.04.03系统更换系统apt的源 【2】CUDA和cudnn安装下载CUDA安装包并安装 【3】pycharm的安装【4】conda的安装【5】兼容Tf1和30显卡 【1】安装ubuntu20.04.03系统 下载Ubuntu20.04.03系统 【下载地址】h…

双系统重装Ubuntu

完全删除Ubuntu 1、右键此电脑-管理-磁盘管理,删除Ubuntu所在卷(Ubuntu EFI分区无法删除) 2、删除Ubuntu EFI分区 ①Win R 输入cmd打开终端,输入 diskpart 进入磁盘工具 ②输入 list disk 查看磁盘,输入 select d…

Windows重装Ubuntu系统

一,去官网下载Ubuntu镜像 二、下载镜像安装工具(win32diskManger) 下载之后完成安装 三、制作Ubuntu安装盘 打开win32diskManger 选择镜像文件,选择u盘,确认后写入,请备份好资料,写入后数据会格…

Ubuntu16.04重装系统

Ubuntu16.04重装系统 安装显卡驱动第一步 禁用nouveau第二步 下载驱动第三步 进入命令行模式,关闭lightdm第四步 安装显卡驱动第五步 查看Nivida 设置更新与源地址步骤 安装gnome桌面安装搜狗输入法安装谷歌浏览器安装Anaconda3安装Pycharm安装keras下载Cuda安装cuD…

装机(一) ubuntu server 系统安装图文教程

装机任务为Dell C4130服务器,安装ubuntu16.04系统,无图形界面。 第一步为了安装ubuntu系统我们需要先下载合适的系统,这里我们下载了ubuntu16.04LTS服务器版本,也就是server版本的系统。可以去官方网站下载http://www.ubuntu.org…

如何重装Ubuntu 系统

如果你弄坏了你的 Ubuntu 系统,并尝试了很多方法来修复,你最终放弃并采取简单的方法:重新安装 Ubuntu。 我们一直遇到这样一种情况,重新安装 Linux 似乎比找出问题并解决来得更好。排查 Linux 故障能教你很多,但你不会…

ubuntu重装系统

新的电脑主板带有UEFI功能,但是使用这个功能有很多问题。 1,系统稳定后不要再update了。 2,必须给UEFI分一个区,100M大小就够了,否则系统起不来 3,重装根分区,参照http://forum.ubuntu.org.c…

Windows还是Ubuntu重装系统,不用愁,傻瓜式安装

程序猿:妹子电脑装系统不用愁!Windows还是Ubuntu都搞定! 重装系统是不是很麻烦?是不是很烦重装系统,什么windows,什么Ubuntu(linux),看上去就麻烦,那么小编今天就给你科普一下这些重…

【ubuntu重装系统后的软件配置_memo】

重装系统后系统环境恢复 备份安装系统常用的一些debvscode 更改sourcespip加速爬长城的家伙式儿安装ROS安装cmake安装git安装zsh顺便开个ssh提升幸福感的映射配置neovimplugins字体插件遇到的问题 锁键盘/鼠标小玩意儿 备份 实验时不起眼的图顺手写的脚本忘记从哪儿下载的资源…

Ubuntu系统重装 -- 制作启动盘、装机过程问题、环境配置

这篇文章是我为了记录第一次重装 Ubuntu 系统,也是对 Ubuntu 开发环境配置的一次总结。 Windows 系统的重装很简单,用 老毛桃 做一个 WinPE盘 然后下载 win10 镜像,启动,之后傻瓜式操作就可以,剩下的无非就是激活 Windows 等问题…

Ubuntu20.04系统重装

仍然采取用系统盘的方式重装,本次采用直接在系统盘中再次分区的方式 1、插入系统盘,点击电脑重启,出现图标的时候,按F1、F2、F10、F11键,进入Bios模式,选择第三列,进入内存盘,并且选…

【史上最全】重装ubuntu20.04系统基本环境配置

最近新买电脑重装ubuntu玩深度学习,踩了两天坑总结处下列流程 一、重装系统(U盘方式) ubuntu20.04镜像文件下载地址: Ubuntu 20.04.4 Desktop (64-bit) 在ubuntu官网下载.iso镜像文件,然后使用UltralSO软件制作系统启动盘&…