成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

淺談 Web 中前后端模板引擎的使用

chenjiang3 / 2762人閱讀

摘要：前端模板的出現(xiàn)使得前后端分離成為可能?？偨Y(jié)本文簡(jiǎn)單介紹了模板引擎在前后端的使用，下文我們回到，重點(diǎn)分析下的使用方式以及源碼原理。樓主對(duì)于模板引擎的認(rèn)識(shí)比較淺顯，有不正之處希望指出感謝

前言

這篇文章本來(lái)不打算寫(xiě)的，實(shí)話說(shuō)樓主對(duì)前端模板的認(rèn)識(shí)還處在非常初級(jí)的階段，但是為了整個(gè) 源碼解讀系列 的完整性，在深入 Underscore _.template 方法源碼后，覺(jué)得還是有必要記下此文，為了自己備忘也好，為了還沒(méi)用上前端模板引擎的同學(xué)的入門(mén)也好。（熟悉模板引擎的可以幫樓主看看文中有沒(méi)有 BUG ..）

后端 MVC

說(shuō)起模板渲染，樓主首先接觸的其實(shí)并不是前端模板引擎，而是后端。后端 MVC 模式中，一般從 Model 層中讀取數(shù)據(jù)，然后將數(shù)據(jù)傳到 View 層渲染（渲染成 HTML 文件），而 View 層，一般都會(huì)用到模板引擎，比如樓主項(xiàng)目中用到的 PHP 的 smarty 模板引擎。隨便上段代碼感受一下。


  
    
    {{foreach from=$pageArray.result item=leftMenu key=key name=leftMenu}}
      
      {{foreach from=$leftMenu key=key2 item=item2}}
        
  • {{$key2}}
    • 
      {{/foreach}}
    {{/foreach}}

傳入 View 層的其實(shí)就是個(gè)叫做 $pageArray 的 JSON 數(shù)據(jù)。而 MVC 模式也是非常容易理解，推薦看下阮一峰老師的 談?wù)凪VC模式，然后再看看下面這張圖。

以前的 WEB 項(xiàng)目大多會(huì)采用這種后臺(tái) MVC 模式，這樣做有利于 SEO，并且與前端請(qǐng)求接口的方式相比，少了個(gè) HTTP 請(qǐng)求，理論上加載速度可能會(huì)稍微快些。但是缺點(diǎn)也非常明顯，前端寫(xiě)完靜態(tài)頁(yè)面，要讓后臺(tái)去「套模板」，每次前端稍有改動(dòng)，后臺(tái)對(duì)應(yīng)的模板頁(yè)面同時(shí)也需要改動(dòng)，非常麻煩。頁(yè)面中如果有復(fù)雜的 JS，前端寫(xiě)還是后端寫(xiě)？前端寫(xiě)的話，沒(méi)有大量的數(shù)據(jù)，調(diào)試不方便，后端寫(xiě)的話... 所以樓主看到的 PHPer 通常都會(huì) JS。

前端模板

AJAX 的出現(xiàn)使得前后端分離成為可能。后端專注于業(yè)務(wù)邏輯，給前端提供接口，而前端通過(guò) AJAX 的方式向后端請(qǐng)求數(shù)據(jù)，然后動(dòng)態(tài)渲染頁(yè)面。

我們假設(shè)接口數(shù)據(jù)如下：

 [{name: "apple"}, {name: "orange"}, {name: "peach"}]

假設(shè)渲染后的頁(yè)面如下：


  
    
    
  • apple
    • 
    
  • orange
    • 
    
  • peach
    •

前端模板引擎出現(xiàn)之前，我們一般會(huì)這么做：

