成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

模板引擎Jade

omgdog / 1347人閱讀

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

前言：node.js的模板引擎有多種，如：ejs，Handlebars，jade。一開始首先學(xué)習(xí)了ejs，但是發(fā)現(xiàn)其有一個很大的弊端，那就是它不能繼承（由于之前用的全部是thinkphp的模板，所以用起來非常別扭，只能進(jìn)行include，而不能extend），于是轉(zhuǎn)為jade，將html做了一層抽象的模板引擎。

安裝jade

利用npm全局安裝：

$ npm install jade --global

由于sublime對jade沒有高亮的支持，所以需要我們手動來安裝插件，進(jìn)入到sublime下的Packages，然后執(zhí)行下面命令即可：

git clone https://github.com/davidrios/jade-tmbundle.git
Hello World

先來進(jìn)行一個簡單的小demo，感覺下jade：
新建一個文件命名為：demo.jade：

doctype html
html
    head
        meta(charset="utf-8")
        title Jade
    body
        h1 Hello World

終端中執(zhí)行命令jade demo.jade，會發(fā)現(xiàn)我們的文件夾下多了一個demo.html，這個就編譯出來的html代碼，打開一開會非常的亂：

這個代碼是被壓縮過的，沒有任何可讀性，我們改下命令就可以得出具有可讀性的代碼，jade demo.jade -P：

但是每次更改完文件，我們都要手動來執(zhí)行一次命令這樣實(shí)在是太費(fèi)時(shí)間了，我們可以采用jade demo.jade -P -w，監(jiān)控我們的jade，一有改變自動編譯。

基本語法

jade采取的是縮進(jìn)的方式來確定其關(guān)系，并且無論是需要閉合的標(biāo)簽還是單個標(biāo)簽都是用其標(biāo)簽名即可，如：

div
  h1 Hello
  br
div 
  h1 World

編譯成html就是


  
Hello






  
World

設(shè)定class與id:

div.tite#title代表的就是


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

設(shè)定其他屬性：

除了class和id，其余屬性都要在括號內(nèi)設(shè)定，如：

meta(charset="utf-8")
a(, title="百度")

一行文本太長怎么破：

這種情況是指，我們的文字太多，編譯器會換行，這樣我們的縮進(jìn)就會被破壞，解決這個問題的方法有兩種：

一： 縮進(jìn)后一個|和一個空格：

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的每一行內(nèi)容，在.后開始，利用.我們還可以寫內(nèi)置的樣式與腳本：

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

注釋：

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

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

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

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

變量聲明：

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

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

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

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

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

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

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

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

二： !{}取值時(shí)不對變量進(jìn)行轉(zhuǎn)義，利用!=同樣可以

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

當(dāng)我們需要在網(wǎng)頁上輸出#{}和!{}時(shí)，采用#{}和!{}就好。

流程控制語法

js原生流程控制語句

jade支持js原生的流程控制語句，如遍歷對象屬性時(shí)的for...in，遍歷數(shù)組時(shí)的for，進(jìn)行判斷時(shí)的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來遍歷對象或者數(shù)組
unless進(jìn)行條件判斷，unless(x) = if (!x)
case when來實(shí)現(xiàn)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定義公共代碼（類似于函數(shù)）

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

// 基本語法：
mixin test
  p zp1996
+test
// 既然說了像函數(shù)一樣，那么它肯定也可以帶有參數(shù)
mixin lessonsInfo(name, course)
  p #{name}"s lessons:
    ul
      each val, id in course
        li #{id}: #{val}
+lessonsInfo("zp", {"001": "數(shù)學(xué)分析", "002": "線性代數(shù)"});
// 還可以內(nèi)聯(lián)代碼塊
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
// 同時(shí)還只是傳遞屬性
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")
// 參數(shù)不確定時(shí)和和ES2015中箭頭函數(shù)的處理方式相同，就是...
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來進(jìn)行繼承，下面來看個例子：

// 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
// 編譯后我們會發(fā)現(xiàn)的就是外面的那個item塊被里面的這個item塊給覆蓋掉了

include

通過include我們可以將頁面抽象出一個個小塊，可以說形成一個組件化的方式，比如頭部，尾部，搜索框等，這樣利于我們的維護(hù)我們的頁面。
對于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/
經(jīng)常用的的API有就是jade.renderFile(filename, options)，filename是jade文件的一個路徑，options是一些配置，如我們的jade文件內(nèi)變量名的值，pretty是否進(jìn)行格式化等；這個函數(shù)的返回值為html字符串

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90851.html

相關(guān)文章

  • 模板引擎Jade

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

    shixinzhang 評論0 收藏0

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

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

    gxyz 評論0 收藏0

  • 10個最好的 JavaScript 模板引擎

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

    Stardustsky 評論0 收藏0

  • express web的一款mvc框架

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

    _ang 評論0 收藏0

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

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

    GitCafe 評論0 收藏0

發(fā)表評論

0條評論

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