JS進行前後端同構步驟詳解

這次帶給大家JS進行前後端同構步驟詳解，JS進行前後端同構的注意事項有哪些，下面就是實戰案例，一起來看一下。

什麼是前後端同構

#明確三個概念：「後端渲染」指傳統的ASP、Java 或PHP 的渲染機制；「前端渲染」指使用JS 來渲染頁面大部分內容，代表是現在流行的SPA 單頁應用；「同構渲染」指前後端共用JS，首次渲染時使用Node.js 來直出HTML。一般來說同構渲染是介於前後端中的共有部分。

感覺前端的確是折騰，之前還在流行前後端分離，現在怎麼又要做前後端同構了？

原因是現在流行的SPA前端單頁應用比較沉重，首次存取需要載入檔案較多，第一次載入過慢，使用者需要等待前端進行渲染頁面。而且不利於SEO及緩存，而且有一定的開發門檻。

前後端同構透過重複使用模板和JS文件，讓一份程式碼可以同時跑在伺服器和瀏覽器，首次渲染使用nodejs渲染頁面，之後使用SPA路由跳轉。可以有效減少使用者首次造訪的等待時間，並且對SEO比較友好，也便於快取。

專案簡介

本前後端同構專案主要分為兩個部分，一個是基於koa2的渲染伺服器，另一個是基於原生JS和zepto的前端SPA。

專案的特點是不使用vue和react等框架，門檻低，開發速度快，便於上手，比較輕巧，核心的router部分只有一百行左右的程式碼。適用於頁面互動較少，變化不頻繁的場景下，可以有效的提升效能和載入速度。

前端部分

前端部分的核心是路由部分，具體實作可以基於history API或是hash，網路上有很多實現，這次主要講下架構
前端部分採用MVC分層結構。

router層做的主要是建立路由範例，呼叫路由的get方法，綁定來自control層的函數給特定頁面。
形式如：

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

control層主要做的是載入跟後端共有的渲染模板和渲染數據，渲染出頁面後運行頁面函數

形式如：

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)
 })
}

view圖層即模板，這裡使用的是xtpl模板，在伺服器環境和前端環境下都支援渲染頁面

頁面函數的形式

頁面函數要求使用es6的模組寫法，配合webpack的按需載入功能

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

後端部分

使用koa2搭建的一個渲染伺服器，在收到前端傳來的頁面請求時，會向API伺服器請求數據，並識別頁面請求是否帶有json=1的參數，如果帶有，則為前端路由跳轉時的請求，直接返回數據即可，如果沒有帶json參數，載入跟前端共用的模板，配合資料進行渲染，傳送到瀏覽器。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue-devtools安裝步驟詳解

js與typescript中class使用詳解

######################################################## ##

以上是JS進行前後端同構步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！