Web Application结构

本次课专注于前端

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

目标

问题

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

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

解决方案

在前端构造假数据

目标

问题

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

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

解决方案

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

目标

问题

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

解决方案

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

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

目标

问题

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

解决方案

复用已有代码

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

目标

问题

解决方案

复用已有代码

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

子目标

总体目标

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

第三课小结

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

git diff

​

• http://goo.gl/gUIIm4 页面上要有输入搜索关键字的输入框
• http://goo.gl/9bzrsC 我们要获知输入内容的变化
• http://goo.gl/7YyXdo 根据关键字找到符合条件的商品
• http://goo.gl/qHhfHO 仅把符合条件的商品显示在页面上
• http://goo.gl/qHhfHO 搜索条件清空时，恢复列表的展示