现代程序设计 网页前端开发做业（to 邹欣老师）

在一些著名的网站的搜索框上，会有一种“自动完成”功能。

 

好比google、百度和淘宝：

如今，咱们来考虑如何实现这个功能。

 

第一步：模仿任意一个网站，编写一个相似的网页效果原型。

 

在这一步，不要估计开发时间。

把学习新技术（一些前端基础知识）的时间花在这个阶段。

以完成原型为目标，没必要深刻技术。

去 http://www.w3schools.com/ 得到入门知识

去 https://developer.mozilla.org/ 查阅文档

 

第二步：仔细观察三个网站的“自动完成”功能，比较它们<strong>功能</strong>的相同点和不一样点，写成一份简单的需求分析文档。

请仅仅从功能角度分析这三个组件。

提示，若是你试图从代码中找到答案，你极可能陷入地狱。

除了界面，能够关注一些细节，好比键盘操做、响应时间。

第三步：设计并实现一个“自动完成”组件，使得它可以把三个网站的自动完成功能应付自如。

按照软件工程的模型进行设计、复审和实现。

在设计阶段，讨论清楚这个组件的用户须要面对的API：它们的命名、调用方式、编程风格、它所依赖的框架（若是有必要的话）。

尽可能让使用变得简单。

尽可能用可扩展性代替枚举需求。

根据第二步的需求来完成代码，没必要试图跟原版"如出一辙"。

考虑清楚如何管理这个组件用到的html、css和js代码。

第四步：找到另外一个网站的自动完成功能，试试看咱们的“自动完成”组件是否可以实现它！

若是能够实现，和小伙伴们讨论下，为何大家的组件可以应对未知的需求？回顾设计阶段，哪些设计要素产生了关键性做用？

若是不能够实现，和小伙伴讨论下，为何大家的组件没法应对新需求？须要作怎样的设计变动和代码重构，才能支持新的需求？