S05-02 Library-jQuery-项目:贝壳
[TOC]
接口文档
目录结构:
baseURL:
js
http://123.207.32.32:9060/beike/api
GET 首页数据
请求方法 : GET
接口地址 : /homePageInfo
必选参数 : 无
GET 搜索接口
请求方法 : GET
接口地址 : /sug/headerSearch
必选参数 :
js
?cityId=440100&cityName=广州&channel=site&keyword=白云山&query=白云山
GET 热门推荐
请求方法 : GET
接口地址 : /site/rent
必选参数 : 无
GET 城市数据
请求方法 : GET
接口地址 : /city
必选参数 : 无
封装网络请求
js
;(function(window, $) {
function request(config) {
// 返回一个Promise
return $.ajax({
timeout: config.timeout || 5000,
url: config.url || '',
method: config.method || 'GET',
data: config.data || {},
headers: config.headers || {}
})
}
function get(url, data = {}, config = {}) {
// 返回一个Promise
return request({
url,
method: 'GET',
data,
...config
})
}
function post(url, data = {}, config = {}) {
return request({
url,
method: 'POST',
data,
...config
})
}
window.HyReq = {
request,
get,
post
}
})(window, jQuery)
Home
初始化页面
热门推荐
1、基本操作:发送网络请求,并渲染到页面
2、优化:映射请求到的数组为一个简单的数组
3、优化:每次渲染前清除上次渲染内容
4、优化:失去/获取焦点时隐藏/显示搜索提示
5、性能优化:缓存网络请求,同时抽取渲染页面逻辑
搜索房源
网络请求
1、网络请求:发送网络请求获取数据,并渲染页面
2、动态参数:动态设置网络请求参数
聚焦时行为
如果 input 有关键字,搜索关键字;如果 input 没有关键字,搜索热门数据
渲染搜索栏
发送网络请求获取首页数据,渲染搜索栏
搜索栏切换
思路:通过事件委托监听搜索栏点击,在事件处理函数中做以下事情:
- 修改 li 的高亮
- 移动底部箭头
- 修改 placeholder
- 获取 li 中绑定的 key
channel 参数
1、搜索栏切换时保存,当前搜索项
2、搜索网络请求时动态设置 channel 参数