昨天寫到為何XHTML原型會失敗？，意猶未盡，再續(xù)一篇舊文。

　　在進行 Web 界面原型設計的一種方法（以下簡稱MVC/SSI原型法）這篇文章里，漏了一部分，也就是昨天提到的維護或者 CSS/JS 文件共用的問題。其實可以通過下面要講到的方法，解決一部分。

　　無論是 XHTML 原型還是程序模板，前端（網(wǎng)頁/網(wǎng)站部分）主要包括兩大部分：HTML文件和資源文件，其中資源文件又可以分為CSS、JS、背景圖（CSS中引用）和內(nèi)容圖（HTML文件中引用）。為了實現(xiàn)可維護、重用，在整個開發(fā)過程中，最好的辦法是保持一致、只用一個。

　　以 CakePHP 框架為例（其他框架大同小異），程序渲染用的模板在 /app/views 下，并且分為 layouts、elements 等多個目錄。這個分法是很好的，結(jié)合MVC/SSI原型法，很利于后期開發(fā)。Views 是不能直接查看的，也沒有數(shù)據(jù)內(nèi)容（樣例內(nèi)容），這一點違背了原型的初衷。應用的根目錄是在 /app/webroot 下，為了讓原型能夠直接給其他協(xié)作者查看，可以將原型目錄添加在根目錄下，比如 /app/webroot/prototype，這樣通過 Web 即可以查看。為了讓發(fā)布版本和原型能夠共用 CSS 和 JS 文件（假設目錄為 /app/webroot/ui/css 和 /app/webroot/ui/js），需要注意 CSS 和 JS 中的 URL 全部使用絕對路徑（不加域名）。

　　無論是一個人的設計團隊，還是多人，都可以將 prototype 目錄也加到版本控制中。同時為了使絕對路徑能夠生效，可以在本地配置 apache（以 PHP 為例，呵呵），比如 local.example.com 訪問 /app/webroot/prototype 為原型，www.example.com 訪問 /app/webroot 為上線版本。雖然 prototype 不能自動當成 views 用（這有些癡人說夢了），但已經(jīng)能解決一部分問題了，在某種程度上已經(jīng)很好維護了。MVC/SSI原型法的優(yōu)點就是 prototype 目錄結(jié)構(gòu)和 views 目錄結(jié)構(gòu)是基本一致的。

　　昨天千鳥給我介紹了他的方法，把界面拆成大大小小的元素（XHTML）去維護（比如搜索、高級搜索、翻頁等），這有些接近于 CakePHP 中的 elements 目錄，即公用元素，也可以考慮在 elements 目錄下放一個 index.html 用于在線查看各個元素的代碼和效果。

　　對了，還會遇到這樣一個問題。再原型和開發(fā)溝通的過程中，如何減少重復的溝通？比如說除了界面上增加了一些元素，很容易發(fā)現(xiàn)，前端代碼上的一些細節(jié)調(diào)整，比如 class 換了一個名字之類的，用以上方法仍然需要前端人員自行或者告知開發(fā)人員去修改。這一點，只有 prototype 能直接當 views 用的時候才能解決了。

　　根據(jù)我的經(jīng)驗，這個方法可以很好的運用在簡單的項目中，比如 Blog、小型CMS等。對于門戶級的、有眾多頻道的大型網(wǎng)站也可以嘗試，具體也要看服務器上的部署，如果分多個應用，那么在各個應用中分別加 prototype，如果是單一應用多個頻道，可以在 prototype、ui 目錄下再進行細分。

　　以上內(nèi)容僅為想法，未實踐，相信還會遇到很多未知問題。接下來我也會進行一定的實踐，歡迎探討。