秋前端開(kāi)發(fā)課件-jse2e-5視圖引擎

5-Node.js視圖引擎2015

Summer,

xi'an本章內(nèi)容視圖引擎簡(jiǎn)介客戶端視圖引擎KendoUI、Handlebars.js、AngularJS服務(wù)器端視圖引擎Jade視圖引擎視圖引擎視圖引擎（模板引擎）是創(chuàng)建視圖的框架/庫(kù)使用編程語(yǔ)言Web視圖引擎是HTML和JavaScript的混合給定的模板/視圖，JavaScript創(chuàng)建了有效的HTML代碼JavaScript視圖引擎有大量的JavaScript視圖引擎，能分離到客戶端和服務(wù)器端客戶端：KendoUI,Handlebars.js,jQuery,AngularJS,

等服務(wù)器端：Jade,

HAML,

EJS,

Vash,

等為什么使用視圖引擎？提高開(kāi)發(fā)者的效率，并簡(jiǎn)化HTML代碼編寫(xiě)自動(dòng)創(chuàng)建DOM元素，幾乎不用手動(dòng)的DOM客戶端視圖引擎KendoUI,

AngularJS,

Handlebars.js客戶端視圖引擎客戶端視圖引擎（模板）用于解析數(shù)據(jù)數(shù)據(jù)從一些地方獲取如，用AJAX數(shù)據(jù)也可以是JSON、XML或純文本服務(wù)器端視圖引擎解析服務(wù)器上的數(shù)據(jù)客戶端（瀏覽器）接收到準(zhǔn)備使用的HTML模板用Handlebars.jsHandlebars.js是創(chuàng)建客戶端模板的庫(kù)Handlebars支持：?jiǎn)未沃到壎ǖ絁avaScript對(duì)象元素集合的迭代條件模板Handlebars：示例創(chuàng)建用所有mustache類型的列表Handlebars：示例創(chuàng)建用所有mustache類型的列表<h1>{{title}}</h1><ul

