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

資訊專欄INFORMATION COLUMN

淺談前后端分離與實(shí)踐 之 nodejs 中間層服務(wù)（二）

ddongjian0000 / 1941人閱讀

摘要：服務(wù)端任需要進(jìn)行校驗(yàn)來達(dá)到數(shù)據(jù)的可靠性前端的路由可能在服務(wù)端并不存在等等這一系列重用性的問題。串行并行，大幅縮短請(qǐng)求時(shí)間。關(guān)于作者本人主頁本文部分圖片段落參考文章淘寶前后端分離實(shí)踐微信公眾號(hào)會(huì)不定期推送前端技術(shù)文章，歡迎關(guān)注

一、背景

書接上文，淺談前后端分離與實(shí)踐(一) 我們用mock服務(wù)器搭建起來了自己的前端數(shù)據(jù)模擬服務(wù)，前后端開發(fā)過程中只需定義好接口規(guī)范，便可以相互進(jìn)行各自的開發(fā)任務(wù)。聯(lián)調(diào)的時(shí)候，按照之前定義的開發(fā)規(guī)范進(jìn)行數(shù)據(jù)聯(lián)調(diào)便可以了。前后端的職能更加清晰：

后端 前端
提供數(shù)據(jù) 接收數(shù)據(jù)，返回?cái)?shù)據(jù)
處理業(yè)務(wù)邏輯 處理渲染邏輯
Server-side MVC架構(gòu) Client-side MV* 架構(gòu)
代碼跑在服務(wù)器上 代碼跑在瀏覽器上

這里分離干凈了，分工也很明確了，看似一切都那么美好，but...我們也很容易發(fā)現(xiàn)問題的所在：

Client-side Model 是 Server-side Model 的加工

Client-side View 跟 Server-side是 不同層次的東西

Client-side的Controller 跟 Sever-side的Controller 各搞各的

Client-side的Route 但是 Server-side 可能沒有

也就是說服務(wù)端和客戶端各層職責(zé)重疊，大家各搞各的，很難統(tǒng)一具體要做的事情。并且可能會(huì)伴隨著一些性能上的問題。最具體的表現(xiàn)就是我們常用的SPA應(yīng)用：

渲染，取值都在客戶端進(jìn)行，有性能的問題

需要等待資源到齊才能進(jìn)行，會(huì)有短暫白屏與閃動(dòng)

在移動(dòng)設(shè)備低速網(wǎng)路的體驗(yàn)奇差無比

渲染都在客戶端，模版無法重用，SEO實(shí)現(xiàn) 麻煩

緊接著，我們代碼量越來越大，我們需要校驗(yàn)的表單也會(huì)越來越多，有時(shí)候，前端提交需要校驗(yàn)一次表單。
服務(wù)端任需要進(jìn)行校驗(yàn)來達(dá)到數(shù)據(jù)的可靠性；前端的路由可能在服務(wù)端并不存在....等等這一系列重用性的問題。所以我們之前的重構(gòu)可能需要更深層次的思考。

二、開始重構(gòu)

在開始重構(gòu)之前，我們需要對(duì)前后端界線做一個(gè)劃分，也就是說什么是屬于前端的范疇，什么是屬于后端的范疇，最傳統(tǒng)的前后端劃分可能是這樣的：

那么問題來了：我們前后端劃分的接線，是依照工作職責(zé)來劃分的前后端；還是依照硬體環(huán)境劃分的前后端？自從了nodejs之后，我們可以從工作職能上重新定義前后端的范疇：

可以看到，這里的前端比之前多了個(gè)nodejs，也就是在前后端之間我們構(gòu)建了一個(gè) nodejs 服務(wù)作為中間層！
為什么我們選擇的中間層是nodejs呢？因?yàn)槲覀儼阎虚g層歸在了前端的范疇，那么對(duì)前端小伙伴來說，nodejs畢竟還是個(gè)js，那么從語法角度來說，上收起來應(yīng)該沒有什么問題。其次開發(fā)轉(zhuǎn)移成本也想對(duì)較低，不必來回切換語言的邏輯和語法：

