push state 다운로드 - push state 소스 코드 다운로드

push state

기타 카테고리

1.0.0

다운로드

하이 푸시 상태

hy-push-state는 웹 페이지를 웹 앱으로 전환할 수 있는 웹 구성 요소입니다. 구성 요소는 새 콘텐츠(이전의 "ajax")를 동적으로 로드하고 흰색 플래시, 스타일 없는 콘텐츠 플래시 등을 발생시키지 않고 현재 페이지에 삽입합니다.

정적 웹 사이트를 동적 웹 앱으로 전환하세요. {:.선두}

hy-push-state는 pjax 및 smoothState와 유사하지만 고급 프리페칭 로직을 제공하고 내부 기능을 더 효과적으로 제어하여 고급 페이지 전환 애니메이션을 활성화할 수 있습니다.

hy-push-state는 이미 Hydejack{:.external} Jekyll 테마의 일부로 수백 개의 사이트에서 사용되고 있습니다.

참고 : 현재 버전은 아직 시험판입니다. 공개 API는 여전히 중요한 방식으로 변경될 수 있습니다. {:.메시지}

예

webcomComponents.org에서 이 페이지를 볼 때 아래 예는 대화형 데모로 렌더링됩니다. 그렇지 않은 경우 아래의 독립 실행형 예를 찾으세요.

 < hy-push-state initial-href =" https://qwtel.com/hy-push-state/example/simple/ " prefetch >
  < p >
    < a href =" ./1.html " > Page 1 </ a >
    < a href =" ./2.html " > Page 2 </ a >
    < a href =" ./3.html " > Page 3 </ a >
  </ p >
  < p > Super simple example. </ p >
</ hy-push-state >

GitHub, npm 또는 다른 곳에서 이 문서를 볼 때 독립 실행형 예제를 확인할 수 있습니다.

WebComponent 예{:.external}
jQuery 예{:.external}
바닐라 JS 예{:.external}
믹스인 예{:.external}

특허

hy-push-state 는 오픈 소스이지만 무료는 아닙니다.

GPL-3.0 라이선스에 따라 구성 요소를 사용할 수 있지만 이는 GPLv3 호환 라이선스에 따라 코드를 공개할 의지가 있어야 함을 의미합니다.

이것이 허용되지 않는 경우에는 다음 상용 라이센스를 사용할 수 있습니다.

	개인의	시작	기업
# 개발자	2	15	∨
특허	개인의	시작	기업
가격	$29	$249	$499
	{:.gumroad-button} 구매	{:.gumroad-button} 구매	{:.gumroad-button} 구매
{:.스트레치 테이블}

용법

hy-push-state는 다양한 방법으로 사용될 수 있습니다:

웹 구성 요소로서 ES6 모듈 및 HTML 가져오기 모두
jQuery 플러그인으로
바닐라 JavaScript 클래스로
번들 프런트엔드 코드의 일부로.
(고급) ES6 Mixin과 같은 자체 구성 요소 계층 구조의 일부일 수 있습니다.

웹 구성 요소

웹 구성 요소는 hy-push-state를 사용하는 데 선호되는 방법이지만 브라우저나 폴리필에서 지원이 필요합니다. 페이지에 이를 포함하는 방법에는 여러 가지가 있습니다.

번들 ES6 모듈

이 버전은 모든 주요 브라우저에서 가장 빨리 기본 지원을 받게 될 버전입니다.

 < script type =" module " href =" https://unpkg.com/hy-push-state/dist/webcomponent/module " > </ script >

< hy-push-state replace-ids =" main,aside " prefetch >
  < main id =" main " > <!-- ... --> </ main >
  < aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state >

HTML 가져오기

일부 브라우저는 HTML 가져오기를 구현하지 않기로 결정했지만 쉽게 폴리필됩니다.

 < link rel =" import " href =" https://unpkg.com/hy-push-state/dist/webcomponent/hy-push-state.html " >

< hy-push-state replace-ids =" main,aside " prefetch >
  < main id =" main " > <!-- ... --> </ main >
  < aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state >

번들로 제공되지 않은 ES6 모듈(실험용)

unpkg CDN에서 구성 요소를 로드할 때 ?module 쿼리 매개 변수를 추가하여 소스를 직접 가져올 수 있습니다.

 < script type =" module " src =" https://unpkg.com/hy-push-state/src/webcomponent/module?module " > </ script >

< hy-push-state replace-ids =" main,aside " prefetch >
  < main id =" main " > <!-- ... --> </ main >
  < aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state >

이 접근 방식을 사용하면 수백 개의 개별 HTTP 요청(각 모듈당 하나씩)이 발생하며 테스트 및 프로토타입에만 사용됩니다. 번들되지 않은 ES6 모듈을 가져오는 것은 번들 배포판보다 훨씬 느리며 가까운 미래에도 그대로 유지될 것입니다.

