JavaScript 프레임워크(xmlplus) 구성 요소 소개(7) 라우팅(ViewStack)

xmlplus는 프론트엔드 및 백엔드 프로젝트의 신속한 개발을 위한 JavaScript프레임워크입니다. 이 글은 xmlplus 컴포넌트 디자인 시리즈의 라우팅을 주로 소개하는데, 관심 있는 친구들은

을 참고하면 된다. 다양한 URL을 기반으로 한 페이지 전환. 서버 측에서는 다양한 URL 요청을 기반으로 관련 페이지가 피드백됩니다. 이 장에서는 넓은 의미에서 구성 요소 라우팅을 정의합니다. 수신된 다양한 명령에 따라 구성 요소 개체 는 서로 다른 하위 페이지를 표시합니다. 여기에서는 라우팅과 관련된 구성 요소, 즉 뷰 스택 ViewStack을 소개합니다.

Preliminary View Stack

이 구성 요소는 "문서화" 섹션의 마지막 장인 "지연된 인스턴스화"에 이미 나타났습니다. 여기에는 몇 가지 세부 사항이 설명되어 있습니다. 이 구성 요소의 소스 코드는 아래에 다시 제공됩니다.

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인 속성 인덱스가 포함되어 있으며, 이는 구성 요소가 인스턴스화될 때 구성 요소 개체 bar가 먼저 렌더링됨을 나타냅니다. 기본적으로 이 구성 요소의 첫 번째 하위 구성 요소는 초기 표시 객체로 사용됩니다. 동적 인터페이스를 보면 구성 요소의 함수 항목은 selected라는 읽기 전용 속성을 내보냅니다. 이 속성은 현재 표시된 하위 구성 요소 개체를 나타내는 데 사용됩니다.

이벤트를 통해 대상 컴포넌트 객체 전환

자식 컴포넌트 객체 간 전환을 위해 해당 컴포넌트의 기능 항목은 해당 인터페이스를 내보내지 않지만 전환 스위치 이벤트를 수신하면 완료됩니다. 아래 예를 참조하세요.

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 사이에서 전환됩니다. 즉, 두 페이지 간 전환은 해당 하위 항목을 통해 전환 이벤트를 전달하여 수행됩니다. 물체. 또한 페이지를 전환할 때 ViewStack 구성 요소는 이번에 표시된 페이지에 이벤트 표시를 전달하고, 이번에 숨겨진 페이지에 이벤트 숨기기를 필요에 따라 해당 페이지에서 수신할지 여부를 선택할 수 있습니다. 그리고 듣기 기능에서는 이전에 표시된 페이지의 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");
 }
}

이 예에서는 하위 구성 요소가 함수 항목에 동적으로 추가되고, 스위치 이벤트를 전달하여 현재 표시된 보기가 새로 추가된 보기로 전환됩니다.

최적화된 구성

구성 요소 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는 지연된 인스턴스화를 요구하도록 설정되어 있으며 이러한 두 구성 요소 개체의 표시 기능이 호출될 때만 실제로 시작됩니다. . 인스턴스화합니다.

HTML5 기록과 함께 사용 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 온라인 동영상 튜토리얼

JavaScript 중국어 참조 매뉴얼

3. php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼

위 내용은 JavaScript 프레임워크(xmlplus) 구성 요소 소개(7) 라우팅(ViewStack)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!