昨天写到为何XHTML原型会失败？，意犹未尽，再续一篇旧文。

在进行 Web 界面原型设计的一种方法（以下简称MVC/SSI原型法）这篇文章里，漏了一部分，也就是昨天提到的维护或者 CSS/JS 文件共用的问题。其实可以通过下面要讲到的方法，解决一部分。

无论是 XHTML 原型还是程序模板，前端（网页/网站部分）主要包括两大部分：HTML文件和资源文件，其中资源文件又可以分为CSS、JS、背景图（CSS中引用）和内容图（HTML文件中引用）。为了实现可维护、重用，在整个开发过程中，最好的办法是保持一致、只用一个。

以 CakePHP 框架为例（其他框架大同小异），程序渲染用的模板在 /app/views 下，并且分为 layouts、elements 等多个目录。这个分法是很好的，结合MVC/SSI原型法，很利于后期开发。Views 是不能直接查看的，也没有数据内容（样例内容），这一点违背了原型的初衷。应用的根目录是在 /app/webroot 下，为了让原型能够直接给其他协作者查看，可以将原型目录添加在根目录下，比如 /app/webroot/prototype，这样通过 Web 即可以查看。为了让发布版本和原型能够共用 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 用（这有些痴人说梦了），但已经能解决一部分问题了，在某种程度上已经很好维护了。MVC/SSI原型法的优点就是 prototype 目录结构和 views 目录结构是基本一致的。

昨天千鸟给我介绍了他的方法，把界面拆成大大小小的元素（XHTML）去维护（比如搜索、高级搜索、翻页等），这有些接近于 CakePHP 中的 elements 目录，即公用元素，也可以考虑在 elements 目录下放一个 index.html 用于在线查看各个元素的代码和效果。

对了，还会遇到这样一个问题。再原型和开发沟通的过程中，如何减少重复的沟通？比如说除了界面上增加了一些元素，很容易发现，前端代码上的一些细节调整，比如 class 换了一个名字之类的，用以上方法仍然需要前端人员自行或者告知开发人员去修改。这一点，只有 prototype 能直接当 views 用的时候才能解决了。

根据我的经验，这个方法可以很好的运用在简单的项目中，比如 Blog、小型CMS等。对于门户级的、有众多频道的大型网站也可以尝试，具体也要看服务器上的部署，如果分多个应用，那么在各个应用中分别加 prototype，如果是单一应用多个频道，可以在 prototype、ui 目录下再进行细分。

以上内容仅为想法，未实践，相信还会遇到很多未知问题。接下来我也会进行一定的实践，欢迎探讨。