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

比如google、百度和淘宝:

现在,我们来考虑如何实现这个功能。

第一步:模仿任意一个网站,编写一个类似的网页效果原型。

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

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

以完成原型为目标,不必深入技术。

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

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

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

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

提示,如果你试图从代码中找到答案,你很可能陷入地狱。

除了界面,可以关注一些细节,比如键盘操作、响应时间。

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

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

在设计阶段,讨论清楚这个组件的用户需要面对的API:它们的命名、调用方式、编程风格、它所依赖的框架(如果有必要的话)。

尽量让使用变得简单。

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

根据第二步的需求来完成代码,不必试图跟原版"一模一样"。

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

第四步:找到另一个网站的自动完成功能,试试看我们的“自动完成”组件是否能够实现它!

如果可以实现,和小伙伴们讨论下,为什么你们的组件能够应对未知的需求?回顾设计阶段,哪些设计要素产生了关键性作用?

如果不可以实现,和小伙伴讨论下,为什么你们的组件无法应对新需求?需要做怎样的设计变更和代码重构,才能支持新的需求?

现代程序设计 网页前端开发作业(to 邹欣老师)的更多相关文章

  1. 201771030103-陈正丽 实验一 软件工程准备—<快速浏览 邹欣老师博客—读后感>

    项目 内容 <软件工程> 代祖华老师博客 作业要求 邹欣老师博客 学习目标 具体目标 在大概阅读邹欣老师的博客时,发现老师写了关于很多方面的内容,有基础的也有比较深奥的,这次阅读过程中主要 ...

  2. 网页前端开发:微博CSS3适用细节初探

    浏览器,作为一神器,帮我们打开了缤纷万千的网络世界窗口.而她发展到今天,也诞生了一个又一个的怀神版本,可能有人钟情于她的花哨,有人痴迷于她的速度……我们,作为重构工程师,必然要更关注他背后的技术革新, ...

  3. 写给IOS开发工程师的网页前端入门笔记

    前言:作为IOS开发工程师,终会接触到网页前端开发,甚至可能会有 用HTML5开发IOS的app客户端的需求.比如现在上架的app就有比如理财类型的app有的就用HTML开发的,从理财类型的app需求 ...

  4. 2018上C语言程序设计(高级)作业- 第0次作业

    准备工作(10分) 1.在博客园申请个人博客. 2.加入班级博客(2班班级博客链接地址)(1班班级博客链接地址) 3.关注邹欣老师博客.关注任课老师博客. 4.加入讨论小组,学习过程中遇到问题不要随意 ...

  5. C程序设计-----第0次作业

    C程序设计-----第0次作业- 1.翻阅邹欣老师的关于师生关系博客,并回答下列问题,每个问题的答案不少于500字:(50分)- 1)最理想的师生关系是健身教练和学员的关系,在这种师生关系中你期望获得 ...

  6. 2018C程序设计—第0次作业

    1.翻阅邹欣老师博客关于师生关系博客,并回答下列问题,每个问题的答案不少于500字 1)最理想的师生关系是健身教练和学员的关系,在这种师生关系中你期望获得来自老师的哪些帮助? 答:正如邹欣老师博客里所 ...

  7. 个人作业week7——前端开发感想总结

    个人作业week7——前端开发感想总结 1. 反思 首先要谈谈在这次团队项目的工作中,我这边出现过的较为严重的一个问题:我和HoerWing (后端担当)合作时,最初因为我没有使用github(始终连 ...

  8. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  9. 常用网站--前端开发类+网页设计类+平面素材类+flash类

    前端开发类 animate CSS 前端开发网 我爱CSS 大家网 W3School jQuery开发技术详解教程视频 jQuery中文社区 jQueryChina 网页设计类 禅意花园 CSS Do ...

随机推荐

  1. linux shell基础命令

    du -h  #查询磁盘文件大小和列表 df  -h   # 查询服务器磁盘使用情况 top/free   # 查询服务器内存,cpu等资源使用情况 iptables    # 防火墙相关的命令 vi ...

  2. Tween Animation----Alpha渐变透明度动画

    本博文是我自己操作过的并且能运行才给大家分享的 layout ----activity_main.xml 在res/新建一个anim文件夹,用来保存动画属性的xml 在anim文件夹里新建一个alph ...

  3. Java对象大小计算

    这篇说说如何计算Java对象大小的方法.之前在聊聊高并发(四)Java对象的表示模型和运行时内存表示 这篇中已经说了Java对象的内存表示模型是Oop-Klass模型. 普通对象的结构如下,按64位机 ...

  4. c#去除List中的重复项

    List<string> list = new List<string> {"a", "a", "b", " ...

  5. 【BZOJ1623】 [Usaco2008 Open]Cow Cars 奶牛飞车 贪心

    SB贪心,一开始还想着用二分,看了眼黄学长的blog,发现自己SB了... 最小道路=已选取的奶牛/道路总数. #include <iostream> #include <cstdi ...

  6. PNG-8和PNG-24的抉择

    今天我做了一个图,因为需要透明,所以我存为了PNG8格式,结果发现图片变了,图片变得四周都不光滑了,四周都变得有锯齿了,而且阴影也不见了,后来存为PNG24,这些问题就消失了.我去百度搜索了关于PNG ...

  7. 整理ViewController的生命周期和加载过程

    按照执行顺序排列 - initWithCoder:通过nib文件初始化时触发 - awakeFromNib:nib文件被加载的时候,会发送一个awakeFromNib的消息到nib文件中的每个对象 p ...

  8. Torch7学习笔记(三)Sequencialization

    1.序列化 Torch提供4种高级方法来序列化或者反序列化任意Lua/Torch对象.这些方法都是从File对象抽象出来的,为了方便操作而创建. 前两种方法用来从文件序列化或者反序列化的: torch ...

  9. PL/SQL Developer如何连接64位的Oracle图解

    在64位Win7系统上安装64位的Oracle数据库,但是没有对应的64位PL/SQL Developer,此时就不能使用PL/SQL Developer来进行直接连接的,所以要想实现连接还得需要其他 ...

  10. FastReport.Net 常用功能总汇

    一.常用控件 文本框:输入文字或表达式 表格:设置表格的行列数,输入数字或表达式 子报表:放置子报表后,系统会自动增加一个页面,你可以在此页面上设计需要的报表.系统在打印处理时,先按主报表打印,当碰到 ...