每个栏目在侧边栏上会有图标和标题,我在 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 的耦合问题,所以将这部分提取到了类实现的外部。
整站侧边栏开发实践(一)——栏目
我们主站上至今没有侧边栏,但是这个功能其实在主站首页改版的需求中已经提出,而令大家迟迟未见其踪迹的原因是因为里面的部分接口尚需完善。
目前在产品的需求中,侧边栏需要有登录、购物车、我的收藏、我的足迹、APP客户端二维码、回到顶部功能,这其中有些功能是必然会一直持续的,而有些功能可能是尝试性的,不长久的。比如我的足迹功能设计就相当的简单的,数据是存放在客户端这边(考虑到后端人力关系先做个简易版)。所以在开发之初我把可以简单的切换侧边栏栏目做为首要实现目标。
侧边栏效果图
抽象栏目类
从功能上看,购物车、我的收藏、我的足迹的表现基本一致,都是点击后展开侧边栏并显示内容。所以我们可以将它们抽象为栏目类(由于其他的栏目比较简单,比如登录是跳转 URL,所以不做抽象)。
每个栏目在侧边栏上会有图标和标题,我在 CSS 中使用不同的 class 以展现不同的图标,所以栏目类需要接受 class 和标题作为参数。而每个栏目在打开侧边栏内容区域后需要完成不同的动作,比如打开我的收藏需要展示用户的收藏商品,打开购物车则展示用户购物车中的商品等。所以出了 class 和标题,栏目类还需要接受一个回调作为后续执行方法(填充栏目内容)。
实现代码比较简单:
Item 类
有了栏目类,就可以结合侧边栏的命名空间,设计一个对外接口
addItem
,方便外部调用。addItem
方法中创建了栏目类的实例,并且额外做了两件事情:这也就是说栏目类实例的初始化是在
addItem
方法中。当然将这两件事交给栏目类本身实现也是可以的,但是考虑到 DOM 的耦合问题,所以将这部分提取到了类实现的外部。栏目的交互效果处理
在
addItem
方法的实现中,我们注意到有一个_exec
方法,它其实就是用于处理点击栏目后的交互效果的方法。正常情况下打开栏目后即可执行栏目的内容填充方法(即栏目类的
render
方法),但是其中还需要考虑到一些交互效果:这里使用了变量
currentItem
存储当前栏目。如果忽略各栏目的填充方法的实现,侧边栏的栏目就可以这样添加:
这回就讲到这里了,希望对大家有所帮助。
Thanks