spaghettify
1.0.0
Spaghettify는 AJAX 기반 탐색 및 DOM 요소 상태 지속성 기능을 사용하여 모든 정적 HTML 사이트를 단일 페이지 애플리케이션으로 전환합니다. 이를 위해 DOM 인터셉터와 링크 클릭 이벤트를 캡처하는 미들웨어 퍼널링 프로세서를 구현하고, XHR을 통해 요청된 각 문서를 가져오고, 브라우저 문서를 새로 고치기 전에 일련의 미들웨어 기능을 통해 스트리밍하여 응답을 다이제스트합니다.
이러한 미들웨어 기능은 단일 책임 원칙을 준수하고 전체 단계 파이프라인을 준수하는 플러그형 I/O 핸들러입니다. 이는 현재 페이지 DOM을 변경하지 않는 onBeforeComplete 미들웨어 후크와 변경 사항을 적용하는 onAfterComplete 미들웨어 후크로 분류될 수 있습니다. (따라서 변경) 주입된 후 현재 페이지 DOM에서 직접 변경됩니다.
전체 프로젝트는 TypeScript를 기반으로 구축되었으며 MSIE11과 같은 기존 레거시 브라우저에 대한 지원을 확장하기 위해 여러 폴리필 및 코딩 전략을 구현합니다.
개발 또는 프로덕션 모드에서 이 프로젝트를 실행하기 위한 최소 요구 사항과 해당 개발 스크립트는 node v12.16.0 및 npm v.6.14.15 이상 버전입니다. 아마도 이 프로젝트는 이전 버전의 node 및 npm 에서 원활하게 실행될 것이지만 최신 LTS 버전을 사용하는 것이 좋습니다.
이 프로젝트는 개발 모드에서 코드를 컴파일하고 빌드를 실행하여 데모 사이트 파일을 제공하고 코드 최적화를 처리하기 위해 BabelJS 및 Webpack을 사용합니다.
BabelJS 및 Webpack 과의 모든 상호 작용은 사용자의 편의를 위해 맞춤형 npm 스크립트로 추상화되었습니다.
개발 환경 또는 프로덕션 빌드를 생성하는 첫 번째 단계로, yarn 또는 npm install 실행하여 이 프로젝트에 필요한 모든 종속성을 가져오십시오.
터미널 창에서 yarn build 또는 npm run build 실행하세요.
프로젝트 번들러는 전체 애플리케이션 트리를 탐색하고 spaghettify.js 로 번들된 /dist 폴더에 JavaScript 아티팩트를 빌드합니다. 귀하의 편의를 위해 다른 유용한 번들도 여기에 저장됩니다.
npm 레지스트리에서 Spaghettiify를 가져올 수 있나요? 이 글을 쓰는 시점에서 프로젝트 우선 순위는 테스트 범위를 좀 더 늘리고 사용자 제공 미들웨어 후크에 대한 확장된 지원을 통해 API 기능을 확장하는 것입니다. 당분간 Spaghettify는 브라우저 종속성으로 소비될 예정이지만 이를 NPM 패키지로 배포하는 것이 로드맵에 있습니다. 잠시 후 다시 업데이트를 확인해 주세요.
전역 토글, 경로 인터셉터, 제외 및 상태 지속성 속성 플래그, 그리고 마지막으로 로딩 진행률 표시기 및 핸들러를 제공하는 편리한 API를 통해 Spaghettify를 인스턴스화하고 상호 작용할 수 있습니다.
Spaghettify를 성공적으로 컴파일한 후에는 다음과 같이 이를 애플리케이션으로 가져와 인스턴스화할 수 있습니다.
< script type =" text/javascript " src =" /dist/spaghettify.js " > </ script >
< script type =" text/javascript " >
new Spaghettify ( {
enabled : true ,
routes : [ '*.html' , 'content/*' ] ,
excludeByAttr : 'no-spa' ,
loadProgress : true ,
persistAttr : 'data-persist' ,
} ) ;
</ script >보시다시피 Spaghettify는 인스턴스화 시 구성 개체를 사용할 수 있습니다. 모든 필드는 선택 사항 이며 전체 구성 개체 자체도 선택 사항입니다. 제공되지 않은 경우 Spaghettify는 아래 표에 설명된 대로 기본 옵션으로 인스턴스화됩니다.
Spaghettify 구성 설정 개체는 다음과 같이 요약될 수 있습니다.
| 필드 | 유형 | 기본 | 설명 |
|---|---|---|---|
enabled | Boolean | true | 인스턴스화 시 Spaghettiify를 활성화 또는 비활성화합니다. |
routes | String[] | ['*'] | Spaghettify를 통해 가로채고 제공될 경로의 패턴을 정의합니다. 글로벌 토큰을 지원합니다. |
excludeByAttr | String | undefined | 제외 데이터 속성 토큰을 정의합니다( data- 접두사가 있거나 없음). 이 속성으로 장식된 링크는 Spaghettiify에 의해 우회됩니다. |
loadProgress | Boolean Function | false | 내장 진행률 표시줄을 활성화할지 여부를 결정합니다. 또한 로드 시 진행률 정수를 수신하는 함수 핸들러를 사용할 수도 있습니다. |
persistAttr | String | undefined | UI 상태 지속성 플래그 데이터 속성을 정의합니다( data- 접두사가 있거나 없음). 이 속성으로 장식된 요소는 페이지 탐색 전반에 걸쳐 상태를 유지합니다. |
모든 구성 옵션(및 옵션 페이로드 자체)은 선택 사항이며 명시적으로 선언되지 않은 경우 기본값을 사용합니다.
Spaghettify는 이벤트 핸들러를 적합한 링크에 내부적으로 바인딩하여 현재 문서와 상호 작용합니다. 메모리 누수를 방지하기 위해 또는 다시 복원될 때까지 Spaghettify를 중지하려면 다음과 같이 이를 파기해야 합니다:
< script type =" text/javascript " >
// First, we instantiate Spaghettify
const spa = new Spaghettify ( ) ;
// Then we dispose it after use
spa . destroy ( ) ;
</ script > 모든 링크는 Spaghettiify에 의해 차단 대상으로 구성됩니다. 내부 이벤트 관리자 기계는 routes glob 토큰에 대해 링크 href 값을 테스트하여 링크가 AJAX 요청으로 처리될 수 있는지 여부를 평가합니다.
그러나 data- 접두사가 있든 없든 속성 값으로 excludeByAttr 옵션을 구성하여 이 단계를 미리 우회할 수 있습니다.
그럼에도 불구하고 의미론을 위해 Spaghettify는 완전한 기능을 갖춘 속성으로 구성된 링크 요소만 고려합니다.
< script type =" text/javascript " >
new Spaghettify ( {
excludeByAttr : 'skip-me' ,
} ) ;
</ script >
<!-- Spaghettify will disregard the following link -->
< a href =" foo.html " data-skip-me > Skip this link </ a >구성된 속성은 임의의 값으로 채워지거나 전혀 채워지지 않을 수 있습니다. Spaghettiify는 어쨌든 그 값을 무시합니다.
이미 살펴본 것처럼 loadProgress 구성 옵션은 Boolean 기본 값 또는 함수 핸들러를 사용할 수 있습니다.
< script type =" text/javascript " >
new Spaghettify ( {
loadProgress : true ,
} ) ;
</ script > 명시적으로 구성하지 않거나 false 로 설정하면 진행률 표시줄 표시기가 표시되지 않습니다. true 로 제공되면 Spaghettify는 뷰포트 상단에 애니메이션 빨간색 진행 표시줄 표시기를 표시합니다. 진행률 표시줄에는 실제 다운로드 진행률이 표시됩니다.
그러나 소비자는 다운로드 진행률 정보를 렌더링하기 위해 자신만의 시각적 솔루션을 구현하기를 원할 수 있습니다. Spaghettify는 HXR을 통해 페이지가 요청되고 다운로드될 때 0 에서 100 사이의 값을 취하는 서명에 정수 값 매개변수를 예상하는 로드 진행 핸들러를 제공하여 이러한 문제를 해결합니다.
< script type =" text/javascript " >
new Spaghettify ( {
loadProgress : function onLoad ( progress ) {
console . log ( progress ) ; // Will log values from 0 to 100
} ,
} ) ;
</ script > Spaghettify는 페이지 탐색 전반에 걸쳐 선택된 주석이 달린 DOM 노드의 상태를 유지하기 위한 실험적 API를 구현합니다. 그렇게 하려면 persistAttr 옵션에서 값 토큰을 구성한 다음 각 고유 값이 있는 동등한 data- 속성으로 상태를 유지하려는 DOM 요소에 주석을 추가하면 됩니다.
< script type =" text/javascript " >
new Spaghettify ( {
persistAttr : 'persist-id' ,
} ) ;
</ script >
< input type =" text " data-persist-id =" my-input " /> 값 앞에 data- 명시적으로 붙일 수도 있고 그렇지 않을 수도 있지만 Spaghettify에서는 전체 데이터 속성 구문으로 유지되도록 DOM 요소에 주석을 달아야 합니다.
참고 : 속성 값은 고유해야 합니다. Spaghettify는 서로 다른 유형의 두 개 이상의 요소가 동일한 속성 값으로 구성된 경우 예외를 발생시킵니다.
지속성은 전체 DOM Node 기반으로 적용되므로 요소의 내부 HTML뿐만 아니라 입력 컨트롤의 기본 터치 상태도 포함한다는 점을 강조할 가치가 있습니다. 그리고 이 모든 것은 외부 HTML의 변경 사항과 관계가 없습니다.
콘솔에서 yarn dev 또는 npm run dev 실행하여 개발 환경을 생성할 수 있습니다.
시스템은 모든 아티팩트를 생성하고 http://localhost:3000(또는 --port=PORT 매개변수를 dev 명령에 추가하는 경우 선택한 다른 포트)에서 샌드박스 사이트(자세한 내용은 아래 참조)를 제공합니다. 여기서 PORT 원하는 포트)를 감시 모드 로 설정하므로 소스 코드가 변경되면 애플리케이션이 다시 컴파일됩니다.
샌드박스 사이트는 실제 환경에서 Spaghettiify를 디버깅하기 위한 놀이터 및 테스트 경기장 역할을 하는 작고 매우 단순한 웹 애플리케이션입니다. 다음과 같은 주요 기능을 설명하는 다양한 계층적 페이지 세트를 통해 매우 단순한 스타일을 제공합니다.
index.html 에는 데모용 Spaghettify 인라인 인스턴스가 포함되어 있습니다. 다른 모든 문서는 가져온 스크립트와 같은 인스턴스를 구현합니다. 각 문서에서 Spaghettiify를 가져올 필요는 없으며 항목 하나만 가져올 필요가 있습니다. 그러나 이를 통해 데모 목적으로 브라우저 창을 다시 로드한 후 모든 문서에서 Spaghettiify를 실행할 수 있습니다. 실제 생산 시나리오에서 Spaghettify는 항목 위치에서 한 번만 가져오고 인스턴스화할 수 있습니다./sandbox 루트 수준과 하위 /sandbox/content 하위 폴더 사이에 분산되어 있으므로 기여자는 필요한 경우 하위 폴더를 가리키는 링크 선택기를 가지고 놀 수 있습니다./sandbox/content 내의 페이지는 Spaghettify가 필요할 때 소화, 재주입 및 실행하는 인라인 또는 가져온 사용자 정의 JavaScript 기능을 제공합니다. ESLint는 현재 Spaghettify 코드베이스에서 활성화되어 있으며 프로젝트 빌드 시 Linting 감사가 시작됩니다. 변경 사항이 적용될 때 Linting 평가를 자동으로 제공하도록 IDE를 구성할 수 있습니다. 또한 터미널 콘솔에서 npm run lint 또는 yarn lint 실행하여 언제든지 코드 Linting을 실행할 수 있습니다.
터미널 콘솔에서 npm test 또는 yarn test 실행하여 코드베이스에 테스트를 도입하거나 기존 테스트를 실행할 수 있습니다. 코드 적용 범위 데이터는 /coverage/lcov-report 에서 편리한 형식의 문서로 수집되고 저장됩니다. 화면상 적용 범위 보고를 위해서는 test 명령에 --coverage 매개변수를 추가하세요.
Coveralls에서 포괄적인 테스트 범위 보고서를 온라인으로 확인할 수도 있습니다.
저작권 2021 파블로 딜레만
본 소프트웨어 및 관련 문서 파일("소프트웨어")의 사본을 취득한 모든 사람에게 사용, 복사, 수정, 병합에 대한 권리를 포함하되 이에 국한되지 않고 제한 없이 소프트웨어를 취급할 수 있는 권한이 무료로 부여됩니다. , 소프트웨어 사본을 게시, 배포, 재라이센스 부여 및/또는 판매하고, 소프트웨어를 제공받은 사람에게 다음 조건에 따라 그렇게 하도록 허용합니다.
위의 저작권 고지와 본 허가 고지는 소프트웨어의 모든 사본 또는 상당 부분에 포함됩니다.
소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해에 대한 보증을 포함하되 이에 국한되지 않고 명시적이든 묵시적이든 어떠한 종류의 보증 없이 "있는 그대로" 제공됩니다. 어떠한 경우에도 작성자나 저작권 보유자는 계약, 불법 행위 또는 기타 행위로 인해 소프트웨어나 사용 또는 기타 거래와 관련하여 발생하는 모든 청구, 손해 또는 기타 책임에 대해 책임을 지지 않습니다. 소프트웨어.
