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