成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用原生JS進(jìn)行前后端同構(gòu)

voyagelab / 3107人閱讀

摘要：什么是前后端同構(gòu)明確三個(gè)概念后端渲染指?jìng)鹘y(tǒng)的或的渲染機(jī)制前端渲染指使用來(lái)渲染頁(yè)面大部分內(nèi)容，代表是現(xiàn)在流行的單頁(yè)面應(yīng)用同構(gòu)渲染指前后端共用，首次渲染時(shí)使用來(lái)直出。

什么是前后端同構(gòu)

明確三個(gè)概念：「后端渲染」指?jìng)鹘y(tǒng)的 ASP、Java 或 PHP 的渲染機(jī)制；「前端渲染」指使用 JS 來(lái)渲染頁(yè)面大部分內(nèi)容，代表是現(xiàn)在流行的 SPA 單頁(yè)面應(yīng)用；「同構(gòu)渲染」指前后端共用 JS，首次渲染時(shí)使用 Node.js 來(lái)直出 HTML。一般來(lái)說(shuō)同構(gòu)渲染是介于前后端中的共有部分。

感覺前端的確是折騰，之前還在流行前后端分離，現(xiàn)在怎么又要做前后端同構(gòu)了？

原因是現(xiàn)在流行的SPA前端單頁(yè)面應(yīng)用比較沉重，首次訪問需要加載文件較多，第一次加載過(guò)慢，用戶需要等待前端進(jìn)行渲染頁(yè)面。而且不利于SEO及緩存，并且有一定的開發(fā)門檻。

前后端同構(gòu)通過(guò)復(fù)用模板和JS文件，讓一份代碼可以同時(shí)跑在服務(wù)器和瀏覽器，首次渲染使用nodejs渲染頁(yè)面，之后使用SPA路由跳轉(zhuǎn)?？梢杂行p少用戶首次訪問的等待時(shí)間，并且對(duì)SEO比較友好，也便于緩存。

項(xiàng)目簡(jiǎn)介

本前后端同構(gòu)項(xiàng)目主要分為兩個(gè)部分，一個(gè)是基于koa2的渲染服務(wù)器，另一個(gè)是基于原生JS和zepto的前端SPA。

項(xiàng)目的特點(diǎn)是不使用vue和react等框架，門檻低，開發(fā)速度快，便于上手，比較輕巧，核心的router部分只有一百行左右的代碼。適用于頁(yè)面交互較少，變化不頻繁的場(chǎng)景下，可以有效的提升性能和加載速度。

前端部分

前端部分的核心是路由部分，具體實(shí)現(xiàn)可以基于history API或是hash，網(wǎng)上有很多實(shí)現(xiàn)，這次主要講下架構(gòu)
前端部分采用MVC分層結(jié)構(gòu)。

router層做的主要是創(chuàng)建路由示例，調(diào)用路由的get方法，給特定頁(yè)面綁定來(lái)自control層的函數(shù)。
形式如：

import control from "../control"

//路由的構(gòu)造函數(shù)支持傳入渲染函數(shù)，路由的全局名稱，路由跳轉(zhuǎn)前調(diào)用的鉤子
router = new Router(render,"ROUTER",beforeFn)

