现代程序设计 网页前端开发作业(to 邹欣老师)
在一些著名的网站的搜索框上,会有一种“自动完成”功能。
比如google、百度和淘宝:



现在,我们来考虑如何实现这个功能。
第一步:模仿任意一个网站,编写一个类似的网页效果原型。
在这一步,不要估计开发时间。
把学习新技术(一些前端基础知识)的时间花在这个阶段。
以完成原型为目标,不必深入技术。
去 http://www.w3schools.com/ 获得入门知识
去 https://developer.mozilla.org/ 查阅文档
第二步:仔细观察三个网站的“自动完成”功能,比较它们<strong>功能</strong>的相同点和不同点,写成一份简单的需求分析文档。
请仅仅从功能角度分析这三个组件。
提示,如果你试图从代码中找到答案,你很可能陷入地狱。
除了界面,可以关注一些细节,比如键盘操作、响应时间。
第三步:设计并实现一个“自动完成”组件,使得它能够把三个网站的自动完成功能应付自如。
按照软件工程的模型进行设计、复审和实现。
在设计阶段,讨论清楚这个组件的用户需要面对的API:它们的命名、调用方式、编程风格、它所依赖的框架(如果有必要的话)。
尽量让使用变得简单。
尽量用可扩展性代替枚举需求。
根据第二步的需求来完成代码,不必试图跟原版"一模一样"。
考虑清楚如何管理这个组件用到的html、css和js代码。
第四步:找到另一个网站的自动完成功能,试试看我们的“自动完成”组件是否能够实现它!
如果可以实现,和小伙伴们讨论下,为什么你们的组件能够应对未知的需求?回顾设计阶段,哪些设计要素产生了关键性作用?
如果不可以实现,和小伙伴讨论下,为什么你们的组件无法应对新需求?需要做怎样的设计变更和代码重构,才能支持新的需求?
现代程序设计 网页前端开发作业(to 邹欣老师)的更多相关文章
- 201771030103-陈正丽 实验一 软件工程准备—<快速浏览 邹欣老师博客—读后感>
项目 内容 <软件工程> 代祖华老师博客 作业要求 邹欣老师博客 学习目标 具体目标 在大概阅读邹欣老师的博客时,发现老师写了关于很多方面的内容,有基础的也有比较深奥的,这次阅读过程中主要 ...
- 网页前端开发:微博CSS3适用细节初探
浏览器,作为一神器,帮我们打开了缤纷万千的网络世界窗口.而她发展到今天,也诞生了一个又一个的怀神版本,可能有人钟情于她的花哨,有人痴迷于她的速度……我们,作为重构工程师,必然要更关注他背后的技术革新, ...
- 写给IOS开发工程师的网页前端入门笔记
前言:作为IOS开发工程师,终会接触到网页前端开发,甚至可能会有 用HTML5开发IOS的app客户端的需求.比如现在上架的app就有比如理财类型的app有的就用HTML开发的,从理财类型的app需求 ...
- 2018上C语言程序设计(高级)作业- 第0次作业
准备工作(10分) 1.在博客园申请个人博客. 2.加入班级博客(2班班级博客链接地址)(1班班级博客链接地址) 3.关注邹欣老师博客.关注任课老师博客. 4.加入讨论小组,学习过程中遇到问题不要随意 ...
- C程序设计-----第0次作业
C程序设计-----第0次作业- 1.翻阅邹欣老师的关于师生关系博客,并回答下列问题,每个问题的答案不少于500字:(50分)- 1)最理想的师生关系是健身教练和学员的关系,在这种师生关系中你期望获得 ...
- 2018C程序设计—第0次作业
1.翻阅邹欣老师博客关于师生关系博客,并回答下列问题,每个问题的答案不少于500字 1)最理想的师生关系是健身教练和学员的关系,在这种师生关系中你期望获得来自老师的哪些帮助? 答:正如邹欣老师博客里所 ...
- 个人作业week7——前端开发感想总结
个人作业week7——前端开发感想总结 1. 反思 首先要谈谈在这次团队项目的工作中,我这边出现过的较为严重的一个问题:我和HoerWing (后端担当)合作时,最初因为我没有使用github(始终连 ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 常用网站--前端开发类+网页设计类+平面素材类+flash类
前端开发类 animate CSS 前端开发网 我爱CSS 大家网 W3School jQuery开发技术详解教程视频 jQuery中文社区 jQueryChina 网页设计类 禅意花园 CSS Do ...
随机推荐
- eclipse调试
http://blog.csdn.net/u012176591/article/details/23297889
- 初识node.js
Node.js不是一种语言:不是框架:也不是工具.它是用于运行基于JavaScript应用程序的运行时环境.
- 六个漂亮的 ES6 技巧
六个漂亮的 ES6 技巧 转载 原文:2ality 译文:众成翻译 链接:http://www.zcfy.cc/article/346 在这篇文章里,我将演示 6 种 ES6 新特性的使用技巧.在每个 ...
- 【刷题记录】 && 【算法杂谈】折半枚举与upper_bound 和 lower_bound
[什么是upper_bound 和 lower_bound] 简单来说lower_bound就是你给他一个非递减数列[first,last)和x,它给你返回非递减序列[first, last)中的第一 ...
- GruntJS常用前端流程自动化配置-【持续优化】
前言 近期用Grunt进行前端开发经常要用到的一些Grunt插件,用起来非常顺手. 一.package.json文件配置如下: 包括coffeescript编译为js,css加CSS3适配前缀,css ...
- 1.2.1 OC概述
本文并非最终版本,如想关注更新或更正的内容,详见文末的联系方式,如有疏忽和遗漏,欢迎指正. 本文相关目录:(链接为简书链接) ====================== 所属文集:1.2 Objec ...
- 从零开始山寨Caffe·拾:IO系统(三)
数据变形 IO(二)中,我们已经将原始数据缓冲至Datum,Datum又存入了生产者缓冲区,不过,这离消费,还早得很呢. 在消费(使用)之前,最重要的一步,就是数据变形. ImageNet Image ...
- 【读书笔记】《编程珠玑》第一章之位向量&位图
此书的叙述模式是借由一个具体问题来引出的一系列算法,数据结构等等方面的技巧性策略.共分三篇,基础,性能,应用.每篇涵盖数章,章内案例都非常切实棘手,解说也生动有趣. 自个呢也是头一次接触编程技巧类的书 ...
- oracle表空间简单学习
1.重命名表空间:alter tablespace 原表空间名 rename to 新表空间名ps:(1)system 和sysaux表空间不能重名(2)如果该表空间中任何一个数据出于脱机状态或者表空 ...
- sql 更新列表中最老的一条数据
今天组长给个任务说要给摄像头触发一个列表.让缓存5条数据,每次摄像头触发更新一条,丢掉最老的一条数据.原来的update是直接更新掉一条,没带缓存的.然后搞了个sql语句,是这样的: UPDATE C ...