郑大晔校

@武汉

 

 

崔鹏飞

上节课讲了哪些内容?

Web Application结构

本次课专注于前端

  • 能够将“后端”提供的数据展示在页面上
  • 能够添加新商品
  • 能够对商品列表进行搜索

目标

问题

我们没有后端系统,也就谈不上“后端”提供数据,怎么办?

  • 能够将“后端”提供的数据展示在页面上
  • 能够添加新商品
  • 能够对商品列表进行搜索

解决方案

在前端构造假数据

目标

问题

假数据构造出来了,如何把它显示到页面上呢?

  • 能够将“后端”提供的数据展示在页面上
  • 能够添加新商品
  • 能够对商品列表进行搜索

解决方案

  • 找到要修改的页面元素
  • 用干巴巴的数据生成新的页面元素
  • 把新生成的页面元素加入页面

目标

问题

如何找到要修改的页面元素?

解决方案

jQuery selector

  • 找到要修改的页面元素
  • 用干巴巴的数据生成新的页面元素
  • 把新生成的页面元素加入页面

目标

问题

如何生成页面元素?

解决方案

  • jQuery
  • 找到要修改的页面元素
  • 用干巴巴的数据生成新的页面元素
  • 把新生成的页面元素加入页面

目标

问题

如何向已存在的页面元素内加入新内容呢?

解决方案

  • jQuery append
  • underscore map
  • 找到要修改的页面元素
  • 用干巴巴的数据生成新的页面元素
  • 把新生成的页面元素加入页面

子目标

  • 在前端构造假数据
  • 找到要修改的页面元素
  • 用干巴巴的数据生成新的页面元素
  • 把新生成的页面元素加入页面

总体目标

  • 能够将“后端”提供的数据展示在页面上
  • 能够添加新商品
  • 能够对商品列表进行搜索

第一课小结

git diff

目标

问题

这个目标可以一蹴而就吗?

似乎不行,步子太大,容易!@#¥

  • 能够将“后端”提供的数据展示在页面上
  • 能够添加新商品
  • 能够对商品列表进行搜索

解决方案

  • 页面上要有输入框(商品名,图片链接,商品描述)和添加按钮
  • 我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码
  • 收集输入框的内容,构造新数据
  • 把新数据展示到页面上

目标

问题

没有问题,上次课已经学过了

解决方案

写HTML代码

  • 页面上要有输入框(商品名,图片链接,商品描述)和添加按钮
  • 我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码
  • 收集输入框的内容,构造新数据
  • 把新数据展示到页面上

目标

问题

如何知道按钮被点击了呢?

解决方案

  • 订阅DOM事件
  • 用JS代码响应事件
  • 页面上要有输入框(商品名,图片链接,商品描述)和添加按钮
  • 我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码
  • 收集输入框的内容,构造新数据
  • 把新数据展示到页面上

目标

问题

如何收集输入框的内容?

解决方案

  • jQuery selector
  • jQuery val
  • 页面上要有输入框(商品名,图片链接,商品描述)和添加按钮
  • 我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码
  • 收集输入框的内容,构造新数据
  • 把新数据展示到页面上

目标

问题

我们需要根据新数据生成页面元素,是要再写一次类似的代码吗?

解决方案

复用已有代码,生成页面元素并将其加入页面

  • 页面上要有输入框(商品名,图片链接,商品描述)和添加按钮
  • 我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码
  • 收集输入框的内容,构造新数据
  • 把新数据展示到页面上

子目标

总体目标

  • 能够将“后端”提供的数据展示在页面上
  • 能够添加新商品
  • 能够对商品列表进行搜索

第二课小结

  • 页面上要有输入框(商品名,图片链接,商品描述)和添加按钮
  • 我们要获知按钮何时被点击,并在该事件发生时执行我们想要的代码
  • 收集输入框的内容,构造新数据
  • 把新数据展示到页面上

git diff

目标

问题

搜索听起来就不像是可以一下子搞定的事情,怎么办?

  • 能够将“后端”提供的数据展示在页面上
  • 能够添加新商品
  • 能够对商品列表进行搜索

解决方案

  • 页面上要有输入搜索关键字的输入框
  • 我们要获知输入内容的变化
  • 根据关键字找到符合条件的商品
  • 仅把符合条件的商品显示在页面上
  • 搜索条件清空时,恢复列表的展示

目标

问题

没有问题,HTML都会写了

解决方案

So easy

  • 页面上要有输入搜索关键字的输入框
  • 我们要获知输入内容的变化
  • 根据关键字找到符合条件的商品
  • 仅把符合条件的商品显示在页面上
  • 搜索条件清空时,恢复列表的展示

目标

问题

我们怎么知道输入内容的变化呢?

解决方案

订阅DOM事件

  • 页面上要有输入搜索关键字的输入框
  • 我们要获知输入内容的变化
  • 根据关键字找到符合条件的商品
  • 仅把符合条件的商品显示在页面上
  • 搜索条件清空时,恢复列表的展示

目标

问题

如何在多条商品中找到我们想要的?

是要逐个遍历并把符合条件的加入新数组吗?

解决方案

NO!underscore filter

  • 页面上要有输入搜索关键字的输入框
  • 我们要获知输入内容的变化
  • 根据关键字找到符合条件的商品
  • 仅把符合条件的商品显示在页面上
  • 搜索条件清空时,恢复列表的展示

目标

问题

又要做显示了,有没有一种似曾相识的感觉?

解决方案

复用已有代码

  • 页面上要有输入搜索关键字的输入框
  • 我们要获知输入内容的变化
  • 根据关键字找到符合条件的商品
  • 仅把符合条件的商品显示在页面上
  • 搜索条件清空时,恢复列表的展示

目标

问题

解决方案

复用已有代码

  • 页面上要有输入搜索关键字的输入框
  • 我们要获知输入内容的变化
  • 根据关键字找到符合条件的商品
  • 仅把符合条件的商品显示在页面上
  • 搜索条件清空时,恢复列表的展示

子目标

总体目标

  • 能够将“后端”提供的数据展示在页面上
  • 能够添加新商品
  • 能够对商品列表进行搜索

第三课小结

  • 页面上要有输入搜索关键字的输入框
  • 我们要获知输入内容的变化
  • 根据关键字找到符合条件的商品
  • 仅把符合条件的商品显示在页面上
  • 搜索条件清空时,恢复列表的展示

git diff


最终总结

  • 目标要明确
  • 条理要清晰
  • 执行要严格
Made with Slides.com