整站侧边栏开发实践（一）——栏目

[YIXUNFE]

整站侧边栏开发实践（一）——栏目

我们主站上至今没有侧边栏，但是这个功能其实在主站首页改版的需求中已经提出，而令大家迟迟未见其踪迹的原因是因为里面的部分接口尚需完善。

目前在产品的需求中，侧边栏需要有登录、购物车、我的收藏、我的足迹、APP客户端二维码、回到顶部功能，这其中有些功能是必然会一直持续的，而有些功能可能是尝试性的，不长久的。比如我的足迹功能设计就相当的简单的，数据是存放在客户端这边（考虑到后端人力关系先做个简易版）。所以在开发之初我把可以简单的切换侧边栏栏目做为首要实现目标。

侧边栏效果图

## 抽象栏目类

从功能上看，购物车、我的收藏、我的足迹的表现基本一致，都是点击后展开侧边栏并显示内容。所以我们可以将它们抽象为栏目类（由于其他的栏目比较简单，比如登录是跳转 URL，所以不做抽象）。

每个栏目在侧边栏上会有图标和标题，我在 CSS 中使用不同的 class 以展现不同的图标，所以栏目类需要接受 class 和标题作为参数。而每个栏目在打开侧边栏内容区域后需要完成不同的动作，比如打开我的收藏需要展示用户的收藏商品，打开购物车则展示用户购物车中的商品等。所以出了 class 和标题，栏目类还需要接受一个回调作为后续执行方法（填充栏目内容）。

实现代码比较简单：

var Item = function (klass, text, fn) {
  this.html = '<li class="' + (klass || '') + ' hover-item"><div class="cut-box"><span>' + (typeof text !== 'undefined' ? text : '') + '</span><b></b></div></li>'
  this.title = text
  this.render = fn || function () {return $.Deferred().reject()}
}

Item 类

属性与方法	描述
html	栏目在边栏上的 DOM 结构
title	栏目标题，边栏与内容区都会显示该标题
render	栏目被展开后的执行方法

有了栏目类，就可以结合侧边栏的命名空间，设计一个对外接口 addItem，方便外部调用。

function addItem (klass, text, fn) {
  var temp = new Item(klass, text, fn)
  if (klass !== 'cart') {
    $(temp.html).appendTo(dom.find('.item-list')).bind('click', function () {_exec(temp)})
  } else {
    dom.find('.item-list .cart').bind('click', function () {_exec(temp)})
  }
  items[klass] = temp
}

addItem 方法中创建了栏目类的实例，并且额外做了两件事情：

• 将栏目实例的 DOM 结构添加至侧边栏；
• 为栏目实例绑定点击事件。

这也就是说栏目类实例的初始化是在 addItem 方法中。当然将这两件事交给栏目类本身实现也是可以的，但是考虑到 DOM 的耦合问题，所以将这部分提取到了类实现的外部。

### 栏目的交互效果处理

在 addItem 方法的实现中，我们注意到有一个 _exec 方法，它其实就是用于处理点击栏目后的交互效果的方法。

正常情况下打开栏目后即可执行栏目的内容填充方法（即栏目类的 render 方法），但是其中还需要考虑到一些交互效果：

• 栏目打开后的 DIV 模拟滚动条初始化的问题；
• 同一个栏目多次点击时的 toggle 效果；
• 初次加载栏目内容时，内容区域的 loading 效果；
• 内容区展开后的标题变更。

function _exec (item) {
  if (currentItem === item && isOpen === true) {
    _close()
    return
  }
  if (currentItem !== item) {
    currentItem = item
    _showLoadingTip()
    _updateTitle(item.title)
    _open()
    item && $.when(item.render()).then(_handleScroll)
  } else {
    _open()
    _handleScroll()
  }
}

这里使用了变量 currentItem 存储当前栏目。

如果忽略各栏目的填充方法的实现，侧边栏的栏目就可以这样添加：

//添加右侧栏购物车
addItem('cart', '购物车', _initRightBarCart)

//添加我的收藏
addItem('favor', '我的收藏', _initFavor)

//添加我的足迹
addItem('history', '我的足迹', _initHistory)

这回就讲到这里了，希望对大家有所帮助。

Thanks