現代程序設計 網頁前端開發做業（to 鄒欣老師）

在一些著名的網站的搜索框上，會有一種「自動完成」功能。

 

好比google、百度和淘寶：

如今，咱們來考慮如何實現這個功能。

 

第一步：模仿任意一個網站，編寫一個相似的網頁效果原型。

 

在這一步，不要估計開發時間。

把學習新技術（一些前端基礎知識）的時間花在這個階段。

以完成原型爲目標，沒必要深刻技術。

去 http://www.w3schools.com/ 得到入門知識

去 https://developer.mozilla.org/ 查閱文檔

 

第二步：仔細觀察三個網站的「自動完成」功能，比較它們<strong>功能</strong>的相同點和不一樣點，寫成一份簡單的需求分析文檔。

請僅僅從功能角度分析這三個組件。

提示，若是你試圖從代碼中找到答案，你極可能陷入地獄。

除了界面，能夠關注一些細節，好比鍵盤操做、響應時間。

第三步：設計並實現一個「自動完成」組件，使得它可以把三個網站的自動完成功能應付自如。

按照軟件工程的模型進行設計、複審和實現。

在設計階段，討論清楚這個組件的用戶須要面對的API：它們的命名、調用方式、編程風格、它所依賴的框架（若是有必要的話）。

儘可能讓使用變得簡單。

儘可能用可擴展性代替枚舉需求。

根據第二步的需求來完成代碼，沒必要試圖跟原版"如出一轍"。

考慮清楚如何管理這個組件用到的html、css和js代碼。

第四步：找到另外一個網站的自動完成功能，試試看咱們的「自動完成」組件是否可以實現它！

若是能夠實現，和小夥伴們討論下，爲何大家的組件可以應對未知的需求？回顧設計階段，哪些設計要素產生了關鍵性做用？

若是不能夠實現，和小夥伴討論下，爲何大家的組件沒法應對新需求？須要作怎樣的設計變動和代碼重構，才能支持新的需求？