jade安裝及基本語法使用

時間  2019-11-18
標籤 jade 安裝 基本 語法 使用 欄目 Node.js 简体版
原文   原文鏈接

 

1、cmd安裝jade：

cnpm install -g jade
//cnom install jade -g與上面使用效果一致。

2、jade命令行中使用：

使用cmd：
jade index.jade  //編譯成--無格式html文件
jade -P index.jade //編譯成--有格式的html文件
jade -P -w inde.jade //編譯成--有格式且時時監聽的html文件

3、jade基本語法格式：

一、jade語法格式
編譯前：javascript

doctype html
//【必須嚴格遵循2個字符縮進】
html
    head
        meta(charset="utf-8")
        title jade
    body
        //style script使用方法
        style.
            h1{color: red;}
        script.
            var a = function(){console.log(1)};
        // # . () ===> id class 屬性
        h1#h1.h1(class="h2",title="標題",value="標題",data-src="laal",style="color: red;") 標題
        //「//」註釋會出如今編譯後的文檔中 「//-」不會出如今編譯後的文檔中
        //第一種多行文本及標籤
        p.
            1.aaaaaaa
            2.bbbbbb
            <span>aaa</span>
            a aaa
        //第二種多行文本及標籤 「|」
        p
            | 1.aaaa
            | 2.bbbbb
            a(href="#") llalal

編譯後：css

<!DOCTYPE html>
<!--【必須嚴格遵循2個字符縮進】-->
<html>
  <head>
    <meta charset="utf-8">
    <title>jade</title>
  </head>
  <body>
    <!--style script使用方法-->
    <style>h1{color: red;}</style>
    <script>var a = function(){console.log(1)};</script>
    <!-- # . () ===> id class 屬性-->
    <h1 id="h1" title="標題" value="標題" data-src="laal" style="color: red;" class="h1 h2">標題</h1>
    <!--「//」註釋會出如今編譯後的文檔中 「//-」不會出如今編譯後的文檔中-->
    <!--第一種多行文本及標籤-->
    <p>
      1.aaaaaaa
      2.bbbbbb
      <span>aaa</span>
      a aaa
    </p>
    <!--第二種多行文本及標籤 「|」-->
    <p>
      1.aaaa
      2.bbbbb<a href="#">llalal</a>
    </p>
  </body>
</html>

二、ie註釋的使用：
編譯前：html

doctype html
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if IE]><!--<html><!--<![endif]-->
//將「head」標籤頂格
meta(charset="utf-8")
head
    title jade
body
</html>

編譯後：java

<!DOCTYPE html><!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if IE]><!--<html><!--<![endif]-->
<!--將「head」標籤頂格-->
<meta charset="utf-8">
<head>
  <title>jade</title>
</head>
<body></body></html>

4、變量的定義與使用

Ⅰ、變量的定義：
1.jade文件中定義：node

- var course = "balabala"

2.命令行定義：npm

jade index.jade -P -w –obj ‘{「course」: 「balabala」}’json

3.外部json文件定義：api

> {
    "course": "balabala"
>}

需命令行中使用：jade index.jade -P -w -O data.jsonmarkdown

Ⅱ、變量的使用less

1.使用變量1：

（轉義變量字符）
p #{sourse} //能夠調用到3種方法定義的sourse變量
（不轉義變量字符）
p !{datahtml}
優先級：內部>json; 內部>命令行定義

2.變量使用2：

（轉義變量字符）
p= datahtml
（不轉義變量字符）
p!= datahtml

3.避免值出現undefined：

input(value=aa) //aa爲變量的條用

4.使用變量帶方法：

div #{sourse.toUpperCase()}

5、流程語句

jade代碼：

doctype html
//【必須嚴格遵循2個字符縮進】
html
    head
        meta(charset="utf-8")
        title jade
    body
        - var data = {course: "jade",level: "node"}
        //1、for..in循環
        - for(var k in data )
            p= data[k]
        //2、each循環obj
        each value,key in data
            p #{value} #{key}

        - var sections = []
        dl
            //3、嵌套循環
            each section in sections.length > 0? sections : [{id: 0,items: ["none"]}]
                dt= section.id
                each item in section.items
                    dd= item
        //4、while循環
        ul
            - var i = 0
            while i < 4
                li= i++
        //5、if else循環
        - var isTrue = true
        - var arr = ["jade","node"]
        if arr.length > 1
            p= arr.join(" ")
        else
            p= arr[0]

        //6、unless  若是是false就成立
        unless !isTrue
            p= isTrue

        //7、case  相似switch
        - var name = "aa"
        case name
            when "js"
                p js
            when "jade": p jade
            default: p= name