前端熟悉的語言，學(xué)習(xí)成本低

都是JS，可以前后端復(fù)用

體質(zhì)適合：事件驅(qū)動(dòng)、非阻塞I/O

適合IO密集型業(yè)務(wù)

執(zhí)行速度也不差

好了，提前說了這么多東西，那么這個(gè)中間層能給我們帶來什么了？要知道引入nodejs的開發(fā)成本也是很大的，首先就是多了一層服務(wù)，多的不說，單憑傳輸時(shí)間，就多了一層的傳輸時(shí)間啊！下面我們來研究一下什么應(yīng)用場(chǎng)景下的nodejs能給我們帶來利大于弊的東西。

三、開始中間層之旅

引入nodejs之后，我們來重新劃分一下前后端的職能：

這個(gè)就是中間層nodejs的主要思路，下面我們來看一下常見的業(yè)務(wù)場(chǎng)景：

1. 接口數(shù)據(jù)可靠性修復(fù)

有的時(shí)候服務(wù)端返回給我們的數(shù)據(jù)可能并不是前端想要的結(jié)構(gòu)，所有用到的展現(xiàn)數(shù)據(jù)都是后端通過異步接口(AJAX/JSONP)的方式提供的，前端只管展現(xiàn)。但是后端經(jīng)常提供后端的數(shù)據(jù)邏輯，在前端還需要去處理這些數(shù)據(jù)邏輯。比如我再開發(fā)一個(gè)功能的時(shí)候，有時(shí)候會(huì)碰到這樣的問題：

服務(wù)端返回的某個(gè)字段為 null 或者服務(wù)端返回的數(shù)據(jù)結(jié)構(gòu)太深，前端需要不斷寫這樣的代碼去判斷數(shù)據(jù)結(jié)構(gòu)是否真的返回了正確的東西，而不是個(gè)null 或者undefined：

if (params.items && params.items.type && ...) {
   // todo
}

對(duì)于這種情況，我們前端其實(shí)不應(yīng)該去重復(fù)校驗(yàn)數(shù)據(jù)的格式，這也本不應(yīng)該是瀏覽器端js需要做的事情。我們可以在中間層做接口轉(zhuǎn)發(fā)，在轉(zhuǎn)發(fā)的過程中做數(shù)據(jù)處理。而不用擔(dān)心數(shù)據(jù)返回的問題：

router.get("/buyer/product/detail", (req, res, next) => {
  httpRequest.get("/buyer/product/detail", (data) => {
    // todo 處理數(shù)據(jù)
    res.send(data);
  })
})
2. 頁面性能優(yōu)化 和 SEO

有點(diǎn)時(shí)候我們做單頁面應(yīng)用，經(jīng)常會(huì)碰到首屏加載性能問題，這個(gè)時(shí)候如果我們接了中間層nodejs的話，那么我們可以把首屏渲染的任務(wù)交給nodejs去做，次屏的渲染依然走之前的瀏覽器渲染。（前端換頁，瀏覽器端渲染，直接輸入網(wǎng)址，服務(wù)器渲染）服務(wù)端渲染對(duì)頁面進(jìn)行拼接直出html字符串，可以大幅提高首屏渲染的時(shí)間，減少用戶的等待時(shí)間。這種形式應(yīng)用最廣的比如 Vue 的服務(wù)端渲染，里面也有相關(guān)的介紹。
其次對(duì)于單頁面的SEO優(yōu)化也是很好地處理方式，由于目前的ajax并不被搜索百度等搜索引擎支持，所以如果想要得到爬蟲的支持，那么服務(wù)端渲染也是一種解決方法。（PS：如果覺得服務(wù)端渲染太麻煩，我這里還有一篇介紹處理SEO的另一種思路處理 Vue 單頁面 Meta SEO的另一種思路可以參考）

3. 淘寶常見的需求解決方案

需求：在淘寶，單日四億PV，頁面數(shù)據(jù)來自各個(gè)不同接口，為了不影響體驗(yàn)，先產(chǎn)生頁面框架后，在發(fā)起多個(gè)異步請(qǐng)求取數(shù)據(jù)更新頁面，這些多出來的請(qǐng)求帶來的影響不小，尤其在無線端。

