郑大晔校

@武汉

 

 

崔鹏飞

上节课讲了哪些内容？

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