在瀏覽器端，對路由的理解一般是根據不同的 URL 完成頁面的切換。在服務器端，則是根據不同的 URL 請求回饋相關的頁面。在本章，我們廣義的組件路由的定義：根據接收到的不同命令，組件對象呈現出不同的子級頁面。在這里將介紹與路由相關的一個組件，即視圖棧 ViewStack。
視圖棧初步
該組件在《文檔》部分的最后一個章節《延遲實例化》已經出現過了。這里將對一些細節部分進行解讀。下面再次給出該組件的源碼。
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;}});
}
}
從靜態接口看，該組件允許提供靜態參數 index，該參數是組件 ViewStack 某一兒子組件對象的名稱，它用于指出哪一個子級組件會被最先呈現。請看下面的示例。
Example1: {
xml: `<ViewStack index='bar'>
<button id='foo'>foo</button>
<button id='bar'>bar</button>
</ViewStack>`
}
該示例中，ViewStack 包含一值為 bar 的屬性 index，表明組件在實例化時，組件對象 bar 會最先呈現。而默認情況下，該組件的第一個子級組件會作為初始顯示對象。再從動態接口看，該組件的函數項導出了一個名為 selected 的只讀屬性，該屬性用于指示當前顯示的子級組件對象。
通過事件切換目標組件對象
對于子級組件對象之間切換，該組件的函數項并未導出相關的接口，而是通過接收 switch 事件來完成切換。請看下面的示例。
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);
});
}
}
對于該示例，當用戶點擊文字時，文字會在 foo 和 bar 之間切換，也即兩個頁面之間切換，切換是通過相應子級對象派發 switch 事件進行的。另外，組件 ViewStack 在切換頁面時，還會對本次顯示的頁面派發事件 show，以及對本次隱藏的頁面派發事件 hide，相關頁面可以根據需要選擇偵聽與否。并且在偵聽函數中，可以獲知前一顯示頁面 ID 以及所傳輸的相關數據。
動態添加與移除子級對象
組件 ViewStack 支持動態添加與移除子級的組件對象，請看下面的一個示例。
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");
}
}
該示例中，函數項中動態添加了一個子級組件，并且通過派發事件 switch 將當前顯示的視圖切換為剛新添加的視圖。
優化配置
組件 ViewStack 一般配合組件的延遲實例化功能使用。對于一些比較復雜的組件，這樣有助于加快顯示應用的初始頁面。下面做簡單示范。
Example4: {
xml: `<ViewStack>
<button id='foo'>foo</button>
<button id='bar'>bar</button>
<button id='alice'>alice</button>
</ViewStack>`
map: { defer: "bar alice" }
}
此示例中，ViewStack 子級包含三個子組件，其中組件對象 bar 和 alice 被設置為需要延遲實例化，只有當這兩組件對象的 show 函數得到調用時，它們才真正開始實例化。
與 HTML5 History API 的配合使用
這里我們看看如何讓組件 ViewStack 與 HTML5 History API 的配合使用。下面是一個簡單的例子。
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);
});
}
}
該示例的關鍵點在于，當視圖棧組件對象的子級頁面發生變更時，使用函數 pushState 記錄下來；另外需要偵聽瀏覽器的 popstate 事件，當用戶點擊「前進」、「后退」按鈕時，完成相應頁面的切換。這種技術非常適合在單頁應用中完成無刷新跳轉，可以給用戶帶來非常好的體驗。
本系列文章基于 xmlplus 框架。如果你對 xmlplus 沒有多少了解，可以訪問 www.xmlplus.cn。這里有詳盡的入門文檔可供參考。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
