jade急速入门 (node 模板: node jade template)

访问量: 3522

refer to:  http://jade-lang.com/  

jade入门其实很简单, 有很多在线的html to jade 转换工具, 一看就明白:  http://html2jade.org/

为什么用jade 

可以让我们更专心的写代码.   

下面是一个 例子,  html代码比 jade 的代码量多出来 17%.  或者说, jade 的代码量是 html的 85%. 差距在于 各种 关闭标签 </View> 各种 尖括号 <> , 双引号.  ( id="view1" 与 #view1 的代码量比是:  10: 6 = 5 : 3) 不要小看这个比值啊亲! 直接拉开与对手的差距. 

html: ( 875 字节)

<Alloy>
  <Window>
    <ScrollableView id="scrollableView" showPagingControl="true" width="100%">
      <View id="view1" backgroundColor="#123">
        <ImageView image="/images/index/guide01.png" width="100%" height="100%" left="%0" top="%0"></ImageView>
      </View>
      <View id="view2" backgroundColor="#246">
        <ImageView image="/images/index/guide02.png" width="100%" height="100%" left="%0" top="%0"></ImageView>
      </View>
      <View id="view3" backgroundColor="#48b">
        <ImageView image="/images/index/guide03.png" width="100%" height="100%" left="%0" top="%0"></ImageView>
      </View>
      <View id="view4">
        <ImageView image="/images/index/guide04.png" width="100%" height="100%" left="%0" top="%0"></ImageView>
        <Button id="go" onClick="go_login">立即体验</Button>
      </View>
      </ScrollableView>
  </Window>
</Alloy>

jade:  ( 746 字节) 

Alloy
    Window
        ScrollableView#scrollableView( showPagingControl="true" width="100%")
            View#view1(backgroundColor="#123")
                ImageView(image="/images/index/guide01.png" width="100%" height="100%" left="%0" top="%0")
            View#view2(backgroundColor="#246")
                ImageView(image="/images/index/guide02.png" width="100%" height="100%" left="%0" top="%0")
            View#view3(backgroundColor="#48b")
                ImageView(image="/images/index/guide03.png" width="100%" height="100%" left="%0" top="%0")
            View#view4
                ImageView(image="/images/index/guide04.png" width="100%" height="100%" left="%0" top="%0")
                Button#go(onClick="go_login") 立即体验

这个是教程:  http://jade-lang.com/tutorial/

不过还是记录一下吧:  

安装

$ npm install -g jade

编译:

$ jade login.jade  --pretty    (编译一个文件)

$ jade src/views  --pretty  (编译多个文件)

语法

1. id, class 分别以#, . 来连接. inline属性使用圆括号.   大小写敏感

<Window id="my_id" class="my_class1 my_class2" style='color:red' backgroundColor="white">

可以直接写成:  注意: 圆括号, . # 之前不能有空格. 否则 jade 会认为后面的内容不是attribute 而是content

window#my_id.my_class1.my_class2(style='color:red', backgroundcolor='white')

2.  严格使用缩进来实现上下层级关系. 

<ul>   <li>a</li> <li>b</li> </ul> 写成: 

ul
  li a
  li b

3. 使用 |  或者 .. 来显示多行文字:

<h1>Welcome to Jade</h1>
<p>
Text can be included in a number of
different ways.
</p>
<p>
This way is shortest if you need big
blocks of text spanning multiple
lines.
</p>

写成: 

h1 welcome to jade
p
  | Text can be included in a number of
  | different ways.
p.
  This way is shortest if you need big
  blocks of text spanning multiple
  lines.

订阅/RSS Feed

Subscribe