이 접근 방식의 한 가지 장점은 Hydejack 구성 요소 제품군에서 두 개 이상의 구성 요소를 사용할 때 공유 종속성이 두 번 포함되지 않는다는 것입니다. 그러나 다음과 같은 경우에는 webpack을 설정하는 것이 더 나은 솔루션입니다.

번들러

webpack이나 롤업 같은 프론트엔드 번들러와 함께 hy-push-state를 사용할 수 있습니다. npm 또는 Yarn을 사용하여 구성 요소를 설치하고 코드에서 소스를 가져오기만 하면 됩니다.

 import 'hy-push-state/src/webcomponent/module' ;

사용자 정의 요소가 define 되는 시점을 제어하려면 다음과 같이 HTMLElement 가져올 수도 있습니다.

 import { HyPushStateElement } from 'hy-push-state/src/webcomponent' ;
// ...
customElements . define ( 'hy-push-state' , HyPushStateElement ) ;

hy-push-state 의 모든 종속성은 유효한 ES6 모듈이므로 webpack의 ModuleConcatenationPlugin 과 인라인될 수 있습니다.

선적 서류 비치

옵션
행동 양식
이벤트

페이지 미리 가져오기

hy-push-state는 사용자가 링크에 마우스를 올리거나, 초점을 맞추거나, 터치( touchstart -ing)하여 새 페이지가 곧 열리겠다고 "힌트"하는 즉시 HTTP 요청을 시작합니다. 추측이 정확하면 요청이 100ms 이상 먼저 시작되므로 이미 빠른 웹앱 스타일 페이지 교체 외에도 사이트의 인식 속도가 더욱 향상됩니다.

이 기능의 다른 구현과 달리 사용자가 다른 링크를 암시하면 현재 프리페치 요청이 취소되므로 한 번에 하나 이상의 프리페치 요청이 진행되지 않습니다. 이렇게 하면 도착 시 삭제될 요청으로 인해 네트워크가 막히는 것을 방지할 수 있습니다. 이는 느린 3G 연결에서 필수적입니다.

예를 들어, qwtel.com의 사이드바에 있는 링크에 마우스를 올리면 아래와 같은 타임라인이 생성됩니다.

{:.lead} 요청 미리 가져오기의 Chrome 개발자 콘솔 스크린샷입니다. {:.수치}

고급 애니메이션

hy-push-state를 사용 하면 Hydejack 및 최첨단 웹 앱에서 사용되는 것과 같은 고급 페이지 전환 애니메이션을 구축할 수 있습니다. 이는 다른 코드, GC 중단 또는 일반적으로 느린 장치로 인해 발생하는 더 작은 지연을 설명하기 위해 시간 기반이 아닌 약속 기반일 수 있습니다.

Web Animations API를 사용하는 간단한 페이드아웃 애니메이션 코드는 다음과 같습니다.

 pushStateEl . addEventListener ( 'hy-push-state-start' , ( { detail } ) =>
  detail . transitionUntil ( new Promise ( res =>
    document
      . getElementById ( 'my-content' )
      . animate ( [ { opacity : 1 } , { opacity : 0 } ] , { duration : 250 } )
      . addEventListener ( 'finish' , res )
  ) )
) ;

시간 기반 애니메이션도 가능하며 duration 옵션으로 구성됩니다.

골드 스탠다드

이 구성 요소는 웹 구성 요소 골드 표준을 따릅니다.

원천

소스 코드는 리터럴 프로그래밍 스타일로 작성되었으며 합리적으로 접근 가능해야 합니다. 그러나 RxJS에 대한 약간의 지식이 필요합니다.

핵심 기능은 구성 요소의 프레임워크별 버전을 생성하는 데 사용되는 mixin / index.js 에서 구현됩니다.

jquery
- index.js
mixin
- constants.js
- event-listeners.js
- events.js
- fetching.js
- history.js
- index.js
- methods.js
- operators.js
- script-hack.js
- scrolling.js
- setup.js
- update.js
vanilla
- index.js
webcomponent
- html-import.s
- index.js
- module.js
common.js
index.js
url.js

크기

축소된 번들의 크기는 약 90kb 또는 gzip으로 압축하면 ~20kb입니다. 대부분은 RxJS에서 나왔습니다. 프로젝트에서 이미 RxJS를 사용하고 있거나 Hydejack 구성 요소 제품군의 구성 요소를 두 개 이상 사용하고 있는 경우 프런트엔드 번들러 사용을 고려하세요.

크기	파일
84K	`dist/jquery/index.js`
19K	`dist/jquery/index.js.gz`
80K	`dist/mixin/index.js`
18K	`dist/mixin/index.js.gz`
81K	`dist/vanilla/index.js`
18K	`dist/vanilla/index.js.gz`
86K	`dist/webcomponent/html-import.js`
19K	`dist/webcomponent/html-import.js.gz`
86K	`dist/webcomponent/index.js`
19K	`dist/webcomponent/index.js.gz`
86K	`dist/webcomponent/module.js`
19K	`dist/webcomponent/module.js.gz`