什麼是前後端同構

明白三個觀點：「後端襯着」指傳統的 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參數，加載跟前端共用的模板，合營數據舉行襯着，發送到瀏覽器。