JavaScript フレームワーク (xmlplus) コンポーネントの概要 (7) ルーティング (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;}});
 }
}

このコンポーネントは、

static

インターフェースから、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 の値を持つ

attribute

index が含まれており、コンポーネントがインスタンス化されるときに、コンポーネント オブジェクトの bar が最初にレンダリングされることを示しています。デフォルトでは、このコンポーネントの最初の子コンポーネントが初期表示オブジェクトとして使用されます。動的インターフェースを見ると、このコンポーネントの function 項目は、現在表示されている子コンポーネント オブジェクトを示すために使用される 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 の間で切り替わります。つまり、2 つのページの間で切り替えが行われます。この切り替えは、対応する子オブジェクトを通じて switch イベントを送出することで実行されます。さらに、ページを切り替えるとき、コンポーネント ViewStack は、今回表示されているページに show イベントを送出し、今回非表示のページにイベント hidden を送出します。関連するページは、必要に応じてリッスンするかどうかを選択できます。また、リスニング機能では、前に表示していたページのIDと送信された関連データを取得できます。

子オブジェクトの動的追加と削除

Component 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 の子には 3 つのサブコンポーネントが含まれており、そのうちコンポーネント オブジェクト bar と alice は遅延インスタンス化を必要とするように設定されており、これら 2 つのコンポーネント オブジェクトの 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オンラインビデオチュートリアル

3.

php.cn Dugu Jiijian (3) - JavaScriptビデオチュートリアル

以上がJavaScript フレームワーク (xmlplus) コンポーネントの概要 (7) ルーティング (ViewStack)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。