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

資訊專欄INFORMATION COLUMN

模板引擎Jade

shixinzhang / 2720人閱讀

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

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

安裝jade

利用npm全局安裝：

$ npm install jade --global

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

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

先來(lái)進(jìn)行一個(gè)簡(jiǎn)單的小demo，感覺(jué)下jade：
新建一個(gè)文件命名為：demo.jade：

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

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

這個(gè)代碼是被壓縮過(guò)的，沒(méi)有任何可讀性，我們改下命令就可以得出具有可讀性的代碼，jade demo.jade -P：

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

基本語(yǔ)法

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

div
  h1 Hello
  br
div 
  h1 World

編譯成html就是


  
Hello






  
World

設(shè)定class與id:

div.tite#title代表的就是


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

設(shè)定其他屬性：

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

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

一行文本太長(zhǎng)怎么破：

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

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

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

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

注釋：

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

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

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

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

變量聲明：

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

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

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

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

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

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

但是=號(hào)與#{}也有不同，那就是在我們所取得變量是沒(méi)有定義的，用#{}取值取出來(lái)的是undefined，而=取出來(lái)的是空字符串：

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

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

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

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

流程控制語(yǔ)法

js原生流程控制語(yǔ)句

jade支持js原生的流程控制語(yǔ)句，如遍歷對(duì)象屬性時(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提供了一些語(yǔ)法糖
each來(lái)遍歷對(duì)象或者數(shù)組
unless進(jìn)行條件判斷，unless(x) = if (!x)
case when來(lái)實(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定義公共代碼（類(lèi)似于函數(shù)）

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

// 基本語(yǔ)法：
mixin test
  p zp1996
+test
// 既然說(shuō)了像函數(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

// 我們想要傳遞的是多個(gè)屬性
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的模板繼承語(yǔ)法基本類(lèi)似，通過(guò)extend來(lái)進(jìn)行繼承，下面來(lái)看個(gè)例子：

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

include

通過(guò)include我們可以將頁(yè)面抽象出一個(gè)個(gè)小塊，可以說(shuō)形成一個(gè)組件化的方式，比如頭部，尾部，搜索框等，這樣利于我們的維護(hù)我們的頁(yè)面。
對(duì)于include來(lái)說(shuō)我既可以引入.jade，也可以引入.html文件。

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

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

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

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

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

相關(guān)文章

  • 模板引擎Jade

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

    omgdog 評(píng)論0 收藏0

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

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

    gxyz 評(píng)論0 收藏0

  • 10個(gè)最好的 JavaScript 模板引擎

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

    Stardustsky 評(píng)論0 收藏0

  • express web的一款mvc框架

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

    _ang 評(píng)論0 收藏0

  • 前端常用插件、工具類(lèi)庫(kù)匯總

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

    GitCafe 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<