整站侧边栏开发实践（一）——栏目 #53
Description
整站侧边栏开发实践（一）——栏目
我们主站上至今没有侧边栏，但是这个功能其实在主站首页改版的需求中已经提出，而令大家迟迟未见其踪迹的原因是因为里面的部分接口尚需完善。
目前在产品的需求中，侧边栏需要有登录、购物车、我的收藏、我的足迹、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)这回就讲到这里了，希望对大家有所帮助。