編譯成html：

<!DOCTYPE html>
<!--【必須嚴格遵循2個字符縮進】-->
<html>
  <head>
    <meta charset="utf-8">
    <title>jade</title>
  </head>
  <body>
    <!--1、for..in循環-->
    <p>jade</p>
    <p>node</p>
    <!--2、each循環obj-->
    <p>jade course</p>
    <p>node level</p>
    <dl>
      <!--3、嵌套循環-->
      <dt>0</dt>
      <dd>none</dd>
    </dl>
    <!--4、while循環-->
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <!--5、if else循環-->
    <p>jade node</p>
    <!--6、unless 若是是false就成立-->
    <p>true</p>
    <!--7、case 相似switch-->
    <p>aa</p>
  </body>
</html>

6、mixin的使用

jade文件：

doctype html
html
    meta(charset="utf-8")
    head
        title jade
    body
        //1、mixin 定義模塊結構
        // 1.定義模塊
        //- *不帶參數
        mixin lesson
            p jade mixins
        //- *帶參數
        mixin study(name,courses)
            p #{name} study
            ul.courses
                each course incourses
                    li= course
        //- *嵌套定義
        mixin group(student)
            h4= student.name
            +study(student.name,student.courses)
        // 2.mixin的調用
        // *不帶參數調用
        +lesson
        // *帶參數調用
        +study("David",["jade",nodejs])
        // *嵌套的調用
        +group({name: "David",courses: ["jade","js"]})
        // 3.特性一（屬性傳遞）
        //- 代碼塊(block爲關鍵字：調用後面是否有代碼塊)
        mixin team(slogon)
            h4= slogon
            if block
                block
            else
                p no block
        +team("slogon")
            p have team
        // *傳遞屬性一 (attributes接收屬性列表)
        mixin attr(name)
            p(class=attributes.class) #{name}
        +attr("attr")(title="title",class="class")
        // *傳遞屬性二 (會遍歷屬性列表並列出來)
        mixin attrs(name)
            p&attributes(attributes)
        +attrs("David")(class="class",id="id",title="title")
        // 4.特性二 （多參數傳遞）
        mixin magic(name,...items)
            ul(class="#{name}")
                each item in items
                    li= item
        +magic("David","jade","node","...")

編譯成html：

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <head>
    <title>jade</title>
  </head>
  <body>
    <!--1、mixin 定義模塊結構-->
    <!-- 1.定義模塊-->
    <!-- 2.mixin的調用-->
    <!-- *不帶參數調用-->
        <p>jade mixin</p>
    <!-- *帶參數調用-->
        <p>David study</p>
        <ul class="courses">
          <li>jade</li>
          <li></li>
        </ul>
    <!-- *嵌套的調用-->
        <h4>David</h4>
            <p>David study</p>
            <ul class="courses">
              <li>jade</li>
              <li>js</li>
            </ul>
    <!-- 3.特性一（屬性傳遞）-->
        <h4>slogon</h4>
        <p>have team</p>
    <!-- *傳遞屬性一 (attributes接收屬性列表)-->
        <p class="class">attr</p>
    <!-- *傳遞屬性二 (會遍歷屬性列表並列出來)-->
        <p id="id" title="title" class="class"></p>
    <!-- 4.特性二 （多參數傳遞）-->
        <ul class="David">
          <li>jade</li>
          <li>node</li>
          <li>...</li>
        </ul>
  </body>
</html>

7、繼承與包含

1.繼承：解決的是子文件和父文件間代碼複用問題
*index.jade文件內容：

//- index繼承layout文件，至關於引入了layout文件
extends layout


// "desc"在layout文件中也有定義，優先使繼承層級低的(index文件中的layout)。
//若是在layout中和「content」中沒有調用desc，那麼desc是不會被編譯
//定義desc
block desc
    p desc from index0
block content
    // *調用
    block desc

*layout.jade文件：

doctype html
html
    head
        title jade
    body
        block desc
            p desc from layout
        block content

