Alpaca-Spa-2.0 前端JS單頁面框架
Alpaca-Spa-2.0 使用幫助
簡介
Alpaca-spa-2.0.js 簡介
Alpaca-spa.js是一款輕量的前端JS框架，提供前端路由功能，前端視圖渲染功能，前端套頁面功能。目的是用來提升web項目的開發效率，先後端分離開發，同時使前端代碼結構更加整潔。javascript
Alpaca-spa.js 區別於其餘框架的主要特色是輕巧靈活，學習成本低。框架沒有複雜的概念與特性，幾乎都是最基本的JavaScript語法，也就是說讀者只要有JavaScript語言基礎，就能很快學會使用 Alpaca-spa.js框架。html
主頁
Alpaca-Spa ： http://www.tkc8.com前端
入門示例
1. 引用Alpaca-spa-2.0.js
Alpaca-spa-2.0.js 目前依賴於 jquery.js。使用Alpaca-spa-2.0.js 須要引用
1). jquery.js
下載地址（或者直接在代碼中引用）：http://spa.tkc8.com/common/js/jquery-2.1.4.min.js
2). Alpaca-spa-2.0.js 
下載地址（或者直接在代碼中引用）：http://spa.tkc8.com/common/js/alpaca-spa-2.0.js
2. 示例： Hello Alpaca
新建文件hello.html。在文件中編輯如下內容代碼，用瀏覽器打開觀察結果。java
<!DOCTYPE html>
<html>
<head>
<title>Alpaca-Spa-2.0 JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="/common/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/alpaca-spa-2.0.js" type="text/javascript"></script>
<script>
$().ready(function () {
Alpaca.Tpl({data:{text:'Alpaca'},place:'body'});
});
</script>
</head>
<body>
hello {{=it.text}} !
</body>
</html>
結果以下jquery
hello Alpaca !
示例中的Alpaca.Tpl( )方法，傳遞了一個對象做爲參數，對像中有兩個屬性，data表示要傳遞的數據（對象格式），place表示要渲染的位置。nginx
經過上面的示例能夠發現 頁面body元素中的 {{=it.text}}被替換成爲了 參數data中的text字段，也就是「Alpaca」，從而達到了渲染數據的效果。web
注， 模板中的 it 是固定關鍵字，表明傳遞過來的數據對象。關於Alpaca.Tpl( )方法的詳細用法，後續章節會作詳細介紹。apache
3. 示例：使用路由
新建文件router.html。在文件中編輯如下內容代碼，用瀏覽器打開觀察結果。後端
<!DOCTYPE html>
<html>
<head>
<title>Alpaca-Spa-2.0 JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="/common/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/alpaca-spa-2.0.js" type="text/javascript"></script>
<script>
$().ready(function () {
Alpaca.run();
});
</script>
</head>
<body>
</body>
</html>
結果以下，表示Alpaca路由運行成功數組
Welcome use Alpaca-spa 2.0 !
新建文件router-index.html。在文件中編輯如下內容代碼。
<!DOCTYPE html>
<html>
<head>
<title>Alpaca-Spa-2.0 JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="/common/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/alpaca-spa-2.0.js" type="text/javascript"></script>
<script>
//定義index模塊
Alpaca.IndexModule = {};
//定義index控制器
Alpaca.IndexModule.IndexController={
//定義index動做
indexAction:function(){
alert('Hello Router');
},
//定義index動做
index2Action:function(){
Alpaca.Tpl({data:{text:'Hello'},place:'body'});
},
};
</script>
<script>
$().ready(function () {
Alpaca.run();
});
</script>
</head>
<body>
{{=it.text }} Alpaca.
</body>
</html>
在瀏覽器中輸入http://127.0.0.1/examples/router-index.html#/index/index/index
結果彈出提示框：
Hello Router
在瀏覽器中輸入http://127.0.0.1/examples/router-index.html#/index/index/index2
頁面中顯示：
Hello Alpaca.
經過上面兩個例子，能夠發現，Url中 :
#/index/index/index 映射到 Alpaca.IndexModule.IndexController.indexAction()方法
#/index/index/index2 映射到 Alpaca.IndexModule.IndexController.index2Action()方法
這就是Alpace路由的用途，將Url中hash部分映射到一個js方法。
關於路由的詳細用法以及Alpaca.run()方法，後面章節會詳細介紹。
模板語法
1. 語法
模板語法的做用是將JavaScript中的數據變量渲染到頁面中。
Alpaca-spa.js 引用dot.js做爲模板引擎，而且支持兩種模板語法格式，分別是 alpaca 格式， dot.js 默認格式。經常使用的語法格式以下所示：
-
Alpaca 格式 :
- <?spa ?>在標籤內可使用任意的JS語法
- <?spa echo xxx ?> 輸出變量
- <?spa if(){ ?>xxx<?spa } ?> 條件判斷
- <?spa for(){ ?>xxx<?spa } ?> for循環
- <?spa foreach(xxx as key => val) ?> xxx <?spa endForeach ?> foreach循環
-
dot.js 格式 ：
- {{ }} 在標籤內可使用JS表達式和dot.js語法
- {{=value }} 當前位置輸出變量的值
- {{ if(){ }} xxx {{ } }} 條件判斷
- {{ for(){ }} xxx {{ } }} for循環
學習使用Alpaca-spa.js模板引擎 ，開發人員只須要掌握三種基本的語法格式便可： 輸出變量，循環， 條件判斷。
提示： 在標籤<?spa ?> 或者{{ }}中，可使用任意的JavaScript語法。
下面介紹如何使用這三種語法格式.
2. 輸出變量
語法：
- <?spa echo it.xxx ?>
- {{=it.xxx}}
用途：在渲染頁面時，將一個變量顯示在頁面上
參考以下示例：
<!DOCTYPE html>
<html>
<head>
<title>Alpaca-Spa-2.0 JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="/common/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/alpaca-spa-2.0.js" type="text/javascript"></script>
<script>
$(function(){
var data = {name : "Cheng",age : 26};
Alpaca.Tpl({data:data ,from:"#template", to:"#content"});
});
</script>
<script id='template' type="text">
<div>Name:<?spa echo it.name ?>!</div>
<div>Age:<?spa echo it.age ?>!</div>
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
示例中的Alpaca.Tpl( )方法，傳遞了一個對象做爲參數，對像中有三個屬性，data表示要傳遞的數據（對象格式），from表示模板元素，to表示要渲染的位置。在瀏覽器中運行這個頁面，結果以下：
Name:Cheng! Age:26!
3. 循環
語法：
- <?spa foreach() ?>xxx<?spa endForeach ?>
- {{ for(){ }}xxx{{ } }}
用途：在遍歷數組或者對象時候使用
參考以下示例：
<!DOCTYPE html>
<html>
<head>
<title>Alpaca-Spa-2.0 JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="/common/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/alpaca-spa-2.0.js" type="text/javascript"></script>
<script>
$(function(){
var data = {
result:[
{type:'支付寶',amount:'125',time:'2016-11-12'},
{type:'微信',amount:'130',time:'2016-10-12'}
]
};
Alpaca.Tpl({data:data ,from:"#template", to:"#content"});
});
</script>
<script id='template' type="text">
<?spa foreach(it.result as key => value) ?>
<div>
<?spa echo key ?>:
<div>支付方式：<?spa echo value['type'] ?></div>
<div>支付金額：<?spa echo value['amount'] ?></div>
<div>支付時間：<?spa echo value['time'] ?></div>
</div>
<?spa endForeach ?>
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
結果以下：
0: 支付方式：支付寶 支付金額：125 支付時間：2016-11-12 1: 支付方式：微信 支付金額：130 支付時間：2016-10-12
4. 條件判斷
語法：
- <?spa if(condition){ ?>xxx<?spa } ?>
- {{ if(condition){ }}xxx{{ } }}
用途：在須要作條件判斷的分支環境中使用
參考以下示例：
<!DOCTYPE html>
<html>
<head>
<title>Alpaca-Spa-2.0 JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="/common/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/alpaca-spa-2.0.js" type="text/javascript"></script>
<script>
$(function(){
var data = {check:true,};
Alpaca.Tpl({data:data ,from:"#template", to:"#content"});
});
</script>
<script id='template' type="text">
<?spa if(it.check){ ?>
<font>條件爲true的狀況</font>
<?spa }else{ ?>
<a>條件爲false的狀況</a>
<?spa } ?>
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
輸出結果：
條件爲true的狀況
5. Alpaca.Tpl()方法
Alpaca.Tpl(option) 是一個用來渲染頁面的方法，接受一個對象參數option，參數option中能夠包含如下字段：
- option.data
數據對象，爲渲染模板提供數據
Alpaca.Tpl({data:{name:'Alpaca-spa'}})
- option.from
模板位置，能夠是任意的頁面元素，選擇方法與Jquery的選擇器相同
Alpaca.Tpl({from:'#template',to:'#div',data:{name:'Alpaca-spa'}})
- option.to
被渲染位置
Alpaca.Tpl({from:'#template',to:'#div',data:{name:'Alpaca-spa'}})
- option.place
指定模板渲染的位置。當place被指定時，模板位置與被渲染位置相同
Alpaca.Tpl({place:'body',data:{name:"zp"}})
- option.template
指定渲染的模板文件。當template被指定時，模板從當前頁面元素變爲指定的html文件
Alpaca.Tpl({to:'body',template:'layer.html',data:{name:"zp"}})
注： 使用另外一個頁面做爲模板，須要配置web服務器，在後面章節【視圖高級用法】中會作詳細介紹
示例
使用參數：data from to：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alpaca-spa.2.0</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="alpaca-spa-2.0.js"></script>
<script>
$(function(){
Alpaca.Tpl({from:'#template',to:'#content',data:{name:"Alpaca-spa"}});
});
</script>
<script id='template' type="text">
<font>Welcome to {{=it.name}}!</font>
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
輸出結果：
Welcome to Alpaca-spa!
使用參數：place：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alpaca-spa.2.0</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="alpaca-spa-2.0.js"></script>
<script>
$(function(){
Alpaca.Tpl({place:'body',data:{name:"Alpaca-spa"}});
});
</script>
</head>
<body>
Hello {{=it.name}}!
</body>
</html>
輸出結果：
This is Alpaca-spa! template：
使用參數：template：
建立兩個html頁面：template.html，test-template.html
注： 使用template參數指定另外一個頁面爲模板時，須要配置web服務器，確保template路徑正確，詳情請參考後面章節【視圖高級用法】。
template.html 文件用來作模板，內容以下：
<h1>This is {{=it.name}}.</h1>
test-template.html 文件是用來測試該示例的頁面，內容以下：
<!DOCTYPE html>
<html>
<head>
<title>Alpaca-Spa-2.0 JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="/common/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/alpaca-spa-2.0.js" type="text/javascript"></script>
<script>
$().ready(function () {
var data = {name:"Alpaca-spa"};
Alpaca.Tpl({template:'/examples/template.html',to:'body',data:data});
});
</script>
</head>
<body>
</body>
</html>
在瀏覽器中訪問test-template.html頁面，輸出結果：
This is Alpaca-spa.
經過上面的示例，能夠發現template.html中的內容被渲染到了當前頁面。
路由
1. 什麼是路由
若是您已經看過前面入門示例中關於路由的示例，相信您已經瞭解了在Alpaca-Sap.js中，路由的功能是將Url中hash部分映射到一個js方法。
例如上面的示例：
<!DOCTYPE html>
<html>
<head>
<title>Alpaca-Spa-2.0 JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="/common/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/alpaca-spa-2.0.js" type="text/javascript"></script>
<script>
//定義index模塊
Alpaca.IndexModule = {};
//定義index控制器
Alpaca.IndexModule.IndexController={
//定義index動做
indexAction:function(){
alert('Hello Router');
},
//定義index動做
index2Action:function(){
Alpaca.Tpl({data:{text:'Hello'},place:'body'});
},
};
</script>
<script>
$().ready(function () {
Alpaca.run();
});
</script>
</head>
<body>
{{=it.text }} Alpaca.
</body>
</html>
在瀏覽器中輸入http://127.0.0.1/examples/router-index.html#/index/index/index
結果彈出提示框：
Hello Router
在瀏覽器中輸入http://127.0.0.1/examples/router-index.html#/index/index/index2
頁面中顯示：
Hello Alpaca.
能夠發現，Url中hash的映射關係 :
#/index/index/index 映射到 Alpaca.IndexModule.IndexController.indexAction()方法
#/index/index/index2 映射到 Alpaca.IndexModule.IndexController.index2Action()方法
路由的組成：
Alpaca-Sap.js中，路由用Url中的hash部分表示，主要有三部分組成，模塊，控制器，動做。格式：#/模塊/控制器/動做
例如：Url中 #/admin/user/add 表示 admin模塊，user控制器，add動做。
對應js代碼中 Alpaca.AdminModule.UserController.addAction()方法。
那麼如何在js代碼中定義模塊，控制器，方法呢？
定義模塊：
Alpaca.AdminModule = {};
模塊是Alpaca的一個對象，以Module結尾。上面示例定義了一個名爲admin的模塊。
定義控制器：
Alpaca.AdminModule.UserController ={};
控制器是模塊的一個對象。以Controller 結尾。上面示例定義了一個名爲user的控制器，屬於admin模塊。
定義動做：
Alpaca.AdminModule.UserController={
addAction:function(){
alert('Hello Router');
},
}
動做是控制器中的一個方法，以Action 結尾。上面示例在user的控制器中定義了一個add方法，
2. 如何使用路由
在Alpaca-Spa.js中使用路由有三種方式：
-
1 在瀏覽器的地址欄中直接輸入Url，例如上面的示例。
-
2 在頁面加載完成時，使用 Alpaca.run()方法。
-
3 使用Alpaca.to()方法。
下面分別介紹Alpaca.run()方法與Alpaca.to()。
3. Alpaca.run()
Alpaca.run()通常在頁面加載完成時調用，用來執行默認路由，例如：
$().ready(function () {
Alpaca.run();
});
在瀏覽期中打開頁面，結果以下：
Welcome use Alpaca-spa 2.0 !
這是由於當Alpaca.run()方法中的參數爲空時，調用了Alpaca-Spa.js的內置默認路由:#/alpaca/alpaca/index , 對應方法： Alpaca.AlpacaModule.AlpacaController.indexAction()。 這個方法在頁面中輸出了: Welcome use Alpaca-spa 2.0 !
下面示例如何修改頁面加載時的默認路由：
新建頁面 router-default.html ，內容入下：
<!DOCTYPE html>
<html>
<head>
<title>Alpaca-Spa-2.0 JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="/common/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/alpaca-spa-2.0.js" type="text/javascript"></script>
<script>
//定義index模塊
Alpaca.IndexModule = {};
//定義index控制器
Alpaca.IndexModule.IndexController={
//定義index動做
indexAction:function(){
document.write("Hello I'm your default Router.")
},
};
</script>
<script>
$().ready(function () {
Alpaca.run("#/index/index/index");
});
</script>
</head>
<body>
</body>
</html>
瀏覽器中打開頁面，結果以下：
Hello I'm your default Router.
經過上面的示例，能夠看出爲Alpaca.run()方法傳遞一個參數"#/index/index/index"，就能夠改變頁面加載時執行默認的路由了。上面的示例中，咱們將默認路由改成了#/index/index/index。
4. Alpaca.to()
在介紹Alpaca.to()方法使用以前，先來看一個示例：
<!DOCTYPE html>
<html>
<head>
<title>Alpaca-Spa-2.0 JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="/common/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/alpaca-spa-2.0.js" type="text/javascript"></script>
<script>
//定義index模塊
Alpaca.IndexModule = {};
//定義index控制器
Alpaca.IndexModule.IndexController={
//定義index動做
indexAction:function(){
Alpaca.Tpl({data:{title:"Test Router:"},place:"body"});
},
//定義index2動做
index2Action:function(){
$('#index2-content').html("調用index2！");
}
};
</script>
<script>
$().ready(function () {
Alpaca.run("#/index/index/index");
});
</script>
</head>
<body>
<h4>{{= it.title}}</h4>
<a onclick='Alpaca.to("#/index/index/index2")'>點我執行index2</a>
<div id="index2-content"></div>
</body>
</html>
在瀏覽器中運行該頁面，而後點擊「點我執行index2」，結果以下：
<h4>Test Router:</h4> 點我執行index2 調用index2！
經過上面的示例，能夠看出Alpaca.to()方法的做用是調用路由。
Alpaca.to()方法能夠傳遞兩個參數Alpaca.to(router,data), 其中router是上面示例中的路由，data是可選參數，一個對象類型，表明傳遞的數據。參考下面的示例：
<!DOCTYPE html>
<html>
<head>
<title>Alpaca-Spa-2.0 JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="/common/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/alpaca-spa-2.0.js" type="text/javascript"></script>
<script>
//定義index模塊
Alpaca.IndexModule = {};
//定義index控制器
Alpaca.IndexModule.IndexController={
//定義index動做
indexAction:function(){
Alpaca.Tpl({data:{title:"Test Router:"},place:"body"});
},
//定義index2動做
index2Action:function(data){
$('#index2-content').html("調用index2: "+data.text);
}
};
</script>
<script>
$().ready(function () {
Alpaca.run("#/index/index/index");
});
</script>
</head>
<body>
<h4>{{= it.title}}</h4>
<a onclick='Alpaca.to("#/index/index/index2",{text:"hello alpaca!"})'>點我執行index2</a>
<div id="index2-content"></div>
</body>
</html>
在瀏覽器中運行該頁面，而後點擊「點我執行index2」，結果以下：
<h4>Test Router:</h4> 點我執行index2 調用index2: hello alpaca!
經過上面的示例，能夠看出動做index2對應的方法能夠接受一個參數data，這個data就是Alpaca.to(router,data)方法傳遞過去的data對象。
視圖高級用法
1 簡介
視圖功能是Alpaca-Spa.js的核心功能，主要解決前端JavaScript實現頁面嵌套，頁面數據渲染，頁面局部渲染等功能。使用視圖功能須要配置web服務器，例如apache, nginx等，將網站的根目錄設置爲項目所在的目錄。
推薦的目錄結構以下：
-application
-index
-controller
index.js
-view
-index
index.html
index-2.html
index-3.html
-layout
-part
leftMenu.html
layout.html
index.js
-test
-controller
index.js
-view
-index
index.html
index-2.html
index-3.html
test.js
index.html
1. 示例中的application是項目的根目錄，應該將web服務器的根目錄設置爲此目錄。
2. application目錄下面有兩個子目錄，1個html文件。
index index目錄用來存放當前項目中，全部index模塊相關的文件
test test目錄用來存放當前項目中，全部test模塊相關的文件
index.html index.html用來作當前項目的入口文件
3.index目錄裏面有兩個目錄controller，view，一個js文件
controller 用來存放index模塊的控制器的js代碼。裏面有一個控制器js文件，index.js
view 用來存放index模塊的視圖部分的js代碼。
示例中view目錄裏面有一個子目錄index，用於存放index控制器中相關的模板，
本示例中，有三個模板：index.html，index-2.html，index-3.html
還有一個子目錄layout，用於存放公共的佈局信息，
layout目錄中的layout.html是默認的佈局模板文件
layout目錄中的還有一個子目錄part，用來存放頁面中其餘公共區域，例如菜單等
index.js index.js是index模塊的模塊級別的js代碼。
推薦在這個文件裏面作模塊的定義，例如：Alpaca.IndexModule = {};
4.test目錄與index目錄同理
2 使用View
瞭解完上面的目錄結構以後，咱們來學習使用Alpaca.View()方法，參看下面的示例。
application/index.html 文件中的內容:
<!DOCTYPE html>
<html>
<head>
<title>Alpaca-Spa-2.0 JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script src="/common/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/alpaca-spa-2.0.js" type="text/javascript"></script>
<script src="/index/index.js" type="text/javascript"></script>
<script src="/index/controller/index.js" type="text/javascript"></script>
<script>
$().ready(function () {
Alpaca.run("#/index/index/index");
});
</script>
</head>
<body>
<div id="content"> </div>
</body>
</html
application/index/index.js 文件中的內容:
/* 1 定義Index模塊 */
Alpaca.IndexModule = {};
application/index/controller/index.js 文件中的內容:
/* 1 定義Index模塊中的IndexController */
Alpaca.IndexModule.IndexController = {
//index動做，建立一個視圖
indexAction : function (){
//視圖默認渲染到#content位置，能夠經過參數中傳遞to字段改變渲染位置
//視圖模板默認位於index/view/index/index.html,
//即：默認模板位置爲：[模塊名]/view/[控制器名]/[動做名].html
//能夠經過參數中傳遞template字段改變模塊路徑
var view = new Alpaca.View();
return view;
},
};
application/index/view/index.html 文件中的內容:
hello View !!
在瀏覽器中，訪問網站根目錄下的index.html，結果以下：
hello View !
上面的示例中，咱們建立了index模塊，index控制器，index動做，而且在indexAction中經過Alpaca.View()方法建立了一個視圖，運行結果是視圖模板中的內容被渲染到了頁面的#content位置中。這就是Alpaca.View()的用途。
Alpaca.View()方法
Alpaca.View(option) 是一個用來建立視圖頁面的方法，接受一個對象參數option，參數option中能夠包含如下字段：
- option.data
數據對象，爲渲染模板提供數據
例如：Alpaca.View({data:{name:'Alpaca-spa'}})
- option.to
設置被渲染位置，默認位置是#content
例如：Alpaca.View({data:{name:'Alpaca-spa'},to:'#divId'})
- option.template
指定渲染的模板文件。默認是所屬模塊view目錄下所屬controller同名目錄下action同名的.html文件，即：默認模板位置爲：[模塊名]/view/[控制器名]/[動做名].html
若是須要改變視圖模板，只須要這樣寫便可：template:'index2'，這樣就會使用同名controller下的index2.html做爲模板。
這是由於函數內部自動格式化了該參數，若是不想使用自動格式化功能，請使用notFormat參數，設置notFormat:true 便可。
例如：Alpaca.View({data:{name:'Alpaca-spa'},to:'body',template:'index2'})
- option.notFormat
默認爲false，表示系統會自動格式化template參數，若是設置爲true，以下例，視圖將使用根目錄下的index-test.html文件做爲視圖模板。 Alpaca.View(template:'/index-test.html',notFormat:true})
3 使用Layout和Part
實際的web項目開發中，大部分頁面都是有結構的，好比整體的佈局，公用的菜單、頁頭、頁尾等。Alpaca-sap.js使用layout，part來解決這類問題。
繼續上面介紹View的示例：
修改application/index/controller/index.js 文件中的內容爲：
/* 1 定義Index模塊中的IndexController */
Alpaca.IndexModule.IndexController = {
//index動做，建立一個視圖
indexAction : function (){
//視圖默認渲染到#content位置，能夠經過參數中傳遞to字段改變渲染位置
//視圖模板默認位於index/view/index/index.html
//能夠經過參數中傳遞template字段改變模塊路徑
//即：默認模板位置爲：[模塊名]/view/[控制器名]/[動做名].html
var view = new Alpaca.View();
return view;
},
//test，測試layout,part。
//layout視圖默認渲染到body位置, 默認layout文件路徑是view/layout/layout.html
//part視圖默認路徑是view/layout/part目錄下與其建立參數中name字段同名的html文件
//part視圖默認渲染位置是 id與其建立參數中name字段同名的元素位置。
testAction : function (){
//視圖
var view = new Alpaca.View();
//layout 佈局視圖
var layout = new Alpaca.Layout();
//part 部件視圖，默認路由位於view/layout/part中，文件名默認與name屬性相同
//part 的默認渲染位置與其name屬性相同，固然也能夠經過to屬性指定
var part = new Alpaca.Part({name:'leftMenu'});
//將part添加到layout中，part的默認渲染位置與其name屬性相同，也能夠經過to屬性指定
layout.addChild(part);
//設置視圖的layout
view.setLayout(layout);
//在view中，向layout中傳遞數據
view.setLayoutData({'layoutData':666});
//在view中，向part中傳遞數據
view.setPartData({leftMenu:{'partData':888}});
return view;
},
};
application/index/view/layout/layout.html 文件中的內容爲：
<h2>This layout ! {{=it.layoutData}}</h2>
<div id="content" style="border: 1px dashed green"></div>
<div id="leftMenu" style="border: 1px dashed green"></div>
application/index/view/layout/part/leftMenu.html 文件中的內容爲：
<div> This is View for leftMenu (part view) {{=it.partData}}</div>
在瀏覽器中訪問index.html#/index/index/test,結果以下：
This layout ! 666 This is View for test action This is View for leftMenu (part view) 888
上面的示例演示瞭如何使用 layout、part來渲染複雜頁面。
Alpaca.Layout()方法
Alpaca.Layout(option) 是用來建立一個layout佈局的視圖對象的方法，接受一個對象參數option，參數option中能夠包含如下字段：
- option.data
數據對象，爲渲染模板提供數據
例如：Alpaca.Layout({data:{name:'Alpaca-spa'}})
- option.to
設置被渲染位置，默認位置是body
例如：Alpaca.Layout({data:{name:'Alpaca-spa'},to:'#divId'})
- option.name
指定layout的名字。默認爲layout
layout默認的模板路徑是所屬模塊view目錄下layout目錄下的layout.html文件
經過name字段能夠修改模板的路徑爲：所屬模塊view目錄下layout目錄下與name同名的html文件
例如：Alpaca.Layout({data:{name:'Alpaca-spa'},to:'body',name:'layout2'})
Alpaca.Part()方法
Alpaca.Part(option) 是用來建立一個part佈局的視圖對象的方法，接受一個對象參數option，參數option中能夠包含如下字段：
- option.data
數據對象，爲渲染模板提供數據
例如：Alpaca.Part({data:{name:'Alpaca-spa'}})
- option.name
指定Part的名字。
Part默認的模板路徑是所屬模塊view\layout\part目錄下與其name同名的html文件
Part默認的渲染位置是id與其name同名的元素
經過name字段能夠達到指定他的視圖模板路徑，以及渲染位置的效果，例如，
例如：Alpaca.Part({data:{name:'Alpaca-spa'},name:'top'})
- option.to
設置被渲染位置，默認位置是id與其name同名的元素
例如：Alpaca.Part({data:{name:'Alpaca-spa'},to:'#divId'})
4 ready()方法
視圖渲染完畢後會執行view.ready()方法，例如
var view = new Alpaca.View()
//視圖渲染完成後執行ready方法。
view.ready(function () {
console.log('視圖渲染完成了...');
})
return view;
5 自定義顯示效果
經過設置view.show方法能夠自定義視圖顯示效果，例如：
var view = new Alpaca.View();
//自定義視圖渲染效果爲閃入效果。
//注意：在自定義視圖顯示效果時，須要調用onLoad事件，來觸發執行ready函數。
view.show = function (to, html) {
var that = this;
$(to).fadeOut("fast", function () {
$(to).html(html);
$(to).fadeIn("fast", function () {
that.onLoad();
});
});
};
return view;
上面面示例代碼，實現了視圖渲染時的閃入效果。
6 init()與release()方法
若是在控制器中定義了init()方法，那麼在執行當前控制器的全部action方法前都會執行init()方法。若是在控制器中定義了release()方法，那麼在執行完成當前控制器的全部action方法以後，都會執行release()方法，
參考示例：
/* 定義Index模塊中的TestController */
Alpaca.IndexModule.TestController = {
//init方法,當前控制下的全部動做在執行前，都回執行init方法
init:function(){
console.log('執行action以前，執行init()方法');
},
//release方法,當前控制下的全部動做在執行前，都回執行release方法
release:function(){
console.log('執行action以後，執行release)方法');
},
};
內置對象與方法
交流方式
聯繫咱們
QQ羣： 298420174
做者： Sponge 郵箱： 1796512918@qq.com
- 1. 前端頁面框架-----layerui
- 2. 前端頁面框架推薦(轉)
- 3. 前端頁面框架推薦
- 4. 項目前端頁面框架介紹
- 5. 前端Js框架彙總
- 6. 前端（六）JS框架篇
- 7. 前端js框架彙總
- 8. 前端js框架學習
- 9. js前端框架彙總
- 10. js ui 前端UI框架
- 更多相關文章...
- • XSL-FO 頁面 - XSL-FO 教程
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端頁面框架-----layerui
- 2. 前端頁面框架推薦(轉)
- 3. 前端頁面框架推薦
- 4. 項目前端頁面框架介紹
- 5. 前端Js框架彙總
- 6. 前端（六）JS框架篇
- 7. 前端js框架彙總
- 8. 前端js框架學習
- 9. js前端框架彙總
- 10. js ui 前端UI框架