码迷,mamicode.com
首页 > 其他好文 > 详细

【Jade】jade的一些使用技巧

时间:2015-08-07 20:18:48      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:jade   模板引擎   视图渲染   node   

    最近在学习使用Node的express框架来搭建一个web网站,其中会涉及到视图渲染方面的东西。这可以借助ejs或者jade这些模板引擎来辅助渲染(模板引擎有很多,使用得最多的、较为完善的就是ejs和jade)。

    关于选择哪个模板引擎比较好?网上也有不少的说法,我也上网查看了一下,基本上是“一边倒”,然而最后我还是没能从网上得出哪个模板引擎的使用比较好。ejs的语法和一般的PHP、JSP比较相似,是使用<% code %>这种尖括号百分号包含内容的方式,看起来不难,学习的成本也不算太高,但我觉得缺点就是过多地使用<%%>这种方式来嵌套会很容易弄糊涂感觉一不小心就写错了,想要找出问题来可能也比较麻烦。而jade的语法却和zen-coding比较相似(关于zen-coding的语法大家可以网上再搜一下资料,这里就不详细叙述了,zen-coding据说是以前的叫法,现在也有人叫emmet,在sublime text安装该package会十分方便平时的编码),个人认为它比较接近人的思维吧,是按照逻辑一层一层地往下写代码,会有种锻炼人的逻辑的赶脚鸟~但是jade的学习成本是比较高的,最好是先有zen-coding的语法基础,这样学起jade来会易上手很多。网上比较早的一些node教程在降到模板引擎部分时,大多是使用ejs来讲解,这可以降低学习的难度吧,适合初学者。

    但最后我在做项目的时候还是选择了jade,原因是有了zen-coding的基础,加上在做项目的时候想要挑战一下自己学习一门新的语言咯~

    提供一个Jade学习网站:http://segmentfault.com/a/1190000000357534

    由于个人比较习惯使用sublime text来编码,所以建议学习jade的时候最好安装一下与jade相关的插件,https://packagecontrol.io/search/jade 这里有一些在sublime text里可以安装jade的插件,按照名字在package install里安装就OK鸟~

     Jade是会使得jade文件在sublime text编辑器下语法高亮显示;

    Jade Build据说按住Ctrl+B就可以把jade文件编译成HTML文件,HTML文件的输出在相同的目录下,可是我试了下没能成功输出~;

    JadeSnippets也可以很好地帮助jade的编写速度(这个插件不错);

    我最想安装的是HTML2Jade插件,该插件是把HTML文件自动转换成jade格式的文件,可惜我在package install那里没搜到这个插件,更别说安装了。在此提供一个在线转换的网址吧:http://html2jade.aaron-powell.com/  用起来感觉还不错~

    其他的jade插件我就没安装了,但大家可以去试试它们的功能。

接下来聊聊一些jade的技巧吧:

    在jade里面要极为小心空格,因为jade是使用空格来控制元素的嵌套关系的,有时候多一个空格或者少一个空格就会出错,最常见的错误就是在node控制台或者根据路由在浏览器打开该页面的时候,会提示“indent”的缩进问题,导致页面无法显示。建议要么使用tab,要么使用键盘的空格键来控制,不要混用,不然会增加出错的几率。网上还有人提到jade是使用2个空格来控制缩进,而不是4个空格,这个当大家在遇到类似的问题时也不妨从这方面入手解决。

另外,如果出现只能渲染出模板文件(即通用元素),子内容部分渲染不出来的时候,不妨看看是不是在extends layout和block content之间加入了空行或者空格,要把它去掉。

技术分享


Author:致知

Sign:路漫漫其修远兮,吾将上下而求索。

版权声明:本文为博主原创文章,未经博主允许不得转载。

【Jade】jade的一些使用技巧

标签:jade   模板引擎   视图渲染   node   

原文地址:http://blog.csdn.net/lzgs_4/article/details/47339483

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!