使用原生JS進行前后端同構

voyagelab 發布于2019-08-22 16:31 / 3109人閱讀

摘要：什么是前后端同構明確三個概念后端渲染指傳統的或的渲染機制前端渲染指使用來渲染頁面大部分內容，代表是現在流行的單頁面應用同構渲染指前后端共用，首次渲染時使用來直出。

什么是前后端同構

明確三個概念：「后端渲染」指傳統的 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參數，加載跟前端共用的模板，配合數據進行渲染，發送到瀏覽器。

GPU云服務器云服務器 js前后端分離框架前后端前后端分離 webrtc前后端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94431.html

無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構渲染

摘要：它會檢測出最大靜態子樹就是不需要動態性的子樹并且從渲染函數中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術，這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

fish 2019-08-29 11:27 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構渲染

摘要：它會檢測出最大靜態子樹就是不需要動態性的子樹并且從渲染函數中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術，這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

30e8336b8229 2019-08-22 10:40 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構渲染

摘要：它會檢測出最大靜態子樹就是不需要動態性的子樹并且從渲染函數中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術，這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

Pluser 2019-08-01 15:52 評論0 收藏0
React同構直出優化總結

摘要：同構的關鍵要素完善的屬性及生命周期與客戶端的時機是同構的關鍵。的一致性在前后端渲染相同的，將輸出一致的結構。以上便是在同構服務端渲染的提供的基礎條件。可以將封裝至的中，在服務端上生成隨機數并傳入到這個中，從而保證隨機數在客戶端和服務端一致。原文地址 React 的實踐從去年在 PC QQ家校群開始，由于 PC 上的網絡及環境都相當好，所以在使用時可謂一帆風順，偶爾遇到點小磕絆，也能夠...

alaege 2019-08-21 10:53 評論0 收藏0
FEDAY2016之旅

摘要：前戲補上參會的完整記錄，這個問題從一開始我就是準備自問自答的，希望可以通過這種形式把大會的干貨分享給更多人。 showImg(http://7xqy7v.com1.z0.glb.clouddn.com/colorful/blog/feday2.png); 前戲 2016/3/21 補上參會的完整記錄，這個問題從一開始我就是準備自問自答的，希望可以通過這種形式把大會的干貨分享給更多人。 ...

red_bricks 2019-08-19 17:55 評論0 收藏0