*輸出：

<!DOCTYPE html>
<html>
  <head>
    <title>jade</title>
  </head>
  <body>
    <p>desc from index0</p>
    <!-- *調用-->
    <p>desc from index0</p>
  </body>
</html>

*解釋：
**index繼承了layout文件，最後結果輸出2個desc模塊：
    *第一個輸出：layout文件中的block desc調用，可是爲何輸出的不是「desc from larout」，由於優先使用繼承層級底的，因此使用的是 index文件中定義的 block desc。
    第二次輸出：layout文件中調用 content模塊，content模塊調用了desc模塊，根據繼承原則，輸出layout中的block desc。*

2.包含：區域塊和文件之間的包含問題
*區塊和區塊
layout.jade文件中的代碼：

doctype html
html
    head
        //*使用包含，將head.jade文件包含進來(html)
        include head
        //*style.jade包含進來(css)
        include style
            style.
                div{color: red;}
    body
        //*引入原生的html
        include div.html
        p laall

head.jade文件中的代碼：

meta(charset="urf-8") title jade

*styl.jade文件中的代碼：

style.
    p{ color: #07f; }

*div.html文件中的代碼：

<p>aaqaaa</p>

編譯後的index.html中的代碼：

<!DOCTYPE html>
<html>
  <head>
    <!--使用包含，將head.jade文件包含進來(html)-->
    <meta charset="urf-8">
    <title>jade</title>
    <!--style.jade包含進來(css)-->
    <style> p{ color: #07f; } </style>
    <style>div{color: red;}</style>
  </head>
  <body>
    <!--引入原生的html--><p>aaqaaa</p>
    <p>laall</p>
  </body>
</html>

8、下載jade到本地、API的使用

1.下載jade到本地cmd命令：

cnpm install jade coffee-script less markdown –save
這裏寫圖片描述

2.在node環境下API的使用(必須先下載jade到本地)：

**API：

  • jade.compile(「」,{})
  • jade.render(「」,{})
  • jade.renderFile(「FileUrl」,{},pertty: true)

*新建server.js文件：

var http = require("http");
var jade = require("jade");

http.createServer(function(req,res){
    res.writeHead(200,{
        "Content-Type": "text/html"
    })

    //1.jade.compile
    var fn = jade.compile("div #{course} #{a}",{})
    var html = fn({course: "jade in node",a: "aaaa"})

    // 2.jade.render
    // var html = jade.render("div #{course} #{a}",{course: "jade in node",a: "111"})

    //3.jade.renderFile
    // var html = jade.renderFile("index.jade",{course: "jade in renderFile",pretty: true})

    res.end(html);
}).listen(1337,"127.0.0.1")

console.log("server running")

jade.compile、jade.render、jade.renderFile運行以下：
這裏寫圖片描述
jade.render
這裏寫圖片描述

9、filters過濾器的使用

這裏寫圖片描述

10、runtime.js使用

*新建文件：runtime.jade

div
    h3 jade runtiem call
    p this is from jade pre-compile #{isTrue}

使用命令行編譯成js：

jade –client –no-debug runtime.jade
獲得runtime.js文件：

function template(locals) {
    var buf = [];
    var jade_mixins = {};
    var jade_interp;
    ;var locals_for_with = (locals || {});(function (isTrue) {
    buf.push("<div><h3>jade runtiem call</h3><p>this is from jade pre-compile " + (jade.escape((jade_interp = isTrue) == null ? '' : jade_interp)) + "</p></div>");}.call(this,"isTrue" in locals_for_with?locals_for_with.isTrue:typeof isTrue!=="undefined"?isTrue:undefined));;return buf.join("");
}

使用：
1.引入runtime的執行環境，引入runtime.js文件。
2.調用template({isTrue:true})函數，能夠獲得：

div
h3 jade runtiem call
p this is from jade pre-compile true
的html文件。

11、將html編譯成jade模板：

命令行html2jade模塊安裝：

cnpm install html2jade -g

cdm使用：

html2jade http://www.xxxx.com > xxx.jade

模塊中引用：
這裏寫圖片描述

12、jade優缺點

缺點： 1.很差調試。 2.性能不是很出色。 3.可移植性差。 選擇優勢： 1.初始階段。 2.穩定階段

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程