国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

模板引擎Jade

omgdog / 1340人閱讀

摘要：前言的模板引擎有多種，如，，。一開始首先學習了，但是發現其有一個很大的弊端，那就是它不能繼承由于之前用的全部是的模板，所以用起來非常別扭，只能進行，而不能，于是轉為，將做了一層抽象的模板引擎。對于來說我既可以引入，也可以引入文件。

前言：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.git
Hello 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代表的就是


在jade中還可以將div.tite#title簡寫為.title#title，也會被編譯成相應的div

設定其他屬性：

除了class和id，其余屬性都要在括號內設定，如：

meta(charset="utf-8")
a(, 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

注意：p的每一行內容，在.后開始，利用.我們還可以寫內置的樣式與腳本：

style.
      body{
         color: gray;
      }
script.
       var x = "123";

注釋：

jade的注釋有兩種：
一： 可以被編譯到我們的html中：

// div#title 123
html中的顯示為：

二：非緩存注釋，不能被編譯到html中：
只需要在//后加一個-就可以//- #title 不會被編譯到html中

jade同時允許我們假如對ie瀏覽器的條件判斷注釋，格式與html中一樣：

變量聲明：

在jade中可以進行變量的聲明，- var test = "zp1996"，這樣我們就聲明了一個test變量，要是想用這個變量的話也很簡單，利用#{test}就可以，并且這個{}內支持js語法，如：#{test.toUpperCase()}，得到的就是ZP1996，作為模板語言來說，當然可以接受外界傳來的數據，但是需要注意的是在jade聲明的變量優先級高于外面傳入的，我們來嘗試下外面傳入數據的方式，首先我們將demo.jade的title寫成#{title}，然后我們在終端中輸入下面命令：

$ jade index.jade -P -w --obj "{"title": "Hello World"}"

打開瀏覽器刷新下，可以看到我們的網頁的title值為Hello World。我們也可以利用一個json文件來進行數據的傳遞，新建一個data.json：

// json文件內容
{
    "title": "Hello World"
}
// 終端輸入命令
$ jade index.jade -P -w -O data.json

刷新瀏覽器，可以看到我們的title值仍為Hello World 。
jade在拿變量的時候其實有兩種方式：
一：#{}取值時對變量進行轉義，利用=號同樣可以。

- var data = ""
div #{data}
div= data  //- 注意,此時=要緊挨著div且與data之間有一空格
// 編譯成html得：

但是=號與#{}也有不同，那就是在我們所取得變量是沒有定義的，用#{}取值取出來的是undefined，而=取出來的是空字符串：

input(type="text", value="#{zp}")
input(type="text", value=zp)
// html

二： !{}取值時不對變量進行轉義，利用!=同樣可以

- var data = ""
div !{data}
div!= data  //- 注意,此時=要緊挨著div且與data之間有一空格
// 編譯成html得：

當我們需要在網頁上輸出#{}和!{}時，采用#{}和!{}就好。

流程控制語法

js原生流程控制語句

jade支持js原生的流程控制語句，如遍歷對象屬性時的for...in，遍歷數組時的for，進行判斷時的if...else：

- 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

    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 



    
  
  • 0
    • 
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 



the length of arr is more than 3

each

jade提供了一些語法糖
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

x: 1


y: 2


z: 3


1


2


3


zp is undefined


n is four
重用jade代碼塊

mixin定義公共代碼（類似于函數）

在某些情況下，代碼可能經常會重用，就像函數一樣，mixin就是為了解決這一問題：

// 基本語法：
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")
// 編譯后：

attr

// 我們想要傳遞的是多個屬性
mixin attrs(name)
  p&attributes(attributes) #{name}
+attrs("attrs")(class="demo", id="demo")
// 參數不確定時和和ES2015中箭頭函數的處理方式相同，就是...
mixin manyarg(name, ...items)
  ul(class="#{name}")
    each item in items
      li #{item}

模板繼承

block demo
  p this is a demo about how to use block
block demo
// 編譯后：

this is a demo about how to use block


this is a demo about how to use block

模板的繼承和thinkphp的模板繼承語法基本類似，通過extend來進行繼承，下面來看個例子：

// 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

通過include我們可以將頁面抽象出一個個小塊，可以說形成一個組件化的方式，比如頭部，尾部，搜索框等，這樣利于我們的維護我們的頁面。
對于include來說我既可以引入.jade，也可以引入.html文件。

// 我們的一個頁面的一個骨架
doctype html
html
  head
    meta(charset="utf-8")
    title jade
  body
    include header
    block content
    include footer
jade與后臺交互

首先我們需要了解的就是jade的API，詳情請見：http://jade-lang.com/api/
經常用的的API有就是jade.renderFile(filename, options)，filename是jade文件的一個路徑，options是一些配置，如我們的jade文件內變量名的值，pretty是否進行格式化等；這個函數的返回值為html字符串

與后臺交互的一個demo：
https://github.com/zp1996/Hel...
clone下來直接node app.js就行不用npm install
本文參考：
慕課網—帶你學習Jade引擎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90851.html

相關文章

  • 模板引擎Jade

    摘要：前言的模板引擎有多種，如，，。一開始首先學習了，但是發現其有一個很大的弊端，那就是它不能繼承由于之前用的全部是的模板，所以用起來非常別扭，只能進行，而不能，于是轉為，將做了一層抽象的模板引擎。對于來說我既可以引入，也可以引入文件。 前言：node.js的模板引擎有多種，如：ejs，Handlebars，jade。一開始首先學習了ejs，但是發現其有一個很大的弊端，那就是它不能繼承（由于...

    shixinzhang 評論0 收藏0

  • Express 文檔（使用模板引擎）

    摘要：一些與一起使用的流行模板引擎是和，應用程序生成器使用作為其默認值，但它也支持其他幾個。有關可與一起使用的模板引擎列表，請參閱模板引擎，另請參閱比較模板引擎等。，使用的模板引擎，例如，要使用模板引擎。 使用模板引擎 模板引擎使你可以在應用程序中使用靜態模板文件，在運行時，模板引擎用實際值替換模板文件中的變量，并將模板轉換為發送到客戶端的HTML文件，這種方法可以更輕松地設計HTML頁面。...

    gxyz 評論0 收藏0

  • 10個最好的 JavaScript 模板引擎

    摘要：是一個有著完善和驚艷特性的模板引擎。是一個強大的客戶端模板引擎，用來將數據綁定到頁面的結構中。一套同時可用于瀏覽器或的異步模板引擎。是一套富功能的模板引擎。本文鏈接個最好的模板引擎來源編譯含內容擴充責任沙渺 JavaScript隨著各種神奇的實用功能庫日漸豐富，而越來越受到Web開發者與設計師的追捧，例如：jQuery, MooTools, Prototype等。 使用JavaScr...

    Stardustsky 評論0 收藏0

  • express web的一款mvc框架

    摘要：相關的網站開發有這么常用的四款數據層視圖層控制層框架，我們今天說一下阿里的框架是一個自身功能極簡，完全是由路由和中間件構成一個的開發框架安裝創建一個目錄通過命令為你的應用創建一個文件。修改請求和響應對象。注意只對使用或加載的中間件有效。 express express相關的網站*http://expressjs.com/*http://www.expressjs.com.cn/*htt...

    _ang 評論0 收藏0

  • 前端常用插件、工具類庫匯總

    摘要：頁面調試騰訊開發維護的代碼調試發布，錯誤監控上報，用戶問題定位。同樣是由騰訊開發維護的代碼調試工具，是針對移動端的調試工具。前端業務代碼工具庫。動畫庫動畫庫，也是目前通用的動畫庫。 本人微信公眾號：前端修煉之路，歡迎關注 本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。 另外，感謝白小明，文中很多的工具來源于此。 彈出框 layer：http://layer....

    GitCafe 評論0 收藏0

發表評論

0條評論

omgdog

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<