[FreeMarker 2.3.20] Part I 關於模版設計的介紹 ~準備階段~ Template + data-model = output

簡要說明


這一章節主要是對FreeMarker做個簡要的介紹,後邊章節會有更加細緻的認識。不過可以確定的是,在看過這個章節後你就能夠寫簡單但是很有幫助的FreeMarker模板了。

模板 + data-model = 輸出

假設下邊是一個電商的 HTML 頁面,大概像這個樣子:

<html>
<head>
  <title>Welcome!</title>
</head>
<body>
  <h1>Welcome Big Joe!</h1>
  <p>Our latest product:
  <a href="products/greenmouse.html">green mouse</a>!
</body>
</html>  

	
現在我們考慮在 Welcome 後邊的人名 ("Big Joe") 是根據實際登錄網站頁面的用戶決定的,而且最新的商品是從數據庫中取出來的,那麼也就意味着這個商品的值可能隨時會改變。那麼在這樣的條件下我們就不能僅僅只是輸入一個確切的人名和最新的商品信息了,換句話說,不能是靜態頁面。

這個問題 FreeMarker 是能夠解決的,它的解決方式是通過它的模板文件來替換這個靜態文件。雖然這個模板文件表面上看起來和靜態 HTML 文件類似,但是有點是例外的,裏邊包含了 FreeMarker 讓這個文件變爲動態文件的指令:

<html>
<head>
  <title>Welcome!</title>
</head>
<body>
  <h1>Welcome ${user}!</h1>
  <p>Our latest product:
  <a href="${latestProduct.url}">${latestProduct.name}</a>!
</body>
</html>  

這個文件如同通常的靜態 HTML 文件一樣是存儲在服務端的,但是只要有人訪問這個頁面時,FreeMarker就會介入啦,它會用最新的數據來替換掉模板中 ${...}標記的內容 (比如將${user}的內容替換爲  "Big Joe" 或者是其他登錄用戶的用戶名),將指定的模板轉換爲一般的 HTML 文件併發送到訪問者的瀏覽器中。其實這個時候訪問者接收到的數據就如同第一個例子一樣的 HTML 文本( 沒有任何 FreeMarker 指令的普通 HTML 文本),自然訪問者也不會意識到這個時候 FreeMarker 幫忙生成了這個 HTML。在這樣一個生成的過程中,存儲在服務端的那個模板文件並沒有被改變過,所以在每一次的訪問中這個生成過程是不斷髮生的。這樣的過程其實也就保證了顯示的信息始終是最新的。

當然,或許你已經注意到這個模板裏邊並沒有包含如何去獲取誰是當前訪問者的相關指令,以及如何通過查詢數據庫來獲取最新的商品信息,就好像 FreeMarker 老早就知道了這些個數據了。其實這就是問題的關鍵,一個隱藏在 FreeMarker 後邊 (或者說,這也是 MVC 所蘊含)的重要思想,將展現層邏輯和業務層邏輯分離。在模板中你只需要關注有關顯示方面的問題,比如說視覺設計、格式設計等問題,而那些被顯示的具體數據 (就像上邊的 用戶名和最新產品) 是在 FreeMarker 之外就被準備好了,一些我們所熟知的語言如Java等。因此呢,如果我們是模板設計者那麼我們就不需要去關心這些被顯示的具體數據是如何產生的了。這裏有個關鍵的概念,無論這些顯示的數據是通過多麼複雜的邏輯產生的,依然,用來呈現它們的模板仍然可以保持原貌【敵軍圍困萬千重,我自巋然不動】 相反亦如此。這一招在模板設計者和程序員非同一人的情況下相當奏效。

對於 FreeMarker 和模板設計者來來說,雖然可以不用過多的糾結數據是怎麼計算的,但是要用它,那麼還是要了解它裏邊關於這些數據的一些祕密的。首先一定要記住的是模板文件能使用的數據都是被打包在一個叫data-model的地方。這些個數據呢就是由上邊所提到的那些語言計算後創建的。就如模板作者所關心的,data-model 是一個樹型結構 (如同存儲在硬盤上的文件夾和文件), 上邊例子中數據的結構如下:

(root)
  |
  +- user = "Big Joe"
  |
  +- latestProduct
      |
      +- url = "products/greenmouse.html"
      |
      +- name = "green mouse"

(以防誤解:data-model 並不是一個文本文件,上邊只是個便於理解的版本,對於數據結構有所瞭解的各位應該能明白這展示的是數據之間的關係罷了。這些都是Java對象,就讓我們把這些問題留給Java程序員吧)

我們將這個和之前的例子做個比較:  ${user} ${latestProduct.name}。讓我們來做個類比(analogy),這些數據模型其實和計算機的文件系統類似:rootlatestProduct就好比是文件夾,而userurlname就好比文件了。urlname是處於latestProduct文件夾中,因此可以說latestProduct.name 其實可以理解爲 name 存在於 latestProduct 文件夾的。當然也正如我說的,這些只是類比啦,這裏邊沒有文件或者文件夾什麼事。

做個總結吧,很簡單,對於FreeMarker來說,模版文件和 data-model 是生成輸出的重要元素:

Template + data-model = output

發佈了13 篇原創文章 · 獲贊 5 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章