SPA 디자인
1, 디자인 감각
별도의 전방 및 후방 단부
서버 스트레스를 감소
향상된 사용자 경험
미리 렌더링은 사전 렌더링 최적화 SEO를
별도의 전방 및 후방 단부 : 비즈니스 로직은 데이터의 백 - 엔드 처리의 선단을 수행하는 인터페이스와 결합도, 발전 효율을 감소시킨다.
서버 스트레스를 감소 : 응용 프로그램이 더 복잡 할 때 페이지가 항상 서비스 측면에 대해 가지 마세요, 시간의 10 페이지, 몇 페이지와 각 사용자의 운영, 단지 하나의 요청이있는 큰 정도 서버에 압력을 완화.
향상된 사용자 경험 : 예를 들어, 기존의 페이지에 따라 홈 세부 정보 페이지에서 점프, 홈 페이지 요청에 해당하는 다른 서버 세부 정보 페이지에 대한 요청, 모든 연결은 DNS 및 TCP 설립을 소비해야한다 연결 플러스 페이지 전송 프로세스는 또한 인터페이스 응답 시간을 포함, 사용자가이 모든 것을 경험할 수로, 하나의 페이지를 사용하여 다음 때, 시간이 반복적으로 다운로드 페이지가 존재하지 않는, 인터페이스 만 소비하는 시간, 크게 사용자 경험을 향상시킵니다.
단점 : SPA를 SEO의 일부 취약한 측면에, 검색 엔진에 특히 친절하지, 어떻게 만회하기 위해?
미리 렌더링은 사전 렌더링 최적화 검색 엔진 최적화 : 이것은 SEO의 취약한 측면에서 SPA 공정에 주로,이 문서는 치료에 초점을 맞추고, 당신은 찾아 갈 수 있습니다.
2 작동 원리
역사 API
해시시
SPA는 정말 무슨 일입니까? 이 플러그인 실행하면 달성하기 위해 여러 가지 방법이 있습니다, 아무런 문제가 없지만,이 플러그인 뒤의 원칙은 분명하다까지 우리는 VUE를 사용 할 수 있습니다, 그것은 기본 플러그인 라우터 페이지를 사용할 것인가?
역사 API 및 해시 달성 두 가지 주요 범주의 측면을 구현, 다음이 그 사이의 차이점은 무엇입니까?
더 우아한 최초의 역사 API,하지만 브라우저가 특정 요구 사항이, 두 번째 해시 특히 우아한 보지이지만, 그것은 최고의 프로그램 호환성이다.
2.1) 역사 API
상술 한 바와 같이, 대응 엔트리는 하나, 둘, 셋, 계정에 하나의 엔트리 포인트는, 페이지에 대응해야에 대응하는 페이지의 하나, 둘, 셋, 페이지 왼쪽이 입구의 역할을한다. 어떻게 그들 사이의 관계는에? 예를 들어, 나는 페이지가 열려있는 두 수 있도록 여기에 두 개의 열린 페이지를 기억하는 방법 입구 둘째, 클릭하면 서비스 측면을 요청하지 않는 것입니다, 지역 JS에 의해 제어되는 첫 번째 첫 번째 단계입니다.
두 번째는 브라우저가 앞뒤로, 또는 다른 제어, 그것은 해당 접속 페이지까지 반환하는 방법이 두 번째 단계는 클릭하는 것입니다.
SAP는 두 개의 작은 것들 기록 객체의 2 단계 동작이 제어 될 위의 물체 위에.도 기록의 중간 부분이 다리의 중간이 달성된다 onpopstate 및 pushState에 ,이 두 단계로 이루어진다.
pushState는 : 역사적 기록을 만들 수 있습니다.
onpopstate : 응답 다시 앞으로 브라우저.
코드 구현
설명 A는 라벨 a.html가 b.html는 JS는 클릭 이벤트 태그 history.pushState, pushState 세 가지 주요 변수가 존재하여 페이지 전환을위한 히스토리 기록을 만들 레지스터 두 가지도 있는데, 첫 번째 파라미터가 전송되고 두 번째는 페이지의 제목이며, 세 번째는 URL을 이동하는 것입니다.
그런 다음 onpopstate 듣기에 의해, 당신은 앞으로 브라우저를 알고 몇 가지 정보를 롤백 할 수 있습니다.
프리젠 테이션 차트 :
컷 페이지 a.html에 내가 주소 표시 줄 a.hmtl 변경을 클릭하면, 위의 바와 같이, 일어났다,하지만, 새로 고침 감정 이입 효과를 클릭하지 않는 페이지가 새 b.html이다.
때 우리는 롤백을 클릭하고 특정 정보를 표시합니다.
2.2) 해시
사실, 프로세스가 거의 해시와 역사, 차이는 다리가 변경된 것입니다. 아시다시피, 게시물, 경로, URL을이 해시를 검색 할 수 있습니다. 그래서 해시 그것을 수행하는 방법인가?
우리는 해시를 수정, 시간의 주소를 변경하면 스위치가 방금 말한 완료 할 수 있습니다, 당신은 변경이 발생하는 페이지의 주소를 알고, hashchange 이벤트를 수신하고있을 경우에 적절한 조치를 할 페이지 .
코드 구현
프리젠 테이션 차트 :
SPA 디자인 원리는 매듭입니다
당신은 평생 학습자가 될 수 있습니다