技术标签: 模板引擎 jade javascript
前言:node.js
的模板引擎有多种,如:ejs
,Handlebars
,jade
。一开始首先学习了ejs
,但是发现其有一个很大的弊端,那就是它不能继承(由于之前用的全部是thinkphp
的模板,所以用起来非常别扭,只能进行include
,而不能extend
),于是转为jade
,将html
做了一层抽象的模板引擎。
利用npm全局安装:
$ npm install jade --global
由于sublime对jade没有高亮的支持,所以需要我们手动来安装插件,进入到sublime下的Packages,然后执行下面命令即可:
git clone https://github.com/davidrios/jade-tmbundle.git
先来进行一个简单的小demo,感觉下jade
:
新建一个文件命名为:demo.jade
:
doctype html
html
head
meta(charset="utf-8")
title Jade
body
h1 Hello World
终端中执行命令jade demo.jade
,会发现我们的文件夹下多了一个demo.html
,这个就编译出来的html代码,打开一开会非常的乱:
这个代码是被压缩过的,没有任何可读性,我们改下命令就可以得出具有可读性的代码,jade demo.jade -P
:
但是每次更改完文件,我们都要手动来执行一次命令这样实在是太费时间了,我们可以采用jade demo.jade -P -w
,监控我们的jade
,一有改变自动编译。
div
h1 Hello
br
div
h1 World
编译成html
就是
<div>
<h1>Hello</h1>
</div><br>
<div>
<h1>World</h1>
</div>
class
与id
:div.tite#title
代表的就是<div class='title' id='title></div>'
在jade
中还可以将div.tite#title
简写为.title#title
,也会被编译成相应的div
除了class
和id
,其余属性都要在括号内设定,如:
meta(charset="utf-8")
a(href="http://www.baidu.com", title="百度")
这种情况是指,我们的文字太多,编译器会换行,这样我们的缩进就会被破坏,解决这个问题的方法有两种:
一: 缩进后一个|
和一个空格:
p
| 1.aa
strong 11
| 2.bb
strong 22
| 3.cc
strong 33
| 4.dd
strong 44
二: 利用.
:
p.
1.aa<strong>11<strong>
2.bb<strong>22<strong>
3.cc<strong>22<strong>
4.dd<strong>44<strong>
注意:p的每一行内容,在.
后开始,利用.
我们还可以写内置的样式与脚本:
style.
body{
color: gray;
}
script.
var x = "123";
jade的注释有两种:
一: 可以被编译到我们的html
中:
// div#title 123
html中的显示为:
<!-- div#title 123-->
二:非缓存注释,不能被编译到html
中:
只需要在//
后加一个-
就可以//- #title 不会被编译到html中
jade同时允许我们假如对ie
浏览器的条件判断注释,格式与html中一样:
<!--[if IE 8]><strong>换浏览器吧</strong><![endif]-->
在jade中可以进行变量的声明,- var test = "zp1996"
,这样我们就声明了一个test
变量,要是想用这个变量的话也很简单,利用#{test}
就可以,并且这个{}
内支持js
语法,如:#{test.toUpperCase()}
,得到的就是ZP1996
,作为模板语言来说,当然可以接受外界传来的数据,但是需要注意的是在jade声明的变量优先级高于外面传入的,我们来尝试下外面传入数据的方式,首先我们将demo.jade的title
写成#{title}
,然后我们在终端中输入下面命令:
$ jade index.jade -P -w --obj '{"title": "Hello World"}'
打开浏览器刷新下,可以看到我们的网页的title值为Hello World。我们也可以利用一个json
文件来进行数据的传递,新建一个data.json
:
// json文件内容
{
"title": "Hello World"
}
// 终端输入命令
$ jade index.jade -P -w -O data.json
刷新浏览器,可以看到我们的title值仍为Hello World
。
jade在拿变量的时候其实有两种方式:
一:#{}
取值时对变量进行转义,利用=
号同样可以。
- var data = "<script>alert(1);</script>"
div #{data}
div= data //- 注意,此时=要紧挨着div且与data之间有一空格
// 编译成html得:
<div><script>alert(1);</script></div>
<div><script>alert(1);</script></div>
但是=
号与#{}
也有不同,那就是在我们所取得变量是没有定义的,用#{}
取值取出来的是undefined
,而=
取出来的是空字符串:
input(type="text", value="#{zp}")
input(type="text", value=zp)
// html
<input type="text" value="undefined">
<input type="text">
二: !{}
取值时不对变量进行转义,利用!=
同样可以
- var data = "<script>alert(1);</script>"
div !{data}
div!= data //- 注意,此时=要紧挨着div且与data之间有一空格
// 编译成html得:
<div><script>alert(1);</script></div>
<div><script>alert(1);</script></div>
当我们需要在网页上输出#{}
和!{}
时,采用\#{}
和\!{}
就好。
jade支持js原生的流程控制语句,如遍历对象属性时的for...in
,遍历数组时的for
,进行判断时的if...else
:
- var arr = [1, 2, 3, 4];
ul
- for (var i = 0, len = arr.length; i < len; i++)
li #{
arr[i]}
- var n = 0;
ul
while (n < 4)
li= n++
if (arr.length > 3)
p the length of arr is more than 3
else
p the length of arr is less than 3
// html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p>the length of arr is more than 3</p>
jade提供了一些语法糖
each
来遍历对象或者数组
unless
进行条件判断,unless(x) = if (!x)
case when
来实现js原生的switch
- var obj = {
x: 1, y: 2, z: 3};
each val, key in obj
p #{key}: #{val}
each val in obj
p #{val}
unless zp
p zp is undefined
case n
when 3
p n is three
when 4
p n is four
default
p n is n
// html
<p>x: 1</p>
<p>y: 2</p>
<p>z: 3</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>zp is undefined</p>
<p>n is four</p>
mixin
定义公共代码(类似于函数)在某些情况下,代码可能经常会重用,就像函数一样,mixin
就是为了解决这一问题:
// 基本语法:
mixin test
p zp1996
+test
// 既然说了像函数一样,那么它肯定也可以带有参数
mixin lessonsInfo(name, course)
p #{name}'s lessons:
ul
each val, id in course
li #{id}: #{
val}
+lessonsInfo("zp", {
"001": "数学分析", "002": "线性代数"});
// 还可以内联代码块
mixin show
if block
block
else
p no content for the time being
+show
p 123
// 编译后为
p 123
+show
// 编译后为
p no content for the time being
// 同时还只是传递属性
mixin attr(name)
p(class!=attributes.class) #{name}
+attr("attr")(class="demo")
// 编译后:
<p class="demo">attr</p>
// 我们想要传递的是多个属性
mixin attrs(name)
p&attributes(attributes) #{name}
+attrs("attrs")(class="demo", id="demo")
// 参数不确定时和和ES2015中箭头函数的处理方式相同,就是...
mixin manyarg(name, ...items)
ul(class="#{name}")
each item in items
li #{item}
block demo
p this is a demo about how to use block
block demo
// 编译后:
<p>this is a demo about how to use block</p>
<p>this is a demo about how to use block</p>
模板的继承和thinkphp
的模板继承语法基本类似,通过extend
来进行继承,下面来看个例子:
// layout.jade
html
head
meta(charset="utf-8")
title jade
style.
body{
color: gray;
}
script.
var x = "123";
body
block item
p a item in layout.jade
block content
// item.jade
extends layout
block content
block item
p a item in item.jade
// 编译后我们会发现的就是外面的那个item块被里面的这个item块给覆盖掉了
通过include
我们可以将页面抽象出一个个小块,可以说形成一个组件化的方式,比如头部,尾部,搜索框等,这样利于我们的维护我们的页面。
对于include
来说我既可以引入.jade
,也可以引入.html
文件。
// 我们的一个页面的一个骨架
doctype html
html
head
meta(charset="utf-8")
title jade
body
include header
block content
include footer
首先我们需要了解的就是jade
的API
,详情请见:http://jade-lang.com/api/
经常用的的API有就是jade.renderFile(filename, options)
,filename
是jade
文件的一个路径,options
是一些配置,如我们的jade
文件内变量名的值,pretty
是否进行格式化等;这个函数的返回值为html
字符串
与后台交互的一个demo:
https://github.com/zp1996/Hello-World-Follow/tree/master/learnjade
clone下来直接node app.js
就行不用npm install
本文参考:
慕课网—带你学习Jade引擎
文章浏览阅读575次。什么是iconfont在学习iconfont如何使用前,首先我们要了解什么是iconfont、iconfont有什么用以及使用iconfont的好处。iconfont翻译过来就是图标字体,顾名思义就是iconfont显示为图标但实际上却是字体,就像输入法输入“五角星”有的直接可以显示为“☆”一样。那么这个iconfont有什么用呢,现在iconfont在网页上应用非常广泛,比如下面这张图中红..._zm在iconfont加圆圈
文章浏览阅读1.7k次。keras中的采用Sequential模式建立DNN并持久化保持、重新载入def DNN_base_v1(X_train, y_train): model = models.Sequential() model.add(layers.Dense(96, activation='elu',kernel_regularizer=regularizers.l2(0.005)..._如何导入已保存的dnn模型
文章浏览阅读2.8k次,点赞6次,收藏15次。1.Unity一般使用C#代码实现逻辑,真正让手机执行C#写的逻辑步骤如下: 1.C#代码预先编译成IL,然后把IL存到动态链接库中(.dll文件)。 2.JIT编译,程序运行时,将.dll文件中的IL解释为所在平台的机器码,开辟一段内存空间,要求这段内存空间可读、可写、可执行,然后CPU执行之前解释出来的机器码。 其中涉及到两个东西:1.1 IL 中间语言(中间代码)..._为什么使用lua热更新
文章浏览阅读127次。 塞尔达系列推出新作的时候,美术风格都有明显变化。本作的风格比起写实,笔触轻快变化幅度大是其特征。2011年公开的技术演示中,画面风格要更加写实。最终版则更接近于卡通。5年里到底发生了什么呢?▲2011年公开的技术演示 泷泽回答了这个疑问。他展示了大量概念图。 除了进行实验,团队还将过去的作品进行了HD化。泷泽将这..._塞尔达 gdc
文章浏览阅读476次,点赞17次,收藏20次。根据路线图上的重点去进行有针对性的学习,在学习过程中,学会写笔记,做总结。html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。需要这份系统化的资料的朋友,可以添加V获取:vip1024c (备注前端)一个人可以走的很快,但一群人才能走的更远!
文章浏览阅读60次。Node.js是一个异步的世界,官方API支持的都是callback形式的异步编程模型,这会带来许多问题,例如:1、callback嵌套问题;2、异步函数中可能同步调用callback返回数据,带来不一致性。为了解决以上问题Koa出现了。koa是由Express原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的Web框架。阿里内部就在使用Koa框架,并在Koa基础上面做了一些扩展和封装。并且基于koa开发了一个开源框架egg。_nodejs和mysql的后端项目源码
文章浏览阅读2.4k次。
文章浏览阅读1w次。联想拯救者9000X主打轻薄本高性能,针对有一定外出需求的用户,因此它机身重量仅为1.92kg。而联想拯救者7000P主打高性能,对电脑重量没有太多限制要求,只需要性能在自己的预算范围内足够强即可。选联想拯救者R9000X、Y9000X、R7000P还是Y7000P 这些点很重要看过你就懂了http://www.adiannao.cn/dy性能不同它们四款的性能是肯定不同的,联想拯救者R9000X和R7000P则是搭载有锐龙处理器,联想拯救者Y9000X和Y7000P则是搭载有Intel处理器。可以说联_学java用拯救者y9000还是y7000
文章浏览阅读3.6k次。虚拟化虚拟化(virtualization)技术是一个通用的概念,在不同领域有不同的理解。在计算领域,一般指的是计算虚拟化(computing virtualization),或通常说的服务器虚拟化。维基百科上的定义如下:“在计算机技术中,虚拟化是一种资源管理技术,是将计算机的各种实体资源,如服务器、网络、内存及存储等,予以抽象、转换后呈现出来,打破实体结构间的不可切割的障碍,使用户可以用比..._docker和虚拟化主机的区别
文章浏览阅读2.5w次。iframe是一个可以把另外一个网页嵌入到一个网页里的代码,非常有用。对于一个内容不错的网页,要方便地把它搬到自己的博客里,用这个代码最合适。而对于在新浪博客里不支持的一些网页效果和代码,可先把他们设置好,在支持他们的网站上使用,或上传到一个免费的网络空间或网络硬盘里,获取相应的网页地址,然后用iframe嵌入到新浪博客里,非常好用! 一、固定位置的iframe代码:
文章浏览阅读699次,点赞11次,收藏6次。控制器默认IP地址为192.168.0.2,帐号:admin,密码:123456。首先登录大华Smartpss客户端,点击:设备管理->手动添加。只能通过Smartpss客户端软件修改IP地址,3、点击TCP/IP即可修改门禁控制器的IP地址。2、修改门禁控制器IP,点击齿轮图标修改IP。大华门禁控制器不支持网页访问,_门禁控制器ip地址
文章浏览阅读1.6k次,点赞4次,收藏9次。使用3D模型在线转换网站进行dxf格式在线打开、查看和转换,NSDT 3dconvert支持将dxf格式在线转换为glb、gltf、obj、stl、dae、ply、off等格式。_dxf在线