JavaScript框架（xmlplus）元件的介紹（七）路由（ViewStack)

xmlplus 是一個JavaScript框架，用於快速開發前後端專案。這篇文章主要介紹了xmlplus元件設計系列之路由，具有一定的參考價值，有興趣的小夥伴們可以參考一下

在瀏覽器端，對路由的理解一般是根據不同的URL 完成頁面的切換。在伺服器端，則是根據不同的 URL 請求回饋相關的頁面。在本章，我們廣義的元件路由的定義：根據接收到的不同命令，元件物件呈現出不同的子級頁面。在這裡將介紹與路由相關的一個元件，即視圖棧 ViewStack。

視圖堆疊初步

該元件在《文件》部分的最後一個章節《延遲實例化》已經出現過了。這裡將對一些細節部分進行解讀。下面再次給出該元件的原始碼。

ViewStack: { 
 xml: "<p id=&#39;viewstack&#39;/>",
 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+&#39;&#39;].concat(args)).hide();
   ptr = table[to].trigger("show", [ptr+&#39;&#39;].concat(args)).show();
  });
  return Object.defineProperty({}, "selected", { get: function() {return ptr;}});
 }
}

從靜態介面看，該元件允許提供靜態參數index，該參數是元件ViewStack 某一兒子元件物件的名稱，它用於指出哪一個子級元件會被最先呈現。請看下面的範例。

Example1: {
 xml: `<ViewStack index=&#39;bar&#39;>
    <button id=&#39;foo&#39;>foo</button>
    <button id=&#39;bar&#39;>bar</button>
   </ViewStack>`
}

該範例中，ViewStack 包含一值為 ​​bar 的屬性 index，表示元件在實例化時，元件物件 bar 會先呈現。而預設情況下，該元件的第一個子級元件會作為初始顯示物件。再從動態介面看，該元件的函數項目匯出了一個名為 selected 的唯讀屬性，該屬性用於指示目前顯示的子級元件物件。

透過事件切換目標元件物件

對於子層級元件物件之間切換，該元件的函數項並未匯出相關的接口，而是透過接收switch 事件來完成切換。請看下面的範例。

Example2: {
 xml: "<ViewStack id=&#39;viewstack&#39;>\
    <button id=&#39;foo&#39;>foo</button>\
    <button id=&#39;bar&#39;>bar</button>\
   </ViewStack>"
 fun: function (sys, items, opts) {
  sys.viewstack.on("click", "*", function(e) {
   var to = this + &#39;&#39; == "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=&#39;viewstack&#39;>\
    <button id=&#39;foo&#39;>foo</button>\
   </ViewStack>"
 fun: function (sys, items, opts) {
  var xml = "<button id=&#39;bar&#39;>bar</button>";
  sys.viewstack.append(xml).trigger("switch", "bar");
 }
}

該範例中，函數項目中動態新增了一個子層級元件，並且透過派發事件 switch 將目前顯示的視圖切換為剛新新增的視圖。

最佳化設定

元件 ViewStack 一般配合元件的延遲實例化功能使用。對於一些比較複雜的元件，這有助於加快顯示應用程式的初始頁面。下面做簡單示範。

Example4: {
 xml: `<ViewStack>
    <button id=&#39;foo&#39;>foo</button>
    <button id=&#39;bar&#39;>bar</button>
    <button id=&#39;alice&#39;>alice</button>
   </ViewStack>`
 map: { defer: "bar alice" }
}

此範例中，ViewStack 子層級包含三個子元件，其中元件物件bar 和alice 被設定為需要延遲實例化，只有當這兩個元件物件的show 函數被呼叫時，它們才真正開始實例化。

與HTML5 History API 的配合使用

這裡我們來看看如何讓元件ViewStack 與HTML5 History API 的配合使用。下面是一個簡單的例子。

Example5: {
 xml: `<ViewStack id=&#39;example&#39;>
    <button id=&#39;foo&#39;>foo</button>
    <button id=&#39;bar&#39;>bar</button>
    <button id=&#39;alice&#39;>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線上影片教學

2. JavaScript中文參考手冊

3. php.cn獨孤九賤（3）－JavaScript影片教學

以上是JavaScript框架（xmlplus）元件的介紹（七）路由（ViewStack)的詳細內容。更多資訊請關注PHP中文網其他相關文章！