郑大晔校
@武汉
崔鹏飞
上节课讲了哪些内容?
Web Application结构
![](https://s3.amazonaws.com/media-p.slid.es/uploads/pengfeicui/images/831630/browser_server.jpg)
本次课专注于前端
- 能够将“后端”提供的数据展示在页面上
- 能够添加新商品
- 能够对商品列表进行搜索
目标
问题
我们没有后端系统,也就谈不上“后端”提供数据,怎么办?
- 能够将“后端”提供的数据展示在页面上
- 能够添加新商品
- 能够对商品列表进行搜索
解决方案
在前端构造假数据
目标
问题
假数据构造出来了,如何把它显示到页面上呢?
- 能够将“后端”提供的数据展示在页面上
- 能够添加新商品
- 能够对商品列表进行搜索
解决方案
- 找到要修改的页面元素
- 用干巴巴的数据生成新的页面元素
- 把新生成的页面元素加入页面
目标
问题
如何找到要修改的页面元素?
解决方案
jQuery selector
- 找到要修改的页面元素
- 用干巴巴的数据生成新的页面元素
- 把新生成的页面元素加入页面
目标
问题
如何生成页面元素?
解决方案
- jQuery
找到要修改的页面元素- 用干巴巴的数据生成新的页面元素
- 把新生成的页面元素加入页面
目标
问题
如何向已存在的页面元素内加入新内容呢?
解决方案
- jQuery append
- underscore map
找到要修改的页面元素用干巴巴的数据生成新的页面元素- 把新生成的页面元素加入页面
子目标
在前端构造假数据找到要修改的页面元素用干巴巴的数据生成新的页面元素把新生成的页面元素加入页面
总体目标
能够将“后端”提供的数据展示在页面上- 能够添加新商品
- 能够对商品列表进行搜索
第一课小结
git diff
- http://goo.gl/SkNijU 在前端构造假数据
- http://goo.gl/kym4ll 找到要修改的页面元素
- http://goo.gl/sMgHnS 用干巴巴的数据生成新的页面元素
- http://goo.gl/2gzlPI 把新生成的页面元素加入页面
目标
问题
这个目标可以一蹴而就吗?
似乎不行,步子太大,容易!@#¥
能够将“后端”提供的数据展示在页面上- 能够添加新商品
- 能够对商品列表进行搜索
解决方案
- 页面上要有输入框(商品名,图片链接,商品描述)和添加按钮
- 我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码
- 收集输入框的内容,构造新数据
- 把新数据展示到页面上
目标
问题
没有问题,上次课已经学过了
解决方案
写HTML代码
- 页面上要有输入框(商品名,图片链接,商品描述)和添加按钮
- 我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码
- 收集输入框的内容,构造新数据
- 把新数据展示到页面上
目标
问题
如何知道按钮被点击了呢?
解决方案
- 订阅DOM事件
- 用JS代码响应事件
页面上要有输入框(商品名,图片链接,商品描述)和添加按钮- 我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码
- 收集输入框的内容,构造新数据
- 把新数据展示到页面上
目标
问题
如何收集输入框的内容?
解决方案
- jQuery selector
- jQuery val
页面上要有输入框(商品名,图片链接,商品描述)和添加按钮我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码- 收集输入框的内容,构造新数据
- 把新数据展示到页面上
目标
问题
我们需要根据新数据生成页面元素,是要再写一次类似的代码吗?
解决方案
复用已有代码,生成页面元素并将其加入页面
页面上要有输入框(商品名,图片链接,商品描述)和添加按钮我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码收集输入框的内容,构造新数据- 把新数据展示到页面上
子目标
总体目标
能够将“后端”提供的数据展示在页面上能够添加新商品- 能够对商品列表进行搜索
第二课小结
页面上要有输入框(商品名,图片链接,商品描述)和添加按钮我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码收集输入框的内容,构造新数据把新数据展示到页面上
git diff
- http://goo.gl/qofRPl 页面上要有输入框(商品名,图片链接,商品描述)和添加按钮
- http://goo.gl/ih68CT 我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码
- http://goo.gl/XDYPxT 收集输入框的内容,构造新数据
- http://goo.gl/yGrFpz 把新数据展示到页面上
目标
问题
搜索听起来就不像是可以一下子搞定的事情,怎么办?
能够将“后端”提供的数据展示在页面上能够添加新商品- 能够对商品列表进行搜索
解决方案
- 页面上要有输入搜索关键字的输入框
- 我们要获知输入内容的变化
- 根据关键字找到符合条件的商品
- 仅把符合条件的商品显示在页面上
- 搜索条件清空时,恢复列表的展示
目标
问题
没有问题,HTML都会写了
解决方案
So easy
- 页面上要有输入搜索关键字的输入框
- 我们要获知输入内容的变化
- 根据关键字找到符合条件的商品
- 仅把符合条件的商品显示在页面上
- 搜索条件清空时,恢复列表的展示
目标
问题
我们怎么知道输入内容的变化呢?
解决方案
订阅DOM事件
页面上要有输入搜索关键字的输入框- 我们要获知输入内容的变化
- 根据关键字找到符合条件的商品
- 仅把符合条件的商品显示在页面上
- 搜索条件清空时,恢复列表的展示
目标
问题
如何在多条商品中找到我们想要的?
是要逐个遍历并把符合条件的加入新数组吗?
解决方案
NO!underscore filter
页面上要有输入搜索关键字的输入框我们要获知输入内容的变化- 根据关键字找到符合条件的商品
- 仅把符合条件的商品显示在页面上
- 搜索条件清空时,恢复列表的展示
目标
问题
又要做显示了,有没有一种似曾相识的感觉?
解决方案
复用已有代码
页面上要有输入搜索关键字的输入框我们要获知输入内容的变化根据关键字找到符合条件的商品- 仅把符合条件的商品显示在页面上
- 搜索条件清空时,恢复列表的展示
目标
问题
解决方案
复用已有代码
页面上要有输入搜索关键字的输入框我们要获知输入内容的变化根据关键字找到符合条件的商品仅把符合条件的商品显示在页面上- 搜索条件清空时,恢复列表的展示
![](https://s3.amazonaws.com/media-p.slid.es/uploads/pengfeicui/images/831753/e3d20ba6-f197-4730-a3b5-dfe6ce374d0b.jpg)
子目标
总体目标
能够将“后端”提供的数据展示在页面上能够添加新商品能够对商品列表进行搜索
第三课小结
页面上要有输入搜索关键字的输入框我们要获知输入内容的变化根据关键字找到符合条件的商品仅把符合条件的商品显示在页面上搜索条件清空时,恢复列表的展示
git diff
- http://goo.gl/gUIIm4 页面上要有输入搜索关键字的输入框
- http://goo.gl/9bzrsC 我们要获知输入内容的变化
- http://goo.gl/7YyXdo 根据关键字找到符合条件的商品
- http://goo.gl/qHhfHO 仅把符合条件的商品显示在页面上
- http://goo.gl/qHhfHO 搜索条件清空时,恢复列表的展示
最终总结
- 目标要明确
- 条理要清晰
- 执行要严格
2015武汉郑大晔校第二次课
By Pengfei Cui
2015武汉郑大晔校第二次课
- 2,177