router.get("/page/a", control.pageA")

control層主要做的是加載跟后端共有的渲染模板和渲染數(shù)據(jù)，渲染出頁(yè)面后運(yùn)行頁(yè)面函數(shù)

形式如：

let control = {
  pageA(req,res) {
    //webpack的動(dòng)態(tài)加載，代碼分割功能
    import(/* webpackChunkName: "pageA" */"script/pageA").then(module=> {
    // 檢測(cè)該頁(yè)面是否已有服務(wù)器渲染好，是的話直接運(yùn)行module.default
    //否則加載模板和數(shù)據(jù)進(jìn)行渲染,最后再調(diào)用頁(yè)面函數(shù)
    if(this.needRender(module.default)) {
    //加載數(shù)據(jù)時(shí)訪問的地址就是當(dāng)前準(zhǔn)備渲染的頁(yè)面地址，只是加上了json=1的參數(shù)
      loadData("pageA").then(data => 
        res.render(xtpl,data,module.default))
    }
  }
}

// 捕捉webpack熱更新，讓他只進(jìn)行相當(dāng)于頁(yè)面跳轉(zhuǎn)的操作而不是刷新頁(yè)面
if(module.hot) {
  module.hot.accept(["script/pageA"], () => {
    control[ROUTER.req.currentControl].call(ROUTER,null,ROUTER.res)
  })
}

view層即模板，這里使用的是xtpl模板，在服務(wù)器環(huán)境和前端環(huán)境下都支持渲染頁(yè)面

頁(yè)面函數(shù)的形式

頁(yè)面函數(shù)要求使用es6的模塊寫法，配合webpack的按需加載功能

export default () => {
  window.addEventListener("scroll", fn)
//頁(yè)面函數(shù)支持返回一個(gè)卸載函數(shù)，在頁(yè)面離開的時(shí)候會(huì)被調(diào)用
//主要用于內(nèi)存的釋放，定時(shí)器的清除，事件監(jiān)聽的移除等等
  return function () {
    window.removeEventListener("scroll", fn)
  }
}
后端部分

使用koa2搭建的一個(gè)渲染服務(wù)器，在收到前端傳來(lái)的頁(yè)面請(qǐng)求時(shí)，會(huì)向API服務(wù)器請(qǐng)求數(shù)據(jù)，并識(shí)別頁(yè)面請(qǐng)求是否帶有json=1的參數(shù)，如果帶有，則為前端路由跳轉(zhuǎn)時(shí)的請(qǐng)求，直接返回?cái)?shù)據(jù)即可，如果沒有帶json參數(shù)，加載跟前端共用的模板，配合數(shù)據(jù)進(jìn)行渲染，發(fā)送到瀏覽器。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94431.html

相關(guān)文章

  • 無(wú)痛學(xué)會(huì)各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

    摘要：它會(huì)檢測(cè)出最大靜態(tài)子樹就是不需要?jiǎng)討B(tài)性的子樹并且從渲染函數(shù)中萃取出來(lái)。這樣在每次重渲染的時(shí)候，它就會(huì)直接重用完全相同的同時(shí)跳過(guò)比對(duì)。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。 新增：哈哈，最近又推出了 vue 的文章，在這里放個(gè)鏈接~手把手教你從零寫一個(gè)簡(jiǎn)單的 VUE 感謝有人看我扯技術(shù)，這篇文章主要介紹最近非?；鸬膙ue2前端框架的特點(diǎn)和vue2+vuex2+we...

    fish 評(píng)論0 收藏0

  • 無(wú)痛學(xué)會(huì)各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

    摘要：它會(huì)檢測(cè)出最大靜態(tài)子樹就是不需要?jiǎng)討B(tài)性的子樹并且從渲染函數(shù)中萃取出來(lái)。這樣在每次重渲染的時(shí)候，它就會(huì)直接重用完全相同的同時(shí)跳過(guò)比對(duì)。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。 新增：哈哈，最近又推出了 vue 的文章，在這里放個(gè)鏈接~手把手教你從零寫一個(gè)簡(jiǎn)單的 VUE 感謝有人看我扯技術(shù)，這篇文章主要介紹最近非?；鸬膙ue2前端框架的特點(diǎn)和vue2+vuex2+we...

    30e8336b8229 評(píng)論0 收藏0

  • 無(wú)痛學(xué)會(huì)各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

    摘要：它會(huì)檢測(cè)出最大靜態(tài)子樹就是不需要?jiǎng)討B(tài)性的子樹并且從渲染函數(shù)中萃取出來(lái)。這樣在每次重渲染的時(shí)候，它就會(huì)直接重用完全相同的同時(shí)跳過(guò)比對(duì)。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。 新增：哈哈，最近又推出了 vue 的文章，在這里放個(gè)鏈接~手把手教你從零寫一個(gè)簡(jiǎn)單的 VUE 感謝有人看我扯技術(shù)，這篇文章主要介紹最近非?；鸬膙ue2前端框架的特點(diǎn)和vue2+vuex2+we...

    Pluser 評(píng)論0 收藏0

  • React同構(gòu)直出優(yōu)化總結(jié)

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

    alaege 評(píng)論0 收藏0

  • FEDAY2016之旅

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

    red_bricks 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

voyagelab

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<