网站建设的三层分离道理很简单，但是要用例子来说清楚也不易。今天优化“搜索”功能时突然想到，这便是个很典型的示范。从头开始，我一般会选择如下代码作为搜索录入框原型，以前做的HTML原型都用这个：

用文字来描述交互：默认淡色#bbbbbb文字提示录入字段，用户点击录入时颜色会加深#333333正常，但当退格删掉所录内容input内值为空时，会恢复淡色默认提示。如下图：

产品使用过程中，往往通过定义外层搜索模块.search来传递控制这个录入框和按钮的展示效果，如上我还定义了个.text用于统一控制表单的文 本录入框如如此从网站建设的三层分离的角度看，目前只做到了网站结构、网站表现分离，而网站结构、行为是绑到一起的，并不符合Web Standard设计思想。改造思路是把网站行为剥离，因为本站在使用jQuery类库，因此考虑用jQuery语句来实现。通过name的值 search_key做绑定，代码如下：

剩下的HTML网站建设的结构如下，无style也无script很干净：

最后绑定表现，美化是我们的目地，但别忘了还有个基础要求是兼容性要好。加分题，考虑在激活录入框时提示，如同safari浏览器录入表单的shadow效果，可惜IE不支持。效果和交互如图：

到此还没完，还有优化余地。比如浏览器如果不支持脚本，触发录入框不能自动清空，虽然不至于功能失效，但也会给用户造成困惑。另外，如果考虑进 一步简化，可以整合或隐藏按钮回车提交，我考虑“集邮册”用户群没有这么高端。基本优化原则，是所有功能表现在同一水准线，模块化迭代式前进。

我们的承诺：
天惠公司将一如既往，秉承专业服务精神，一切从客户利益出发，为您率先建站,令您把握先机，长远的眼光定使您在商海搏击中稳操胜券。