xmlplus組件設(shè)計(jì)系列之路由（ViewStack)（7）
在瀏覽器端，對(duì)路由的理解一般是根據(jù)不同的 URL 完成頁面的切換。在服務(wù)器端，則是根據(jù)不同的 URL 請(qǐng)求回饋相關(guān)的頁面。在本章，我們廣義的組件路由的定義：根據(jù)接收到的不同命令，組件對(duì)象呈現(xiàn)出不同的子級(jí)頁面。在這里將介紹與路由相關(guān)的一個(gè)組件，即視圖棧 ViewStack。
視圖棧初步
該組件在《文檔》部分的最后一個(gè)章節(jié)《延遲實(shí)例化》已經(jīng)出現(xiàn)過了。這里將對(duì)一些細(xì)節(jié)部分進(jìn)行解讀。下面再次給出該組件的源碼。
ViewStack: {
xml: "<div id='viewstack'/>",
fun: function (sys, items, opts) {
var args, children = this.children(),
table = children.call("hide").hash(),
ptr = table[opts.index] || children[0];
if (ptr) ptr = ptr.trigger("show").show();
this.on("switch", function ( e, to ) {
table = this.children().hash();
if ( !table[to] || table[to] == ptr ) return;
e.stopPropagation();
args = [].slice.call(arguments).slice(2);
ptr.trigger("hide", [to+''].concat(args)).hide();
ptr = table[to].trigger("show", [ptr+''].concat(args)).show();
});
return Object.defineProperty({}, "selected", { get: function() {return ptr;}});
}
}
從靜態(tài)接口看，該組件允許提供靜態(tài)參數(shù) index，該參數(shù)是組件 ViewStack 某一兒子組件對(duì)象的名稱，它用于指出哪一個(gè)子級(jí)組件會(huì)被最先呈現(xiàn)。請(qǐng)看下面的示例。
Example1: {
xml: `<ViewStack index='bar'>
<button id='foo'>foo</button>
<button id='bar'>bar</button>
</ViewStack>`
}
該示例中，ViewStack 包含一值為 bar 的屬性 index，表明組件在實(shí)例化時(shí)，組件對(duì)象 bar 會(huì)最先呈現(xiàn)。而默認(rèn)情況下，該組件的第一個(gè)子級(jí)組件會(huì)作為初始顯示對(duì)象。再從動(dòng)態(tài)接口看，該組件的函數(shù)項(xiàng)導(dǎo)出了一個(gè)名為 selected 的只讀屬性，該屬性用于指示當(dāng)前顯示的子級(jí)組件對(duì)象。
通過事件切換目標(biāo)組件對(duì)象
對(duì)于子級(jí)組件對(duì)象之間切換，該組件的函數(shù)項(xiàng)并未導(dǎo)出相關(guān)的接口，而是通過接收 switch 事件來完成切換。請(qǐng)看下面的示例。
Example2: {
xml: "<ViewStack id='viewstack'>\
<button id='foo'>foo</button>\
<button id='bar'>bar</button>\
</ViewStack>"
fun: function (sys, items, opts) {
sys.viewstack.on("click", "*", function(e) {
var to = this + '' == "foo" ? "bar" : "foo",
data = "hello, world";
this.trigger("switch", [to, data]);
});
sys.foo.on("show", function (e, prev, data) {
console.log("previous page is " + prev, "from data is " + data);
});
sys.bar.on("hide", function (e, prev, data) {
console.log("previous page is " + prev, "from data is " + data);
});
}
}
對(duì)于該示例，當(dāng)用戶點(diǎn)擊文字時(shí)，文字會(huì)在 foo 和 bar 之間切換，也即兩個(gè)頁面之間切換，切換是通過相應(yīng)子級(jí)對(duì)象派發(fā) switch 事件進(jìn)行的。另外，組件 ViewStack 在切換頁面時(shí)，還會(huì)對(duì)本次顯示的頁面派發(fā)事件 show，以及對(duì)本次隱藏的頁面派發(fā)事件 hide，相關(guān)頁面可以根據(jù)需要選擇偵聽與否。并且在偵聽函數(shù)中，可以獲知前一顯示頁面 ID 以及所傳輸?shù)南嚓P(guān)數(shù)據(jù)。
動(dòng)態(tài)添加與移除子級(jí)對(duì)象
組件 ViewStack 支持動(dòng)態(tài)添加與移除子級(jí)的組件對(duì)象，請(qǐng)看下面的一個(gè)示例。
Example3: {
xml: "<ViewStack id='viewstack'>\
<button id='foo'>foo</button>\
</ViewStack>"
fun: function (sys, items, opts) {
var xml = "<button id='bar'>bar</button>";
sys.viewstack.append(xml).trigger("switch", "bar");
}
}
該示例中，函數(shù)項(xiàng)中動(dòng)態(tài)添加了一個(gè)子級(jí)組件，并且通過派發(fā)事件 switch 將當(dāng)前顯示的視圖切換為剛新添加的視圖。
優(yōu)化配置
組件 ViewStack 一般配合組件的延遲實(shí)例化功能使用。對(duì)于一些比較復(fù)雜的組件，這樣有助于加快顯示應(yīng)用的初始頁面。下面做簡(jiǎn)單示范。
Example4: {
xml: `<ViewStack>
<button id='foo'>foo</button>
<button id='bar'>bar</button>
<button id='alice'>alice</button>
</ViewStack>`
map: { defer: "bar alice" }
}
此示例中，ViewStack 子級(jí)包含三個(gè)子組件，其中組件對(duì)象 bar 和 alice 被設(shè)置為需要延遲實(shí)例化，只有當(dāng)這兩組件對(duì)象的 show 函數(shù)得到調(diào)用時(shí)，它們才真正開始實(shí)例化。
與 HTML5 History API 的配合使用
這里我們看看如何讓組件 ViewStack 與 HTML5 History API 的配合使用。下面是一個(gè)簡(jiǎn)單的例子。
Example5: {
xml: `<ViewStack id='example'>
<button id='foo'>foo</button>
<button id='bar'>bar</button>
<button id='alice'>alice</button>
</ViewStack>`,
fun: function (sys, items, opts) {
sys.example.on("show", "button", function (e, prev) {
window.history.pushState({name: this + ""}, null, "/" + this);
});
window.addEventListener("popstate", function(e) {
sys.example.trigger("switch", e.state.name);
});
}
}
該示例的關(guān)鍵點(diǎn)在于，當(dāng)視圖棧組件對(duì)象的子級(jí)頁面發(fā)生變更時(shí)，使用函數(shù) pushState 記錄下來；另外需要偵聽瀏覽器的 popstate 事件，當(dāng)用戶點(diǎn)擊「前進(jìn)」、「后退」按鈕時(shí)，完成相應(yīng)頁面的切換。這種技術(shù)非常適合在單頁應(yīng)用中完成無刷新跳轉(zhuǎn)，可以給用戶帶來非常好的體驗(yàn)。
本系列文章基于 xmlplus 框架。如果你對(duì) xmlplus 沒有多少了解，可以訪問 www.xmlplus.cn。這里有詳盡的入門文檔可供參考。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js使用原型對(duì)象(prototype)需要注意的地方
這篇文章主要為大家詳細(xì)介紹了js使用原型對(duì)象(prototype)需要注意的地方，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Option 對(duì)象代表 HTML 表單中下拉列表中的一個(gè)選項(xiàng)。在 HTML 表單中 <option> 標(biāo)簽每出現(xiàn)一次，一個(gè) Option 對(duì)象就會(huì)被創(chuàng)建。您可通過表單的 elements[] 數(shù)組訪問一個(gè) Option 對(duì)象，或者通過使用 document.getElementById()。2015-05-05
JavaScript?Promise執(zhí)行流程深刻理解
這篇文章主要介紹了JavaScript?Promise執(zhí)行流程深刻理解，他是一個(gè)構(gòu)造函數(shù)，每個(gè)創(chuàng)建的promise都有各自狀態(tài)和值，且狀態(tài)初始值為pending，值為undefined2022-06-06
JS實(shí)現(xiàn)手機(jī)號(hào)脫敏、郵箱脫敏、身份證號(hào)脫敏、姓名脫敏等常見脫敏代碼示例
在vscode上直接運(yùn)行typescript的操作方法
JavaScript實(shí)現(xiàn)命名空間的多種方式
