對(duì)于包含多Item的用戶界面組件（UI Component）（如Tree, Table, DataGrid等） Item 容器來說，其行為大多固定，需要時(shí)常改變的是Item的顯示。如果將顯示實(shí)現(xiàn)放在這些item containers的class內(nèi)，那么不僅這些classes的可重復(fù)利用性受到破壞，代碼也難以管理。這時(shí)應(yīng)該考慮將item的顯示邏輯分離出來。

具體實(shí)現(xiàn)方法： 將item顯示邏輯獨(dú)立出來放到item render class/function中。

這種模式在Java Swing及Flex的API中有大量的使用。在這里舉一個(gè)PHP的例子。在網(wǎng)站制作時(shí)，我們使用如下的HTML代碼搭配CSS來顯示導(dǎo)航：

<ul>
<li ><a href="A.php">A</a>
<ul><li ><a href="A1.php">A1</a></li><li ><a href="A2.php">A2</a></li></ul>
<li ><a href="B.php">B</a>
<ul><li ><a href="B1.php">B1</a></li><li ><a href="B2.php">B2</a></li></ul>
<li ><a href="C.php">C</a>
<ul><li ><a href="C1.php">C1</a></li><li ><a href="C2.php">C2</a></li></ul>
</ul>

在PHP中，我們使用Node來為如上的tree建模 - 有一個(gè)頂級(jí)的虛擬Node, 然后回溯打印即可。為了美化頁面，這時(shí)我們想讓第一級(jí)的Node顯示圖片，讓其他級(jí)的保留使用文字。這時(shí)我們使用如下的render function:

// node class中：
public function toHtmlMenu($printThis = true, $printSubItemsLevel = 100, $renderFuncForListItemContent = NULL) {
  if($printThis) {
   $s = "<li>"; 
   if($renderFuncForListItemContent == null) {
     $s .= "<a href=/"$this->path/">" . $this->getLabel(). "</a>";
   }else{
     $s .= call_user_func($renderFuncForListItemContent, $this, $selectIndex, $language, $country);
    }
  }
// recursive print ...
}
 

// in caller script:
function menuItemRenderLevel1AsImage(MenuItem $menuItem) {
  if($menuItem->getLevel() == 1) {
   return "<a href=/"" . $menuItem->getPath() . "/">" . "<img src=/"$menuItem->id.png/">" . "</a>";
  }else{
   return "<a href=/"$this->path/">" . $this->getLabel(). "</a>";
  }
}

$menuCode = $MENU_ROOT->toHtmlMenu(false, 2, "menuItemRenderLevel1AsImage");