JS進行前後端同構步驟詳解
- php中世界最好的语言原創
- 2018-04-27 11:44:531167瀏覽
這次帶給大家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中文網其它相關文章！
推薦閱讀：
######################################################## ##以上是JS進行前後端同構步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！