집 >웹 프론트엔드 >JS 튜토리얼 >JS를 사용한 프런트엔드 및 백엔드 동형화 단계에 대한 자세한 설명

JS를 사용한 프런트엔드 및 백엔드 동형화 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-27 11:44:531205검색

이번에는 JS가 프론트엔드와 백엔드 동형성을 수행하는 단계에 대해 자세히 설명하겠습니다. JS가 프론트엔드와 백엔드 동형성을 수행하는 주의사항은 무엇인가요? , 살펴 보겠습니다.

프런트 엔드 및 백엔드 동형화란 무엇입니까

세 가지 개념을 명확하게 하십시오. "백엔드 렌더링"은 전통적인 ASP, Java 또는 PHP 렌더링 메커니즘을 의미하며 "프런트엔드 렌더링"은 JS를 사용하여 렌더링하는 것을 의미합니다. 요즘 인기 있는 SPA 단일 페이지 애플리케이션을 대표하는 페이지 콘텐츠의 대부분, "동형 렌더링"은 프런트엔드와 백엔드가 JS를 공유한다는 의미이며, Node.js는 렌더링 시 HTML을 직접 출력하는 데 사용됩니다. 처음으로. 일반적으로 동형 렌더링은 프런트엔드와 백엔드 간의 공통 부분입니다.

프런트엔드가 정말 힘든 작업인 것 같습니다. 이전에도 프론트엔드와 백엔드를 분리하는 것이 인기가 있었는데 왜 지금은 프론트엔드와 백엔드를 동형화해야 할까요?

그 이유는 인기 있는 SPA 프런트엔드 단일 페이지 애플리케이션이 상대적으로 무겁고 첫 번째 방문 시 로드하는 데 많은 파일이 필요하기 때문입니다. 첫 번째 로드가 너무 느리고 사용자가 프런트엔드가 완료될 때까지 기다려야 합니다. 페이지를 렌더링합니다. SEO 및 캐싱에 도움이 되지 않으며 특정 개발 임계값이 있습니다.

프런트엔드와 백엔드 동형성을 사용하면 템플릿과 JS 파일을 재사용하여 코드가 서버와 브라우저에서 동시에 실행될 수 있습니다. 첫 번째 렌더링에서는 nodejs를 사용하여 페이지를 렌더링한 다음 SPArouting을 사용하여 도약. 사용자가 처음 방문하는 대기 시간을 효과적으로 줄일 수 있으며, SEO에 친화적이고 캐시하기 쉽습니다.

프로젝트 소개

이 프런트엔드 및 백엔드 동형 프로젝트는 크게 두 부분으로 나누어집니다. 하나는 koa2 기반의 렌더링 서버이고, 다른 하나는 네이티브 JS 및 zepto 기반의 프런트엔드 SPA입니다.

이 프로젝트의 특징은 Vue, React 등의 프레임워크를 사용하지 않고, 임계값이 낮고, 개발 속도가 빠르며, 시작하기 쉽고, 코어 라우터 부분이 100개 정도의 라인밖에 안 된다는 점입니다. 코드. 페이지 상호 작용이 적고 변경이 자주 발생하지 않는 시나리오에 적합하며 성능과 로딩 속도를 효과적으로 향상시킬 수 있습니다.

프런트엔드 부분

프론트엔드 부분의 핵심은 라우팅 부분입니다. 구체적인 구현은 히스토리 API나 해시를 기반으로 할 수 있습니다. 이번에는 주로 다음과 같은 부분에 대해 이야기합니다.
프런트 엔드 부분은 MVC 계층 구조를 채택합니다.

라우터 계층은 주로 라우팅 예제를 생성하고 라우팅의 get 메서드를 호출하며 제어 계층의 기능을 특정 페이지에 바인딩합니다.
양식은 다음과 같습니다.

import control from '../control'
//路由的构造函数支持传入渲染函数，路由的全局名称，路由跳转前调用的钩子
router = new Router(render,'ROUTER',beforeFn)
router.get('/page/a', control.pageA')

컨트롤 레이어의 주요 목적은 백엔드와 공유되는 렌더링 템플릿 및 렌더링 데이터를 로드하고, 페이지를 렌더링한 후 페이지 기능을 실행하는 것입니다.

양식은 다음과 같습니다.

let control = {
 pageA(req,res) {
  //webpack的动态加载，代码分割功能
  import(/* webpackChunkName: "pageA" */'script/pageA').then(module=> {
  // 检测该页面是否已有服务器渲染好，是的话直接运行module.default
  //否则加载模板和数据进行渲染,最后再调用页面函数
  if(this.needRender(module.default)) {
  //加载数据时访问的地址就是当前准备渲染的页面地址，只是加上了json=1的参数
   loadData('pageA').then(data => 
    res.render(xtpl,data,module.default))
  }
 }
}
// 捕捉webpack热更新，让他只进行相当于页面跳转的操作而不是刷新页面
if(module.hot) {
 module.hot.accept(['script/pageA'], () => {
  control[ROUTER.req.currentControl].call(ROUTER,null,ROUTER.res)
 })
}

뷰 레이어가 템플릿이고, 여기서는 xtpl을 사용합니다. 템플릿은 서버 환경과 프런트 엔드 환경 모두에서 페이지 렌더링을 지원합니다.

페이지 기능의 형태

페이지 기능은 es6 모듈 작성을 사용해야 하며, webpack의 온디맨드 로딩 기능과 연동하여 사용됩니다

export default () => {
 window.addEventListener('scroll', fn)
//页面函数支持返回一个卸载函数，在页面离开的时候会被调用
//主要用于内存的释放，定时器的清除，事件监听的移除等等
 return function () {
  window.removeEventListener('scroll', fn)
 }
}

백엔드 부분

koa2가 구축한 렌더링 서버는 프론트엔드에서 페이지 요청을 받으면 API 서버에 데이터를 요청하고, 페이지 요청에 json=1 매개변수가 포함되어 있는지 확인하세요. 그렇다면 프런트엔드 경로가 점프할 때 사용됩니다. json 매개변수가 없으면 프런트엔드와 공유되는 템플릿을 로드하세요. , 데이터와 함께 렌더링하고 브라우저로 보냅니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!