服務端與客戶端共用smarty模板技術

1. 後端渲染的侷限性

---

有些時候，咱們總會作一些瀑布流的界面，以下： 

 

在不斷的下拉過程當中，會動態向其中添加劇復的DOM結構，並且，咱們也但願同步刷新頁面的時候，DOM是直接在服務端渲染好的，而並非在客戶端再發一次請求去拼裝。

    那麼問題就來了，若是咱們須要服務端渲染第一屏的數據，客戶端在下拉過程當中，在客戶端拼裝模板去渲染。那麼咱們的模板怎麼寫，若是後端使用的是NODE的同窗，能夠無須擔憂，可是若是後端是php+smarty的話，在服務端寫的模板，在客戶端就無法使用了。

    因而，smartyMonkey應運而生，smartyMonkey的GITHUB地址

    https://github.com/houyu01/smartyMonkey

    咱們來看一下，smartyMonkey如何幫助咱們解決這個服務端smarty客戶端不能用的問題。

    smartyMonkey使用js寫的，能夠解析部分smarty語句的庫。

    ① 先說一下咱們沒有任何編譯工具的狀況下，最簡單的使用例子：

     咱們的創建三個文件：

     1: item.tpl，裏面存放着單條新聞的DOM結構，以下圖所示：

    

     2: news.tpl， 裏面存放着整張頁面的代碼。

     3：index.js，裏面存放着拼裝模板的代碼。

      咱們首先要寫item.tpl，在裏面，是每條新聞的DOM結構，如：

<li>    <h1>{%$title%}</h1>    <img src="{%$src%}" /> </li> 

      咱們在主模板中，引入item.tpl，同步出新聞

       引用的方式，在news.tpl中引用模板，並賦值到一個變量中：

<&include file="./item.html" assign="tplStr"&> 

        在具體引用出，直接調用：

<&include file="string:$tplStr" inline&> 

     而且，在頁面中，把模板傳送到前端：

<textarea class="tpl-area" style="display:none;"><&strip&><&$tplStr&><&/strip&></textarea> 

    在index.js中，咱們直接讀取textarea中的模板數據，

<script> var smartyMonkey = window.smartyMonkey var sm = smartyMonkey.create(); var tpl_fn = sm.compile($('.tpl-area').text(),  {varnames: ['title', 'src']}); var out = tpl_fn('標題', '圖片地址');//裝入模板的數據 </script> 

因而，咱們就拼合成了要填入頁面的模板字符串。這樣咱們就達到了，同一個模板(item.tpl)，服務端與客戶端共用的目的。

若是使用的編譯工具的同窗，還能夠這樣用， 編譯的時候，將item.tpl內聯到news.tpl中去。

news.tpl中(FIS方式)：

<link rel="import" href="./item.html"  /> 

在index.js中：

<script> var smartyMonkey = window.smartyMonkey var sm = smartyMonkey.create(); var tpl_fn = sm.compile(__inline('./item.html'),  {varnames: ['title', 'src']}); var out = tpl_fn('標題', '圖片地址');//裝入模板的數據 </script> 

    這樣寫起來，更加容易了。

這就是前端渲染smarty模板解決方案---SmartyMonkey