第 5 步：完善索引导航组件
其实基本功能已经实现，不过既然是想作为开源组件发布，还是再“包装”下，主要做了以下几方面的完善：
支持根据屏幕高度调整导航栏的高度计算屏幕高度，和组件距离屏幕顶部和底部的距离，将索引字符平均分布。
支持组件配置选项，并提供缺省选项由于不想依赖其他库，且考虑兼容性（不能使用 Object.assign），所以自己实现了：
JavaScript
123456789101112131415161718192021222324 var defaultOptions = { chars: '*ABCDEFGHIJKLMNOPQRSTUVWXYZ#', isAdjust: true, // 是否需要自动调整导航栏高度 offsetTop: 70, offsetBottom: 10, lineScale: 0.7, charOffsetX: 80, charOffsetY: 20} function IndexSidebar(options) { options = options || {} // 遍历缺省选项逐一处理 for (var k in defaultOptions) { if (defaultOptions.hasOwnProperty(k)) { // 未给出选项值时使用缺省选项值 options[k] = options[k] || defaultOptions[k] } } this.options = options this.initialize(options)}
支持不同的方式引用组件这个和一般的模块差不多，不过额外支持了一下 SeaJS（define.cmd）：
JavaScript
1234567891011121314 (function (factory) { if (typeof module === 'object' && module.export) { module.export = factory() } else if (typeof define === 'function' && (define.amd || define.cmd)) { define([], factory) } else if (typeof window !== 'undefined') { window.IndexSidebar = factory() } })(function () { // ... return IndexSidebar})
总结
从看到这个需求，到查文档、设计、实现，以及作为开源工具发布，用了大概不到 1 天的时间。希望可以有同学能够从我的这个过程中收获一些东西吧。
想关注更多的同学可以点击链接加入群【前端资料交流】：https://jq.qq.com/?_wv=1027&k=41ZOvK4