解決方案：在NodeJS端使用 Bigpiper 技術(shù)，合并請(qǐng)求，降低負(fù)擔(dān)，分批輸出，不影響體驗(yàn)。同時(shí)可以拆分大接口為獨(dú)立小接口，并發(fā)請(qǐng)求。串行 => 并行，大幅縮短請(qǐng)求時(shí)間。

4. 更多可能

結(jié)語

這里只是提供問題的一種解決思路，還是那句話：一切看應(yīng)用場(chǎng)景。如果你對(duì)本文內(nèi)容有別的意見也歡迎一起交流探討。

關(guān)于

作者：monkeyWang

本人主頁：monkeyWang

本文部分圖片段落參考文章： 淘寶前后端分離實(shí)踐

微信公眾號(hào)：會(huì)不定期推送前端技術(shù)文章，歡迎關(guān)注

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

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

相關(guān)文章

  • 淺談前后端分離與實(shí)踐 之 nodejs 中間層服務(wù)（二）

    摘要：服務(wù)端任需要進(jìn)行校驗(yàn)來達(dá)到數(shù)據(jù)的可靠性前端的路由可能在服務(wù)端并不存在等等這一系列重用性的問題。串行并行，大幅縮短請(qǐng)求時(shí)間。關(guān)于作者本人主頁本文部分圖片段落參考文章淘寶前后端分離實(shí)踐微信公眾號(hào)會(huì)不定期推送前端技術(shù)文章，歡迎關(guān)注 一、背景 書接上文，淺談前后端分離與實(shí)踐(一) 我們用mock服務(wù)器搭建起來了自己的前端數(shù)據(jù)模擬服務(wù)，前后端開發(fā)過程中只需定義好接口規(guī)范，便可以相互進(jìn)行各自的開發(fā)...

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

  • 淺談前后端分離與實(shí)踐（一）

    摘要：前后端的界限是按照瀏覽器和服務(wù)器的劃分。前后端彼此互不關(guān)聯(lián)。關(guān)于作者本文部分圖片段落參考文章實(shí)踐中的前后端分離。淘寶前后端分離實(shí)踐本文源碼詳見服務(wù)端代碼。 一、起源 （故事純屬虛構(gòu)，如有雷同，純屬巧合）傳說在很久很久以前，我們有志之士有了個(gè)創(chuàng)業(yè)的想法，于是乎開始了自己的創(chuàng)業(yè)之夢(mèng)，但是人手不足啊，于是乎所有角色老子一個(gè)人全包了： Roles: PM, DBA, RD, FED, Des...

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

  • 淺談前后端分離與實(shí)踐（一）

    摘要：前后端的界限是按照瀏覽器和服務(wù)器的劃分。前后端彼此互不關(guān)聯(lián)。關(guān)于作者本文部分圖片段落參考文章實(shí)踐中的前后端分離。淘寶前后端分離實(shí)踐本文源碼詳見服務(wù)端代碼。 一、起源 （故事純屬虛構(gòu)，如有雷同，純屬巧合）傳說在很久很久以前，我們有志之士有了個(gè)創(chuàng)業(yè)的想法，于是乎開始了自己的創(chuàng)業(yè)之夢(mèng)，但是人手不足啊，于是乎所有角色老子一個(gè)人全包了： Roles: PM, DBA, RD, FED, Des...

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

  • 前后端分離架構(gòu)下CSRF防御機(jī)制

    摘要：延伸這里再順便提一下，新架構(gòu)下的防御。不過，還有一點(diǎn)值得一提前后端分離框架下，路由由控制我自己要獲取的后端參數(shù)和需要用在業(yè)務(wù)邏輯的參數(shù)，在主觀上前端同學(xué)更好把握一些。 原文： http://feclub.cn/post/content... 背景 1、什么是CSRF攻擊？ 這里不再介紹CSRF，已經(jīng)了解CSRF原理的同學(xué)可以直接跳到：3、前后端分離下有何不同？。 不太了解的同學(xué)可以看這...

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

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

0條評(píng)論

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