欢迎来到[自学php网] ①群 287460651

主页 > 前端 > nodejs >

jade模板引擎使用亚博足球APP

来源:未知    时间:2017-05-11 09:44 作者:xxadmin

[导读] 试玩 特性 其它实现 安装 浏览器支持 API 选项 标签 标签文本 注释 块注释 内联 块展开 Case 属性 HTML Doctypes 过滤器 代码 循环 条件语句 模板继承 前置、追加代码块 包含 Mixins 产生输出...

导航:



Jade 是一个高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用。

试玩

你可以在网上试玩 Jade

特性

  • 客户端支持

  • 代码高可读

  • 灵活的缩进

  • 块展开

  • Mixins

  • 静态包含

  • 属性改写

  • 安全,默认代码是转义的

  • 运行时和编译时上下文错误报告

  • 命令行下编译jade模板

  • HTML5 模式 (使用 !!! 5 文档类型)

  • 在内存中缓存(可选)

  • 合并动态和静态标签类

  • 可以通过 filters 修改树

  • 模板继承

  • 原生支持 Express JS

  • 通过 each 枚举对象、数组甚至是不能枚举的对象

  • 块注释

  • 没有前缀的标签

  • AST Filters

  • 过滤器

  • Emacs Mode

  • Vim Syntax

  • TextMate Bundle

  • Coda/SubEtha syntax Mode

  • Screencasts

  • html2jade 转换器

其它实现

jade有其他语言的实现,可以实现前后端渲染的统一:

安装

npm install jade

浏览器支持

把 Jade 编译为一个可供浏览器使用的单文件,只需要简单的执行:

make jade.js

如果你已经安装了 uglifyjs (npm install uglify-js),你可以执行下面的命令它会生成所有的文件。其实每一个正式版本里都帮你做了这事。

make jade.min.js

默认情况下,为了方便调试Jade会把模板组织成带有形如 __.lineno = 3 的行号的形式。 在浏览器里使用的时候,你可以通过传递一个选项 { compileDebug: false } 来去掉这个。
下面的模板

p Hello #{name}

会被翻译成下面的函数:

function anonymous(locals, attrs, escape, rethrow) {
  var buf = [];
  with (locals || {}) {
    var interp;
    buf.push('\n

Hello ' + escape((interp = name) == null ? '' : interp) + '\n

');   }   return buf.join(""); }

通过使用 Jade 的 ./runtime.js你可以在浏览器使用这些预编译的模板而不需要使用 Jade, 你只需要使用 runtime.js 里的工具函数, 它们会放在 jade.attrs, jade.escape 这些里。 把选项 { client: true } 传递给 jade.compile(), Jade 会把这些帮助函数的引用放在jade.attrs, jade.escape.

function anonymous(locals, attrs, escape, rethrow) {
  var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow;
  var buf = [];
  with (locals || {}) {
    var interp;
    buf.push('\n

Hello ' + escape((interp = name) == null ? '' : interp) + '\n

');   }   return buf.join(""); }

API

var jade = require('jade');

// Compile a function
var fn = jade.compile('string of jade', options);
fn(locals);

选项

  • self      使用 self 命名空间来持有本地变量. (默认为 false)

  • locals    本地变量对象

  • filename  异常发生时使用,includes 时必需

  • debug     输出 token 和翻译后的函数体

  • compiler  替换掉 jade 默认的编译器

  • compileDebug  false的时候调试的结构不会被输出

  • pretty    为输出加上了漂亮的空格缩进 (默认为 false)

标签

标签就是一个简单的单词:

html

它会被转换为

标签也是可以有 id 的:

div#container

它会被转换为

怎么加 class 呢?

div.user-details

转换为

多个 class 和 id? 也是可以搞定的:

div#foo.bar.baz

转换为

不停的 div div div 很讨厌啊 , 可以这样:

#foo
.bar

这个算是我们的语法糖,它已经被很好的支持了,上面的会输出:

标签文本

只需要简单的把内容放在标签之后:

p wahoo!

它会被渲染为

wahoo!

.

很帅吧,但是大段的文本怎么办呢:

p
  | foo bar baz
  | rawr rawr
  | super cool
  | go jade go

渲染为

foo bar baz rawr.....

怎么和数据结合起来? 所有类型的文本展示都可以和数据结合起来,如果我们把 { name: 'tj', email: 'tj@vision-media.ca' } 传给编译函数,下面是模板上的写法:

#user #{name} <#{email}>

它会被渲染为

tj <tj@vision-media.ca>

当就是要输出 #{} 的时候怎么办? 转义一下!

p \#{something}

它会输出

#{something}

同样可以使用非转义的变量 !{html}, 下面的模板将直接输出一个 " | !{html}

内联标签同样可以使用文本块来包含文本:

label
  | Username:
  input(name='user[name]')

或者直接使用标签文本:

label Username:
  input(name='user[name]')

包含文本的标签,比如        

My Site

    

Welcome to my super lame site.

           

Copyright>(c) foobar

    

  

前面已经提到,include 可以包含比如 HTML 或者 CSS 这样的内容。给定一个扩展名后,Jade 不会把这个文件当作一个 Jade 源代码,并且会把它当作一个普通文本包含进来:

html
  head
    //- css and js have simple filters that wrap them in