摘要:但似乎他們的職責(zé)在以前甚至于現(xiàn)在都并不明確,雖然前端是跟瀏覽器打交道,但是最終瀏覽器拿到的頁(yè)面是服務(wù)器通過(guò)模板生成的一個(gè)臨時(shí)靜態(tài)頁(yè)面而已。當(dāng)然,一般傳統(tǒng)上的開(kāi)發(fā)協(xié)作模式有兩種一種是前端先寫(xiě)一個(gè)靜態(tài)頁(yè)面,寫(xiě)好后,讓后端去套模板。
隨著不同終端(Pad/Mobile/PC)的興起,對(duì)開(kāi)發(fā)人員的要求越來(lái)越高,純?yōu)g覽器端的響應(yīng)式已經(jīng)不能滿足用戶體驗(yàn)的高要求,往往需要針對(duì)不同的終端開(kāi)發(fā)定制的版本,為了提升開(kāi)發(fā)效率,前后端分離的需要越來(lái)越被重視,后端負(fù)責(zé)業(yè)務(wù)/數(shù)據(jù)接口,前端負(fù)責(zé)展現(xiàn)、交互邏輯,同一份數(shù)據(jù)接口,可用于多個(gè)終端。
傳統(tǒng)的前后端:
后端是跟數(shù)據(jù)庫(kù)跟服務(wù)器打交道的,前端是跟瀏覽器打交道的。但似乎他們的職責(zé)在以前甚至于現(xiàn)在都并不明確,雖然前端是跟瀏覽器打交道,但是最終瀏覽器拿到的頁(yè)面是服務(wù)器通過(guò)模板生成的一個(gè)臨時(shí)靜態(tài)頁(yè)面而已。所以,實(shí)際上后端也摻和進(jìn)來(lái)了,因?yàn)樗幚砟0?。?dāng)然,一般傳統(tǒng)上的開(kāi)發(fā)協(xié)作模式有兩種:
一種是前端先寫(xiě)一個(gè)靜態(tài)頁(yè)面,寫(xiě)好后,讓后端去套模板。靜態(tài)頁(yè)面可以本地開(kāi)發(fā),也無(wú)需考慮業(yè)務(wù)邏輯只需要實(shí)現(xiàn)View即可。不足是還需要后端套模板,這些前端代碼后端需要瀏覽一遍,以免出錯(cuò)。
另一種協(xié)作模式是,前端直接去寫(xiě)模板,這樣做的問(wèn)題在于,前端編寫(xiě)過(guò)程中很依賴與后端環(huán)境,如果當(dāng)后端沒(méi)寫(xiě)完的情況下,前端幾乎沒(méi)法干活。
模板引擎
模板引擎是相當(dāng)古老的東西了,現(xiàn)在能看到的很多后端編程語(yǔ)言其實(shí)都是基于模板引擎的。但這種語(yǔ)言級(jí)的模板引擎其實(shí)很難讓開(kāi)發(fā)者滿意。以前寫(xiě) ASP 的時(shí)候覺(jué)得用程序把數(shù)據(jù)庫(kù)查詢出來(lái)的數(shù)據(jù)填入頁(yè)面中是一件很痛苦的事情。不是寫(xiě)出一堆凌亂的標(biāo)簽就是程序里做一堆字符串拼接。如果再考慮上內(nèi)容的安全性,要做各種過(guò)濾和轉(zhuǎn)義,簡(jiǎn)直會(huì)讓人奔潰。前后端分離
前后端分離的故事得從 Ajax 說(shuō)起。在 Ajax 流行起來(lái)后,大家都開(kāi)始了「無(wú)刷新」之旅。當(dāng)時(shí)大部分網(wǎng)站都是以鏈接形式跳轉(zhuǎn)的時(shí)候,自己使用「無(wú)刷新翻頁(yè)」覺(jué)得已經(jīng)很先進(jìn)了。后來(lái)無(wú)刷新翻頁(yè)也漸漸開(kāi)始爛大街,百度搜一下可以搜出一坨東西,于是就開(kāi)始考慮全頁(yè)面的無(wú)刷新操作。漸漸地「Web 接口」這種東西出現(xiàn),但是此時(shí)的「接口」其實(shí)主要還是直接輸出 HTML,并沒(méi)有考慮結(jié)構(gòu)化之類(lèi)的東西單頁(yè)模式
單頁(yè)模式是前后端分離的一種應(yīng)用。而單頁(yè)應(yīng)用最主要的特點(diǎn)就是局部刷新,這通過(guò)前端控制路由調(diào)用AJAX,后臺(tái)提供接口便可以實(shí)現(xiàn),而且這樣的方式用戶體驗(yàn)更加友好,網(wǎng)頁(yè)加載更加快速,開(kāi)發(fā)和維護(hù)成本也降低了不少,效率明顯提升。 ? ? 前后端分離的實(shí)現(xiàn)對(duì)技術(shù)人員尤其是前端人員的要求會(huì)上升一個(gè)層次,前端的工作不只是切頁(yè)面寫(xiě)模板或是處理一些簡(jiǎn)單的js邏輯,前端需要處理服務(wù)器返回的各種數(shù)據(jù)格式,還需要掌握一系列的數(shù)據(jù)處理邏輯、MVC思想和各種主流框架。 ? 優(yōu)勢(shì)與意義 1、徹底解放前端 前端不再需要向后臺(tái)提供模板或是后臺(tái)在前端html中嵌入后臺(tái)代碼 2、提高工作效率,分工更加明確 前后端分離的工作流程可以使前端只關(guān)注前端的事,后臺(tái)只關(guān)心后臺(tái)的活,兩者開(kāi)發(fā)可以同時(shí)進(jìn)行,在后臺(tái)還沒(méi)有時(shí)間提供接口的時(shí)候,前端可以先將數(shù)據(jù)寫(xiě)死或者調(diào)用本地的json文件即可,頁(yè)面的增加和路由的修改也不必再去麻煩后臺(tái),開(kāi)發(fā)更加靈活。 3、局部性能提升 通過(guò)前端路由的配置,我們可以實(shí)現(xiàn)頁(yè)面的按需加載,無(wú)需一開(kāi)始加載首頁(yè)便加載網(wǎng)站的所有的資源,服務(wù)器也不再需要解析前端頁(yè)面,在頁(yè)面交互及用戶體驗(yàn)上有所提升。 4.降低維護(hù)成本 通過(guò)目前主流的前端MVC框架,我們可以非??焖俚亩ㄎ患鞍l(fā)現(xiàn)問(wèn)題的所在,客戶端的問(wèn)題不再需要后臺(tái)人員參與及調(diào)試,代碼重構(gòu)及可維護(hù)性增強(qiáng)。 ?文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/2203.html
摘要:前端模板的出現(xiàn)使得前后端分離成為可能。總結(jié)本文簡(jiǎn)單介紹了模板引擎在前后端的使用,下文我們回到,重點(diǎn)分析下的使用方式以及源碼原理。樓主對(duì)于模板引擎的認(rèn)識(shí)比較淺顯,有不正之處希望指出感謝 前言 這篇文章本來(lái)不打算寫(xiě)的,實(shí)話說(shuō)樓主對(duì)前端模板的認(rèn)識(shí)還處在非常初級(jí)的階段,但是為了整個(gè) 源碼解讀系列 的完整性,在深入 Underscore _.template 方法源碼后,覺(jué)得還是有必要記下此文,...
摘要:前后端的界限是按照瀏覽器和服務(wù)器的劃分。前后端彼此互不關(guān)聯(lián)。關(guān)于作者本文部分圖片段落參考文章實(shí)踐中的前后端分離。淘寶前后端分離實(shí)踐本文源碼詳見(jiàn)服務(wù)端代碼。 一、起源 (故事純屬虛構(gòu),如有雷同,純屬巧合)傳說(shuō)在很久很久以前,我們有志之士有了個(gè)創(chuàng)業(yè)的想法,于是乎開(kāi)始了自己的創(chuàng)業(yè)之夢(mèng),但是人手不足啊,于是乎所有角色老子一個(gè)人全包了: Roles: PM, DBA, RD, FED, Des...
摘要:前后端的界限是按照瀏覽器和服務(wù)器的劃分。前后端彼此互不關(guān)聯(lián)。關(guān)于作者本文部分圖片段落參考文章實(shí)踐中的前后端分離。淘寶前后端分離實(shí)踐本文源碼詳見(jiàn)服務(wù)端代碼。 一、起源 (故事純屬虛構(gòu),如有雷同,純屬巧合)傳說(shuō)在很久很久以前,我們有志之士有了個(gè)創(chuàng)業(yè)的想法,于是乎開(kāi)始了自己的創(chuàng)業(yè)之夢(mèng),但是人手不足啊,于是乎所有角色老子一個(gè)人全包了: Roles: PM, DBA, RD, FED, Des...
摘要:文本已收錄至我的倉(cāng)庫(kù),歡迎前后端分離這個(gè)詞相信大家都聽(tīng)過(guò),不知道大家是怎么理解的呢。流下不學(xué)無(wú)術(shù)的淚水目前我了解到的前后端分離,首先部署是分離的至少不會(huì)跟綁定在一起部署接口只返回?cái)?shù)據(jù)關(guān)于前端這幾大框架這幾個(gè)我都是沒(méi)有寫(xiě)過(guò)的,所以也就不多了。 前言 只有光頭才能變強(qiáng)。文本已收錄至我的GitHub倉(cāng)庫(kù),歡迎Star:https://github.com/ZhongFuCheng3y/3y ...
閱讀 4457·2021-11-24 10:24
閱讀 1445·2021-11-22 15:22
閱讀 2083·2021-11-17 09:33
閱讀 2483·2021-09-22 15:29
閱讀 542·2019-08-30 15:55
閱讀 1687·2019-08-29 18:42
閱讀 2762·2019-08-29 12:55
閱讀 1807·2019-08-26 13:55