一步一步实现字母索引导航栏

作者：伯乐在线专栏作者 - lubootang
链接：http://web.jobbole.com/88889/
链接：在线DEMO（http://www.luobotang.cn/index-sidebar/），
源代码（https://github.com/luobotang/index-sidebar）
这个索引导航栏的效果在很多 APP 中都有应用，我也是参考了一些 APP 的效果进行实现。

不过之前接触移动端页面开发较少，所以是边学边做，也就把这个过程中的一些东西整理记录下来。

设计

这个功能的基本需求可以总结为一句话：手指在导航栏（也就是 DEMO 上页面右侧的包含字母的竖条）拖动时，根据当前手指位置，页面主体内容列表跳转到对应字母的内容项。

当然，延伸开来，可以是对于已经排序的列表，导航栏显示对应的索引字符列表，支持快速跳转到对应的索引位置。

这里主要介绍导航栏的实现，只看导航栏的话，其实要实现的东西比较简单，只需要在手指移动时获取对应的字母即可。页面主体内容列表的跳转应该交由另一个列表组件实现。

在程序代码中，组合导航栏和内容列表两个组件，导航栏索引字母更新时，内容列表跳转到对应的位置。

结合 DEMO，整体的实现逻辑为：

// 创建一个内容列表组件
var itemList = new ItemList(data)

// 创建一个索引导航组件
var indexSidebar = new IndexSidebar()

// 组合两个组件实现功能
// 监听索引导航组件，一旦索引字符更新，内容列表跳转至对应的索引字符
indexSidebar.on(‘charChange’, function (ch) {
itemList.gotoChar(ch)
})

接下来，我们一步步实现。

第 1 步：创建 IndexSidebar “类”

我选择采用实例化“类”的方式来创建新的组件对象，定义“类”，其实就是创建一个构造函数（当然，采用 ES6 语法会更清晰，不过考虑兼容性这里不使用）：

function IndexSidebar(options) {
// TODO 处理 options
this.initialize(options)
}

IndexSidebar.prototype.initialize = function (options) {
// TODO 初始化
}

这里借鉴 Backbone 的模式，将组件初始化的逻辑单独写在一个 initialize() 方法中，当然逻辑也可以都写在构造函数中。

在实现具体的功能前，我们可以先让前面设计的代码跑起来，首先补全导航组件的接口方法，支持监听事件：

// 特定事件触发时，