做网站时 结构、表现、行为分离

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

<input class="text" size=15 type="text" name="search_key" style="color:#bbb;" value="志号、名称" onfocus="if(this.value=='志号、名称'){this.value='';this.style.color='#333333';}" onblur="if(this.value==''){this.value='志号、名称';this.style.color='#bbbbbb';}" />

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

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