摘要：前言的模板引擎有多种，如，，。一开始首先学习了，但是发现其有一个很大的弊端，那就是它不能继承由于之前用的全部是的模板，所以用起来非常别扭，只能进行，而不能，于是转为，将做了一层抽象的模板引擎。对于来说我既可以引入，也可以引入文件。
前言：node.js的模板引擎有多种，如：ejs，Handlebars，jade。一开始首先学习了ejs，但是发现其有一个很大的弊端，那就是它不能继承（由于之前用的全部是thinkphp的模板，所以用起来非常别扭，只能进行include，而不能extend），于是转为jade，将html做了一层抽象的模板引擎。
安装jade利用npm全局安装：
$ npm install jade --global
由于sublime对jade没有高亮的支持，所以需要我们手动来安装插件，进入到sublime下的Packages，然后执行下面命令即可：
git clone https://github.com/davidrios/jade-tmbundle.gitHello World
先来进行一个简单的小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，一有改变自动编译。
jade采取的是缩进的方式来确定其关系，并且无论是需要闭合的标签还是单个标签都是用其标签名即可，如：
div h1 Hello br div h1 World
编译成html就是
Hello
World
设定class与id:
div.tite#title代表的就是 设定其他属性： 除了class和id，其余属性都要在括号内设定，如： 一行文本太长怎么破： 这种情况是指，我们的文字太多，编译器会换行，这样我们的缩进就会被破坏，解决这个问题的方法有两种： 一： 缩进后一个|和一个空格： 二： 利用.: 注意：p的每一行内容，在.后开始，利用.我们还可以写内置的样式与脚本： 注释： jade的注释有两种： 二：非缓存注释，不能被编译到html中： jade同时允许我们假如对ie浏览器的条件判断注释，格式与html中一样： 变量声明： 在jade中可以进行变量的声明，- var test = "zp1996"，这样我们就声明了一个test变量，要是想用这个变量的话也很简单，利用#{test}就可以，并且这个{}内支持js语法，如：#{test.toUpperCase()}，得到的就是ZP1996，作为模板语言来说，当然可以接受外界传来的数据，但是需要注意的是在jade声明的变量优先级高于外面传入的，我们来尝试下外面传入数据的方式，首先我们将demo.jade的title写成#{title}，然后我们在终端中输入下面命令： 打开浏览器刷新下，可以看到我们的网页的title值为Hello World。我们也可以利用一个json文件来进行数据的传递，新建一个data.json： 刷新浏览器，可以看到我们的title值仍为Hello World 。 但是=号与#{}也有不同，那就是在我们所取得变量是没有定义的，用#{}取值取出来的是undefined，而=取出来的是空字符串： 二： !{}取值时不对变量进行转义，利用!=同样可以 当我们需要在网页上输出#{}和!{}时，采用#{}和!{}就好。 js原生流程控制语句 jade支持js原生的流程控制语句，如遍历对象属性时的for...in，遍历数组时的for，进行判断时的if...else： the length of arr is more than 3 each jade提供了一些语法糖 x: 1 y: 2 z: 3 1 2 3 zp is undefined n is four mixin定义公共代码（类似于函数） 在某些情况下，代码可能经常会重用，就像函数一样，mixin就是为了解决这一问题： attr 模板继承 this is a demo about how to use block this is a demo about how to use block 模板的继承和thinkphp的模板继承语法基本类似，通过extend来进行继承，下面来看个例子： include 通过include我们可以将页面抽象出一个个小块，可以说形成一个组件化的方式，比如头部，尾部，搜索框等，这样利于我们的维护我们的页面。 首先我们需要了解的就是jade的API，详情请见：http://jade-lang.com/api/ 与后台交互的一个demo： 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/49953.html
在jade中还可以将div.tite#title简写为.title#title，也会被编译成相应的div
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.aa11
2.bb22
3.cc22
4.dd44
style.
body{
color: gray;
}
script.
var x = "123";
一： 可以被编译到我们的html中：// div#title 123
html中的显示为：
只需要在//后加一个-就可以//- #title 不会被编译到html中$ jade index.jade -P -w --obj "{"title": "Hello World"}"
// json文件内容
{
"title": "Hello World"
}
// 终端输入命令
$ jade index.jade -P -w -O data.json
jade在拿变量的时候其实有两种方式：
一：#{}取值时对变量进行转义，利用=号同样可以。- var data = ""
div #{data}
div= data //- 注意,此时=要紧挨着div且与data之间有一空格
// 编译成html得：
input(type="text", value="#{zp}")
input(type="text", value=zp)
// html
- var data = ""
div !{data}
div!= data //- 注意,此时=要紧挨着div且与data之间有一空格
// 编译成html得：
- 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
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
重用jade代码块
// 基本语法：
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")
// 编译后：
block demo
p this is a demo about how to use block
block demo
// 编译后：
// 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来说我既可以引入.jade，也可以引入.html文件。// 我们的一个页面的一个骨架
doctype html
html
head
meta(charset="utf-8")
title jade
body
include header
block content
include footer
jade与后台交互
经常用的的API有就是jade.renderFile(filename, options)，filename是jade文件的一个路径，options是一些配置，如我们的jade文件内变量名的值，pretty是否进行格式化等；这个函数的返回值为html字符串
https://github.com/zp1996/Hel...
clone下来直接node app.js就行不用npm install
本文参考：
慕课网—带你学习Jade引擎
摘要：一些与一起使用的流行模板引擎是和，应用程序生成器使用作为其默认值，但它也支持其他几个。有关可与一起使用的模板引擎列表，请参阅模板引擎，另请参阅比较模板引擎等。，使用的模板引擎，例如，要使用模板引擎。 使用模板引擎 模板引擎使你可以在应用程序中使用静态模板文件，在运行时，模板引擎用实际值替换模板文件中的变量，并将模板转换为发送到客户端的HTML文件，这种方法可以更轻松地设计HTML页面。...
摘要：是一个有着完善和惊艳特性的模板引擎。是一个强大的客户端模板引擎，用来将数据绑定到页面的结构中。一套同时可用于浏览器或的异步模板引擎。是一套富功能的模板引擎。本文链接个最好的模板引擎来源编译含内容扩充责任沙渺 JavaScript随着各种神奇的实用功能库日渐丰富，而越来越受到Web开发者与设计师的追捧，例如：jQuery, MooTools, Prototype等。 使用JavaScr...
摘要：相关的网站开发有这么常用的四款数据层视图层控制层框架，我们今天说一下阿里的框架是一个自身功能极简，完全是由路由和中间件构成一个的开发框架安装创建一个目录通过命令为你的应用创建一个文件。修改请求和响应对象。注意只对使用或加载的中间件有效。 express express相关的网站*http://expressjs.com/*http://www.expressjs.com.cn/*htt...
摘要：页面调试腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。前端业务代码工具库。动画库动画库，也是目前通用的动画库。 本人微信公众号：前端修炼之路，欢迎关注 本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。 另外，感谢白小明，文中很多的工具来源于此。 弹出框 layer：http://layer....
阅读 961·2021-11-24 09:39
阅读 3383·2021-10-27 14:20
阅读 2322·2019-08-30 14:08
阅读 3361·2019-08-29 16:34
阅读 2176·2019-08-26 12:14
阅读 2104·2019-08-26 11:54
阅读 2771·2019-08-26 11:44
阅读 2474·2019-08-26 11:38