class="mustaches-list">{{#types}}<li><input

name="mustaches[]"id="mustache-{{.}}"type="radio"value="{{.}}"/><label

for="mustache-{{.}}">{{.}}</label></li>{{/types}}<-模板Handlebars：示例創(chuàng)建用所有mustache類型的列表<h1>{{title}}</h1><ul

class="mustaches-list">{{#types}}<li><input

name="mustaches[]"id="mustache-{{.}}"type="radio"value="{{.}}"/><label

for="mustache-{{.}}">{{.}}</label></li>{{/types}}<-模板JavaScript<-var

model

=

{title:

' o

mustache!',types:

['Hungarian',

'Dali','Imperial',

…]}Handlebars：示例創(chuàng)建用所有mustache類型的列表所有綁定都在{{}}中完成<h1>{{title}}</h1><ul

class="mustaches-list">{{#types}}<li><input

name="mustaches[]"id="mustache-{{.}}"type="radio"value="{{.}}"/><label

for="mustache-{{.}}">{{.}}</label></li>{{/types}}<-模板JavaScript<-var

model

=

{title:

' o

mustache!',types:

['Hungarian',

'Dali','Imperial',

…]}Handlebars.js模板演示KendoUI模板KendoUI模板是KendoUI框架的一部分可在kendo.core.js中找到可單獨(dú)使用KendoUI模板支持：?jiǎn)未沃到壎ǖ絁avaScript對(duì)象元素集合的迭代條件模板KindoUI模板：示例創(chuàng)建技術(shù)表<h1>#:

title

#</h1><table>#

for

(var

i

=

0;

i

<

technologies.length;

i+=1)

{#<tr><td><inputtype='checkbox'

id="technology-#:

i

#"

/></td><td><label

for="technology-#:

i

#">#:

technologies[i].name

#</label></td></table>var

model

=

{title:

'Technologies',technologies:[{name:'ASP.NET',field:'web'

},{name:'Node.js',field:'web'

},{name:'WPF',field:'windows

desktop'

},{name:'Android',field:'mobile'

}]};KendoUI模板

演示AngularJS模板AngularJS模板是AngularJS框架內(nèi)核的一部分實(shí)際上為控制器表達(dá)視圖AngularJS支持：雙向數(shù)據(jù)和事件綁定到JS對(duì)象元素集合的迭代條件模板AngularJS模板：創(chuàng)建圖像幻燈<div

id="wrapper"ng-controller="ImagesController"><divclass="slider"><strong>{{currentImage.title}}</strong><img

ng-src

=

"{{currentImage.src}}"

width=800

/><ul

class="slider-images-list"><ling-repeat="image

in

images"><img

ng-src="{{image.src}}"ng-click="changeCurrent(image)"/></li></ul></div></div>app.controller('ImagesController',

function

($scope)

{$scope.images

=

[{title:

'QA

Academy

2012/2013Graduation',src:

'imgs/9511183282_cbe735bb73_c.jpg'}

…

]$scope.currentImage

=

$scope.images[0];$scope.changeCurrent

=

function(image){$scope.currentImage

=

image;};});AngularJS模板

演示服務(wù)器端視圖引擎服務(wù)器端視圖引擎服務(wù)器端視圖引擎返回準(zhǔn)備使用的HTML到客戶端（瀏覽器）在服務(wù)器上解析數(shù)據(jù)為HTML*Web應(yīng)用，通過(guò)服務(wù)器視圖引擎創(chuàng)建的，并非真正的單頁(yè)應(yīng)用大多數(shù)情況下Jade模板引擎Jade是服務(wù)器視圖引擎生產(chǎn)HTML為結(jié)果可被解析：手動(dòng)的（使用CMD/命令行）自動(dòng)的，使用任務(wù)運(yùn)行器自動(dòng)的，使用Express之類的框架Jade比HTML更有表現(xiàn)力和動(dòng)態(tài)性Jade模板可被解析，基于JS模型或條件使用Jade安裝Jade用Node.js創(chuàng)建index.jade文件運(yùn)行創(chuàng)建index.html以內(nèi)容：$

npm

install

jade

-guleach

val

in[1,

2,

3,

4,

5]li=

'Item

'

+

val$

jade

index.jade<ul><li>Item

1</li><li>Item

2</li><li>Item

3</li><li>Item

4</li><li>Item

5</li></ul>使用Jade

演示Jade特點(diǎn)：Tag省略開(kāi)始和結(jié)束甚至是尖括號(hào)ID和class以CSS選擇器設(shè)置#id和.class<div

id="wrapper"><table

class="special"><tr><th>Header

1</th><th>Header

2</th></tr><tr><td>Data

1</td><td>Data

2</td></tr></table></div>#wrappertable.specialtrth

Header

1th

Header

2trtd

Data1td

Data2解析為Jade特點(diǎn)：AttributeAttribute特性寫(xiě)成'('和')'用逗號(hào)','分隔<div

id="wrapper"><header><h1

id="logo"><ahref="..."><img

src="..."/></a></h1><nav

id="main-nav"><ul><li

class="nav-item"><a

href="...">...</a></li></ul></nav></header></div>#wrapperheaderh1#logoa(href='...')img(src='…')nav#main-nav:

ulli.nav-itema(href='…')解析為Jade特點(diǎn)演示Jade模型Jade能夠創(chuàng)建markup標(biāo)記，使用數(shù)據(jù)模型如，給定數(shù)組項(xiàng)，放置其到表格中#wrapperheaderh1#logoa(href='...')=

titlenav#main-nav:

uleachiteminnavli.nav-itema(href=

item.url)=item.title<div

id="wrapper"><header><h1

id="logo"><a

href="...">Loremipsum</a></h1><nav

id="main-nav"><ul><li

class="nav-item"><a

href="#home">Home</a></li><li

class="nav-item"><a

href="#about">About</a></li></ul></nav></header></div>解析為Jade模型演示Jade中運(yùn)行Jade可以包含條件、循環(huán)等HTML基于模型創(chuàng)建if

conditionh1.success|Fulfilled!elseh1.error|

Not

fullfilledmodel

={condition:true}model

={condition:f