構(gòu)建多頁的前后分離web項目（alpaca-spa的視圖用法）

本文用來介紹使用alpaca-spa構(gòu)建多頁的前后分離項目的js實現(xiàn)。

十多年的新疆網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整新疆建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“新疆網(wǎng)站設(shè)計”,“新疆網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

Alpaca-spa.js是一款輕量的前端JS框架，提供前端路由功能，前端視圖渲染功能，前端頁面嵌套功能。目的是用來提高web項目的開發(fā)效率，前后端分離開發(fā)，同時使前端代碼結(jié)構(gòu)更加整潔。 Alpaca-spa.js區(qū)別于其他框架的主要特點是輕巧靈活，移動端、PC端都適用，大小項目都適用，而且學(xué)習(xí)成本低，框架沒有復(fù)雜的概念與特性，不依賴開發(fā)環(huán)境（如node.js等），都是最基本的JavaScript語法，也就是說讀者只要有JavaScript語言基礎(chǔ)，就可以很快學(xué)會使用Alpaca-spa.js框架用來構(gòu)建前端頁面。

1簡介

視圖功能是Alpaca-Spa.js的核心功能，主要解決前端JavaScript實現(xiàn)頁面嵌套，頁面數(shù)據(jù)渲染，頁面局部渲染等功能。使用alpaca-spa的View功能，可以輕松構(gòu)建多頁面前后分離結(jié)構(gòu)，尤其是在開發(fā)后臺功能時，非常實用。當(dāng)然，使用alpaca-spa開發(fā)移動端h5網(wǎng)站,單頁面結(jié)構(gòu)網(wǎng)站也是非常不錯的選擇。使用視圖功能需要配置web服務(wù)器，例如apache,nginx，node等。這里使用apache舉例，假設(shè)你的網(wǎng)站根目錄位于：

C:www

當(dāng)然你可以配置apache的虛擬主機，將網(wǎng)站的根目錄放在任意你喜歡的地方。

如果你們項目的前后端在同一個域名下面，也就是網(wǎng)站根目錄前后端用的是同一個，那前端的代碼一般不會直接放在根木目下面，在根目錄下面建立一個叫alpaca-spa或者叫其他名字的目錄（只要不與后端路由沖突既可），例如將前端代碼放到alpaca-spa目錄下面

一個簡單的目錄結(jié)構(gòu)如下：

--C:wwwalpaca-spa 　--main 　　--controller 　　index.js 　　--view 　　--index index.html index-2.html index-3.html 　　--layout --part leftMenu.html layout.html 　　main.js index.html

1.示例中的www是項目的根目錄，應(yīng)該將web服務(wù)器的根目錄設(shè)置為此目錄。 2.alpaca-spa是前端項目的目錄，目錄下面有1個子目錄，1個html文件。 mainmain目錄用來存放當(dāng)前項目中所有main模塊的文件。可以創(chuàng)建多個模塊。 index.htmlindex.html用來做當(dāng)前項目的入口文件 3.index目錄里面有兩個目錄controller，view，一個js文件 controller用來存放main模塊的控制器的js代碼。里面有一個控制器js文件，index.js view用來存放main模塊的視圖部分的js代碼。示例中view目錄里面有一個子目錄index，用于存放index控制器中相關(guān)的模板，本示例中，有三個模板：index.html，index2.html，index3.html 還有一個子目錄layout，用于存放公共的布局信息， layout目錄中的layout.html是默認(rèn)的布局模板文件 layout目錄中的還有一個子目錄part，用來存放頁面中其他公共區(qū)域，例如菜單等 main.jsmain.js是main模塊的模塊級別的js代碼。推薦在這個文件里面做模塊的定義，例如：Alpaca.MainModule={};

了解完上面的目錄結(jié)構(gòu)之后，我們來學(xué)習(xí)使用Alpaca.View()方法，參看下面的示例。

alpaca-spa/index.html文件中的內(nèi)容:

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>alpaca-spa.2.1</title>  <linktype="text/css"href="common/css/style.css">  <scripttype=\'text/javascript\'src=\'http://spa.tkc8.com/common/js/jquery-2.1.4.min.js\'></script> <scripttype="text/javascript"src="http://spa.tkc8.com/common/js/alpaca-spa-2.1.js"></script>  <scripttype="text/javascript"src="main/main.js"></script>  <scripttype="text/javascript"src="main/controller/index.js"></script>  <script> $(function(){ /*配置baseUrl。 *由于alpaca請求視圖模版是從根目錄進行尋址， *當(dāng)前項目不在根目錄，在根目錄的下一級目錄中 **/ Alpaca.Config.baseUrl="/alpaca-spa/"; /*啟動alpaca，指定默認(rèn)路由#/main/index/index*/ Alpaca.run("#/main/index/index"); }); </script> </head> <body> </body> </html>

