zoukankan      html  css  js  c++  java
  • js 模板引擎 jade使用语法

    Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持。

    功能

    · 客户端支持

    · 超强的可读性

    · 灵活易用的缩进

    · 块扩展

    · 代码默认经过编码处理以增强安全性

    · 编译及运行时的上下文错误报告

    · 命令行编译支持

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

    · 可选的内存缓存

    · 联合动态和静态标记类

    · 利用过滤器解析树的处理

    · 支持 Express JS

    · 利用each透明的循环objects,arrays甚至不可枚举对象

    · 块注释

    · 不需要标记前缀

    · AST过滤器

    · 过滤器

    o :sass 需要安装sass.js

    o :less 需要安装less.js

    o :markdown 需要安装markdown-jsnode-discount

    o :cdata

    o :coffeescript 需要安装coffee-script

    · Vim语法文件

    · TextMate包

    · Screencasts

    其它语言实现

    · php

    · Scala

    · Ruby

    安装

    通过npm:

    npm install jade

    浏览器支持

    可以通过下面命令将jade编译为客户端浏览器兼容的文件:

    $ make jade.js

    或者,如果你已经通过npm安装了uglifyjs(npminstalluglify-js),可以通过下面的命令同时创建两个文件:

    $ make jade.min.js

    公开API

    var jade = require('jade');

     

    // 渲染字符串

    jade.render('.csser.com 字符串', { options: 'here' });

     

    // 渲染文件

    jade.renderFile('path/to/csser.com.jade', { options: 'here' }, function(err, html){

       // 这里的options是可选的

       // 回调函数可以作为第二个参数

    });

     

    // 编译一个函数

    var fn = jade.compile('string of jade', options);

    fn.call(scope, locals);

    Options

    · scope 执行作用域(this)

    · locals 本地变量对象

    · filename 处理异常及缓存时使用

    · cache 通过文件名将Javascript缓存在内存中

    · debug 输出生成的标记和函数体

    · compiler 替换jade默认编译引擎

    语法

    行尾

    在解析前会将 CRLF 和 CR 转换为 LF.

    标记

    标记是一行的第一个单词:

    html

    会被转换为 <html></html>

    标记也可以有id:

    div#container

    这将被渲染成<div id=”container”></div>

    如何处理类?

    div.user-details

    渲染为: <div class=”user-details”></div>

    多个class?并且还有id?

    div#foo.bar.baz

    渲染为:<div id=”foo” class=”bar baz”></div>

    总写div确实很烦人,可以省略之:

    #foo

    .bar

    输出: <div id=”foo”></div><div class=”bar”></div>

    标记文本

    只需要将文本内容放在标记后面:

    p wahoo!

    渲染为 <p>wahoo!</p>.

    酷,但是如何处理大段文本呢?

    p

      | foo bar baz

      | rawr rawr

      | super cool

      | go jade go

    渲染为 <p>foo bar baz rawr…..</p>

    内插法?是的,这两种类型的文本都可以使用内插法,如果我们传入{ locals: { name: ‘一回’, email: ‘xianlihua[at]gmail.com’ }},可以这样做:

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

    输出:<div id=”user”>一回 <xianlihua[at]gmail.com></div>

    出于某种原因需要输出#{}?转义之:

    p #{CSSer, 关注Javascript技术}

    这样就得到了:<p>#{CSSer, 关注Javascript技术}</p>

    也可以使用反转义变量!{html},下面的代码将输出script标记:

    - var html = "<script></script>"

    | !{html}

    包含文本的嵌套标记也可以使用文本块:

    label

      | Username:

      input(name='user[name]')

    或者直接使用标记文本:

    label Username:

      input(name='user[name]')

    只接受纯文本的标记,如script,style,以及textarea不需要开头的|字符,例如:

      html

        head

          title CSSer, 关注Web前端技术

          script

            if (foo) {

              bar();

            } else {

              baz();

            }

    再次作为替代方案,我们可以使用点号’.'来表示一个文本块,例如:

      p.

        foo asdf

        asdf

         asdfasdfaf

         asdf

        asd.

    输出:

        <p>foo asdf

        asdf

          asdfasdfaf

          asdf

        asd

        .

        </p>

    如果点号’.'与标记之间有空格,Jade解析其会忽略它,将其作为文本处理:

    p .

    输出:

    <p>.</p>

    注释

    单行注释当前看起来与Javascript一致,即“//”,单行注释的内容必须放在同一行上:

    // 一些段落

    p foo

    p bar

    将会输出:

    <!-- 一些段落 -->

    <p>foo</p>

    <p>bar</p>

    Jade也支持非缓冲注释,只需增加一个横杠:

    //- 该行注释将不会被输出到解析后的页面中

    p foo

    p bar

    输出:

    <p>foo</p>

    <p>bar</p>

    块注释

    块注释会依据缩进进行处理:

      body

        //

          #content

            h1 CSSer,关注Web前端技术

    输出:

    <body>

      <!--

      <div id="content">

        <h1>CSSer,关注Web前端技术</h1>

      </div>

      -->

    </body>

    Jade也支持条件注释,例如:

    body

      /if IE

        a(href='http://www.mozilla.com/en-US/firefox/') Get Firefox

    输出:

    <body>

      <!--[if IE]>

        <a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a>

      <![endif]-->

    </body>

    嵌套

    Jade支持通过嵌套来以自然的方式定义标记:

    ul

      li.first

        a(href='#') foo

      li

        a(href='#') bar

      li.last

        a(href='#') baz

    块扩展

    块扩展允许创建单行的简洁嵌套标记,下面的示例与上例输出相同:

      ul

        li.first: a(href='#') foo

        li: a(href='#') bar

        li.last: a(href='#') baz

    特性

    目前Jade支持’(‘和’)'的特性定界符。

    a(href='/login', title='View login page') Login

    另外我们也可以使用冒号(:)来作为分割符:

    a(href: '/login', title: '注册成为CSSer.com会员') Login

    Boolean特性也被支持:

    input(type="checkbox", checked)

    值为变量的Boolean特性只有在值为true时输出:

    input(type="checkbox", checked: someValue)

    分拆在多行也能正常解析:

    input(type='checkbox',

      name='agreement',

      checked)

    文档类型

    利用!!!来增加页面的文档类型:

    !!!

    将会输出过渡型文档类型,然而:

    !!! 5

    将会输出HTML5的文档类型,下面是默认定义的文档类型,这也可以很容易的被扩展:

    var doctypes = exports.doctypes = {

       '5': '<!DOCTYPE html>',

       'xml': '<?xml version="1.0" encoding="utf-8" ?>',

       'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',

       'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',

       'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',

       'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',

       '1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',

       'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',

       'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'

    };

    要修改默认值只需改变:

    jade.doctypes.default = 'whatever you want';

    过滤器

    过滤器以冒号(:)作为前缀,如 :markdown 将会对文本进行函数处理,(一回注:类似Smarty的变量调节器),本页开始处列出了目前Jade支持的过滤器。

    body

      :markdown

        Woah! jade _and_ markdown, very **cool**

        we can even link to [CSSer](http://www.csser.com)

    渲染后:

       <body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://www.csser.com">CSSer</a></p></body>

    过滤器也可以处理解析树,通常过滤器可以正常处理文本块,但是通过传入规则的块过滤器可以做任何它能做的。

    body

      conditionals:

        if role == 'admin'

          p You are amazing

        else

          p Not so amazing

    代码

    Jade目前支持三种类型的可执行代码,第一种以-为前缀,不会被缓冲:

    - var foo = 'bar';

    这可被用于条件或循环:

    - for (var key in obj)

      p= obj[key]

    由于Jade的缓冲技术,下面的代码是有效的:

    - if (foo)

      ul

        li yay

        li foo

        li worked

    - else

      p oh no! you are not in csser.com

    甚至详细的迭代循环:

    - if (items.length)

      ul

        - items.forEach(function(item){

          li= item

        - })

    任何你希望的都可以实现!

    接下来我们转义了缓冲代码,用于缓冲返回值,以等号(=)作为前缀:

    - var foo = 'bar'

    = foo

    h1= foo

    输出: bar<h1>bar</h1>. 被’='缓冲的代码会默认经过转义以增强安全性,要输出为转义的值需要使用 !=:

    p!= aVarContainingMoreHTML

    一个允许使用”vanilla”Javascript的例外,是 – each 标记,其表现形式为:

    - each VAL[, KEY] in OBJ

    实现循环数组的例子:

    - var items = ["one", "two", "three"]

    - each item in items

      li= item

    输出:

    <li>one</li>

    <li>two</li>

    <li>three</li>

    循环对象的键和值:

    - var obj = { foo: 'bar' }

    - each val, key in obj

      li #{key}: #{val}

    这会输出 <li>foo: bar</li>

    也可以进行嵌套循环:

    - each user in users

      - each role in user.roles

        li= role

    当一个属性为undefined,Jade会输出空串,例如:

    textarea= user.signature

    近期的Jade版本会输出空字符串而不是undefined:

    <textarea></textarea>

    命令行工具:bin/jade

    输出html到标准输出(stdout):

    jade examples/*.jade --pipe

    生成 examples/*.html :

    jade examples/*.jade

    传入参数:

    jade examples/layout.jade --options '{ locals: { title: "CSSer" }}'

    [完]

  • 相关阅读:
    桌面图标背景透明
    如何做好一个中小型企业计算机网络管理员
    打开IE8总是提示欢迎使用?怎样使它不提示?
    js 操作select和option,添加select列
    bios 被加密,怎么进入bios
    Foxmail自动收取新邮件
    代码片段
    提高生活幸福感的13个方法
    水晶报表的真实体验
    游标替代
  • 原文地址:https://www.cnblogs.com/dongcheck/p/4195317.html
Copyright © 2011-2022 走看看