網(wǎng)站建設的三層分離道理很簡單，但是要用例子來說清楚也不易。今天優(yōu)化“搜索”功能時突然想到，這便是個很典型的示范。從頭開始，我一般會選擇如下代碼作為搜索錄入框原型，以前做的HTML原型都用這個：
用文字來描述交互：默認淡色#bbbbbb文字提示錄入字段，用戶點擊錄入時顏色會加深#333333正常，但當退格刪掉所錄內容input內值為空時，會恢復淡色默認提示。如下圖：
產(chǎn)品使用過程中，往往通過定義外層搜索模塊.search來傳遞控制這個錄入框和按鈕的展示效果，如上我還定義了個.text用于統(tǒng)一控制表單的文 本錄入框如如此從網(wǎng)站建設的三層分離的角度看，目前只做到了網(wǎng)站結構、網(wǎng)站表現(xiàn)分離，而網(wǎng)站結構、行為是綁到一起的，并不符合Web Standard設計思想。改造思路是把網(wǎng)站行為剝離，因為本站在使用jQuery類庫，因此考慮用jQuery語句來實現(xiàn)。通過name的值 search_key做綁定，代碼如下：
剩下的HTML網(wǎng)站建設的結構如下，無style也無script很干凈：
最后綁定表現(xiàn)，美化是我們的目地，但別忘了還有個基礎要求是兼容性要好。加分題，考慮在激活錄入框時提示，如同safari瀏覽器錄入表單的shadow效果，可惜IE不支持。效果和交互如圖：
到此還沒完，還有優(yōu)化余地。比如瀏覽器如果不支持腳本，觸發(fā)錄入框不能自動清空，雖然不至于功能失效，但也會給用戶造成困惑。另外，如果考慮進 一步簡化，可以整合或隱藏按鈕回車提交，我考慮“集郵冊”用戶群沒有這么高端�；緝�(yōu)化原則，是所有功能表現(xiàn)在同一水準線，模塊化迭代式前進。
我們的承諾：
天惠公司將一如既往，秉承專業(yè)服務精神，一切從客戶利益出發(fā)，為您率先建站,令您把握先機，長遠的眼光定使您在商海搏擊中穩(wěn)操勝券。