S05-02 Library-jQuery-项目:贝壳 
[TOC]
接口文档 
目录结构:

baseURL:
js
http://123.207.32.32:9060/beike/apiGET 首页数据 
请求方法 : 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 参数

防抖优化 
