xmlplus 是一個JavaScript框架，用於快速開發前後端專案。這篇文章主要介紹了xmlplus元件設計系列之路由，具有一定的參考價值，有興趣的小夥伴們可以參考一下
在瀏覽器端，對路由的理解一般是根據不同的URL 完成頁面的切換。在伺服器端，則是根據不同的 URL 請求回饋相關的頁面。在本章，我們廣義的元件路由的定義：根據接收到的不同命令，元件物件呈現出不同的子級頁面。在這裡將介紹與路由相關的一個元件，即視圖棧 ViewStack。
視圖堆疊初步
該元件在《文件》部分的最後一個章節《延遲實例化》已經出現過了。這裡將對一些細節部分進行解讀。下面再次給出該元件的原始碼。
ViewStack: {
xml: "<p 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 函數被呼叫時，它們才真正開始實例化。
這裡我們來看看如何讓元件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。這裡有詳盡的入門文件可供參考。
【相關推薦】
1. 免費js線上影片教學
3. php.cn獨孤九賤（3）－JavaScript影片教學
以上是JavaScript框架（xmlplus）元件的介紹（七）路由（ViewStack)的詳細內容。更多資訊請關注PHP中文網其他相關文章！