其實(shí)樓主個(gè)人也經(jīng)常這么干，看上去簡(jiǎn)單方便，但是這樣做顯然有缺點(diǎn)，將 HTML 代碼（View 層）和 JS 代碼（Controller 層）混雜在了一起，UI 與邏輯代碼混雜在一起，閱讀起來(lái)會(huì)非常吃力。一旦業(yè)務(wù)復(fù)雜起來(lái)，或者多人維護(hù)的情況下，幾乎會(huì)失控。而且如果需要拼接的 HTML 代碼里有很多引號(hào)的話（比如有大量的 href 屬性，src 屬性），那么就非常容易出錯(cuò)了（這樣干過(guò)的應(yīng)該深有體會(huì)）。

這個(gè)時(shí)候，前端模板引擎出現(xiàn)了，Underscore 的 _.template 可能是最簡(jiǎn)單的前端模板引擎了（可能還上升不到引擎的高度，或者說(shuō)就是個(gè)前端模板函數(shù)）。我們先不談 _.template 的實(shí)現(xiàn)，將以上的代碼用其改寫(xiě)。

這樣一來(lái)，如果前端需要改 HTML 代碼，只需要改模板即可。這樣做的優(yōu)點(diǎn)很明顯，前端 UI 和邏輯代碼不再混雜，閱讀體驗(yàn)良好，改動(dòng)起來(lái)也方便了許多。

前后端分離最大的缺點(diǎn)可能就是 SEO 無(wú)力了，畢竟爬蟲(chóng)只會(huì)抓取 HTML 代碼，不會(huì)去渲染 JS。（PS：現(xiàn)在的 Google 爬蟲(chóng)已經(jīng)可以抓取 AJAX 了 Making AJAX applications crawlable，具體效果未知）

Node 中間層

單純的后端模板引擎（后端 MVC）以及前端模板引擎方式都有一定的局限性，Node 的出現(xiàn)讓我們有了第三種選擇，讓 Node 作為中間層。

具體如何操作？簡(jiǎn)單地說(shuō)就是讓一門(mén)后臺(tái)語(yǔ)言（比如 Java？PHP？）單純提供渲染頁(yè)面所需要的接口，Node 中間層用模板引擎來(lái)渲染頁(yè)面，使得頁(yè)面直出。這樣一來(lái)，后臺(tái)提供的接口，不僅 Web 端可以使用，APP，瀏覽器也可以調(diào)用，同時(shí)頁(yè)面 Node 直出也不會(huì)影響 SEO，并且前后端也分離，不失為一種比較完美的方案。

總結(jié)

本文簡(jiǎn)單介紹了模板引擎在前后端的使用，下文我們回到 Underscore，重點(diǎn)分析下 _.template 的使用方式以及源碼原理。

PS：樓主對(duì)于模板引擎的認(rèn)識(shí)比較淺顯，有不正之處希望指出~感謝！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/80708.html

相關(guān)文章

  • 淺談web中前端模板引擎的使用

    摘要：置換型模板引擎的優(yōu)點(diǎn)實(shí)現(xiàn)簡(jiǎn)單，缺點(diǎn)效率低，無(wú)法滿足高負(fù)載的應(yīng)用請(qǐng)求。用途百度詞條模板引擎可以讓網(wǎng)站程序?qū)崿F(xiàn)界面與數(shù)據(jù)分離，業(yè)務(wù)代碼與邏輯代碼的分離，提升開(kāi)發(fā)效率，良好的設(shè)計(jì)也提高了代碼的復(fù)用性。前端模板的出現(xiàn)使得前后端分離成為可能。 模板引擎 模板引擎-百度詞條 什么是模板引擎？（百度詞條） 模板引擎（這里特指用于Web開(kāi)發(fā)的模板引擎）是為了使用戶界面與業(yè)務(wù)數(shù)據(jù)分離而產(chǎn)生的，它可以生成...

    妤鋒シ 評(píng)論0 收藏0

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

    摘要：前后端的界限是按照瀏覽器和服務(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...

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

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

    摘要：前后端的界限是按照瀏覽器和服務(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...

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

  • 關(guān)于前后端分離與模板引擎

    摘要：但似乎他們的職責(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ā)定制的版本，為了提...

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

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

0條評(píng)論

閱讀需要支付1元查看
<