alpaca-spa/main/main.js文件中的內(nèi)容:

/*1定義Index模塊*/ Alpaca.MainModule={};

alpaca-spa/main/controller/index.js文件中的內(nèi)容:

/*1定義Main模塊中的Index控制器*/ Alpaca.MainModule.IndexController={ //index動作，創(chuàng)建一個視圖index indexAction:function(){ //視圖默認(rèn)渲染到#content位置，可以通過參數(shù)中傳遞to字段改變渲染位置 //視圖模板默認(rèn)位于index/view/index/index.html,可以通過參數(shù)中傳遞template字段改變模塊路徑 //即：默認(rèn)模板位置為：[模塊名]/view/[控制器名]/[動作名].html varview=newAlpaca.View({data:{desc:\'我是一條數(shù)據(jù)，在controller中傳遞到view視圖模版里面！\'}}); //layout布局視圖 varlayout=newAlpaca.Layout(); //part部件視圖，默認(rèn)路由位于view/layout/part中，文件名默認(rèn)與name屬性相同 //part的默認(rèn)渲染位置與其name屬性相同，當(dāng)然也可以通過to屬性指定 varpart=newAlpaca.Part({name:\'leftMenu\'}); //將part添加到layout中，part的默認(rèn)渲染位置與其name屬性相同，也可以通過to屬性指定 layout.addChild(part); //設(shè)置視圖的layout view.setLayout(layout); //在view中，向layout中傳遞數(shù)據(jù) view.setLayoutData({\'layoutData\':666}); //在view中，向part中傳遞數(shù)據(jù) view.setPartData({leftMenu:{\'partData\':888}}); returnview; }, //index2動作，創(chuàng)建視圖index2 index2Action:function(){ varview=newAlpaca.View(); varlayout=newAlpaca.Layout(); varpart=newAlpaca.Part({name:\'leftMenu\'}); layout.addChild(part); view.setLayout(layout); view.setLayoutData({\'layoutData\':\'666-2\'}); view.setPartData({leftMenu:{\'partData\':\'888-2\'}}); returnview; }, //index3動作，創(chuàng)建視圖index3 index3Action:function(){ varview=newAlpaca.View(); varlayout=newAlpaca.Layout(); varpart=newAlpaca.Part({name:\'leftMenu\'}); layout.addChild(part); view.setLayout(layout); view.setLayoutData({\'layoutData\':\'666--3\'}); view.setPartData({leftMenu:{\'partData\':\'888--3\'}}); returnview; }, };

alpaca-spa/main/index/view/index.html文件中的內(nèi)容:

<div>我是內(nèi)容區(qū)域：當(dāng)前顯示的是index.html里面的內(nèi)容</div> <h5>我有一條數(shù)據(jù):</h5> {{=it.desc}}

alpaca-spa/main/index/view/index2.html文件中的內(nèi)容:

<div>我是內(nèi)容區(qū)域：當(dāng)前顯示的是index2.html里面的內(nèi)容</div>

alpaca-spa/main/index/view/index3.html文件中的內(nèi)容:

<div>我是內(nèi)容區(qū)域：當(dāng)前顯示的是index3.html里面的內(nèi)容</div>

在瀏覽器中訪問:http://www1.tkc8.com/alpaca-spa/index.html

點擊按鈕，可以看到內(nèi)容區(qū)域切換到對應(yīng)的頁面了，整體布局layout、菜單leftMenu除了數(shù)據(jù)其他的都沒有變化，

上面的示例中，我們創(chuàng)建了Main模塊，index控制器，index動作，并且在indexAction中通過Alpaca.View()方法創(chuàng)建了一個視圖，運行結(jié)果是視圖模板中的內(nèi)容被渲染到了頁面的#content位置中。這就是Alpaca.View()的用途。

Alpaca.View()方法

Alpaca.View(option)是一個用來創(chuàng)建視圖頁面的方法，接受一個對象參數(shù)option，參數(shù)option中可以包含以下字段：

option.data

數(shù)據(jù)對象，為渲染模板提供數(shù)據(jù)

例如：Alpaca.View({data:{name:\'Alpaca-spa\'}})

option.to

設(shè)置被渲染位置，默認(rèn)位置是#content

例如：Alpaca.View({data:{name:\'Alpaca-spa\'},to:\'#divId\'})

option.template

指定渲染的模板文件。默認(rèn)是所屬模塊view目錄下所屬controller同名目錄下action同名的.html文件，即：默認(rèn)模板位置為：[模塊名]/view/[控制器名]/[動作名].html

如果需要改變視圖模板，只需要這樣寫即可：template:\'index2\'，這樣就會使用同名controller下的index2.html作為模板。

這是因為函數(shù)內(nèi)部自動格式化了該參數(shù)，如果不想使用自動格式化功能，請使用notFormat參數(shù)，設(shè)置notFormat:true即可。

例如：Alpaca.View({data:{name:\'Alpaca-spa\'},to:\'body\',template:\'index2\'})

option.notFormat(一般不用，不推薦使用，可以跳過不看)

默認(rèn)為false，表示系統(tǒng)會自動格式化template參數(shù)，如果設(shè)置為true，如下例，視圖將使用根目錄下的index-test.html文件作為視圖模板。 Alpaca.View(template:\'/index-test.html\',notFormat:true})

3使用Layout和Part

實際的web項目開發(fā)中，大部分頁面都是有結(jié)構(gòu)的，比如總體的布局，公用的菜單、頁頭、頁尾等。Alpaca-sap.js使用layout，part來解決這類問題。

繼續(xù)上面介紹View的示例：

觀察alpaca-spa/main/controller/index.js文件中的內(nèi)容：

indexAction:function(){ //視圖默認(rèn)渲染到#content位置，可以通過參數(shù)中傳遞to字段改變渲染位置 //視圖模板默認(rèn)位于index/view/index/index.html,可以通過參數(shù)中傳遞template字段改變模塊路徑 //即：默認(rèn)模板位置為：[模塊名]/view/[控制器名]/[動作名].html varview=newAlpaca.View({data:{desc:\'我是一條數(shù)據(jù)，在controller中傳遞到view視圖模版里面！\'}}); //layout布局視圖 varlayout=newAlpaca.Layout(); //part部件視圖，默認(rèn)路由位于view/layout/part中，文件名默認(rèn)與name屬性相同 //part的默認(rèn)渲染位置與其name屬性相同，當(dāng)然也可以通過to屬性指定 varpart=newAlpaca.Part({name:\'leftMenu\'}); //將part添加到layout中，part的默認(rèn)渲染位置與其name屬性相同，也可以通過to屬性指定 layout.addChild(part); //設(shè)置視圖的layout view.setLayout(layout); //在view中，向layout中傳遞數(shù)據(jù) view.setLayoutData({\'layoutData\':666}); //在view中，向part中傳遞數(shù)據(jù) view.setPartData({leftMenu:{\'partData\':888}}); returnview; },

以及：alpaca-spa/main/view/layout/layout.html文件中的內(nèi)容為：

alpaca-spa/main/view/layout/part/leftMenu.html文件中的內(nèi)容為：

上面的示例演示了如何使用layout、part來渲染復(fù)雜頁面。

Alpaca.Layout()方法

Alpaca.Layout(option)是用來創(chuàng)建一個layout布局的視圖對象的方法，接受一個對象參數(shù)option，參數(shù)option中可以包含以下字段：

option.data

數(shù)據(jù)對象，為渲染模板提供數(shù)據(jù)

例如：Alpaca.Layout({data:{name:\'Alpaca-spa\'}})

option.to

設(shè)置被渲染位置，默認(rèn)位置是body

例如：Alpaca.Layout({data:{name:\'Alpaca-spa\'},to:\'#divId\'})

option.name

指定layout的名字。默認(rèn)為layout

layout默認(rèn)的模板路徑是所屬模塊view目錄下layout目錄下的layout.html文件

通過name字段可以修改模板的路徑為：所屬模塊view目錄下layout目錄下與name同名的html文件

例如：Alpaca.Layout({data:{name:\'Alpaca-spa\'},to:\'body\',name:\'layout2\'})

Alpaca.Part()方法

Alpaca.Part(option)是用來創(chuàng)建一個part布局的視圖對象的方法，接受一個對象參數(shù)option，參數(shù)option中可以包含以下字段：

option.data

數(shù)據(jù)對象，為渲染模板提供數(shù)據(jù)

例如：Alpaca.Part({data:{name:\'Alpaca-spa\'}})

option.name

指定Part的名字。

Part默認(rèn)的模板路徑是所屬模塊viewlayoutpart目錄下與其name同名的html文件

Part默認(rèn)的渲染位置是id與其name同名的元素

通過name字段可以達(dá)到指定他的視圖模板路徑，以及渲染位置的效果，例如，

例如：Alpaca.Part({data:{name:\'Alpaca-spa\'},name:\'top\'})

option.to

設(shè)置被渲染位置，默認(rèn)位置是id與其name同名的元素

例如：Alpaca.Part({data:{name:\'Alpaca-spa\'},to:\'#divId\'})

4.如何改變layout、view的默認(rèn)渲染位置 1、layout默認(rèn)渲染位置是<body></body>位置,

通過設(shè)置Alpaca.ViewModel.DefaultLayoutCaptureTo="body";可以全局改變layout的默認(rèn)渲染位置

如果只修改當(dāng)前視圖的渲染位置，有兩種方法：

varlayout=newAlpaca.Layout({to:\'body\'}});

或者

varlayout=newAlpaca.Layout(); layout.setCaptureTo(\'.layout-area\'); 2、view默認(rèn)渲染位置是<divid="content"></div>位置，

通過設(shè)置Alpaca.ViewModel.DefaultViewCaptureTo="body";可以全局改變view的默認(rèn)渲染位置

如果只修改當(dāng)前視圖的渲染位置，有兩種方法：

varview=newAlpaca.View({to:\'#content\'}});

或者

varview=newAlpaca.View(); view.setCaptureTo(\'.content-area\');

layout、view的默認(rèn)渲染位置非常重要，一個路由執(zhí)行后，url中的hash是否改變，就依據(jù)layout、view的默認(rèn)位置決定。而hash是否改變，會影響刷新點擊按鈕的結(jié)果。

1、如果當(dāng)前view沒有使用layout，則view的CaptureTo等于DefaultLayoutCaptureTo時，hash會改變 2、如果使用了layout，則layout的CaptureTo等于DefaultLayoutCaptureTo時，hash會改變 5ready()方法

視圖渲染完畢后會執(zhí)行view.ready()方法，例如

varview=newAlpaca.View() //視圖渲染完成后執(zhí)行ready方法。 view.ready(function(){ console.log(\'視圖渲染完成了...\'); }) returnview; 6自定義顯示效果

通過設(shè)置view.show方法可以自定義視圖顯示效果，例如：

varview=newAlpaca.View(); //自定義視圖渲染效果為閃入效果。 //注意：在自定義視圖顯示效果時，需要調(diào)用onLoad事件，來觸發(fā)執(zhí)行ready函數(shù)。 view.show=function(to,html){ varthat=this; $(to).fadeOut("fast",function(){ $(to).html(html); $(to).fadeIn("fast",function(){ that.onLoad(); }); }); }; returnview;

上面面示例代碼，實現(xiàn)了視圖渲染時的閃入效果。

7init()與release()方法

如果在控制器中定義了init()方法，那么在執(zhí)行當(dāng)前控制器的所有action方法前都會執(zhí)行init()方法。如果在控制器中定義了release()方法，那么在執(zhí)行完成當(dāng)前控制器的所有action方法之后，都會執(zhí)行release()方法，

模塊中也可以定義init()、release()方法。

參考示例：

/*定義Index模塊中的TestController*/ Alpaca.IndexModule.TestController={ //init方法,當(dāng)前控制下的所有動作在執(zhí)行前，都會執(zhí)行init方法 init:function(){ console.log(\'執(zhí)行action之前，執(zhí)行init()方法\'); }, //release方法,當(dāng)前控制下的所有動作在執(zhí)行前，都會執(zhí)行release方法 release:function(){ console.log(\'執(zhí)行action之后，執(zhí)行release)方法\'); }, }; 8.關(guān)于hash何時被改變

1：如果未使用layout，則view的CaptureTo等于DefaultLayoutCaptureTo 2：如果使用了layout，則layout的CaptureTo等于DefaultLayoutCaptureTo

網(wǎng)頁題目：構(gòu)建多頁的前后分離web項目（alpaca-spa的視圖用法）
當(dāng)前鏈接：http://www.rwnh.cn/article12/cpjcdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站制作、自適應(yīng)網(wǎng)站、網(wǎng)站策劃、外貿(mào)建站、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

構(gòu)建多頁的前后分離web項目（alpaca-spa的視圖用法）