企业官网建设流程全解析

• 前端
• UI组件

本文以 iScroll 官方发布记录 RELEASENOTES.md 为核心骨架，逐版梳理 iScroll 5 从 5.1.0（2014-01-09）到 5.2.0（2016-04-05）的完整演进脉络，并对照仓库源码验证每一条修复与新特性的真实实现。读完本文，你将能理解 iScroll 在事件体系、模块化、Pointer 兼容、无限滚动等方向上的工程化演进逻辑，以及各版本改动对实际项目升级的具体影响。

一、release notes 概览：iScroll 5 的版本时间线

iScroll 的作者 Matteo Spinelli 在发布记录末尾明确写道：I started collecting release notes from version 5.1.0——即发布说明是从 5.1.0 开始整理的，因此仓库中的 RELEASENOTES.md 完整覆盖了 iScroll 5 的五个正式版本：

当前仓库 package.json 中的版本号为5.2.0-snapshot，说明仓库基线正处在 5.2.0 时代；bower.json 的moduleType同时声明了amd、node、globals三种模块形态，与 5.2.0 引入 AMD 支持的发布记录遥相呼应。

二、5.1.0（2014.01.09）：Infinite scrolling 与事件机制的奠基

5.1.0 是 iScroll 5 第一个被正式记录发布说明的版本，其意义在于奠定了无限滚动能力、事件参数透传机制，并修复了 Android 特性检测的关键误判。

2.1 Infinite scrolling：缓存式无限滚动

5.1.0 首次引入无限滚动（Infinite scrolling）。与常规滚动把全部 DOM 渲染出来不同，iScroll 的无限滚动只维护一小批元素，通过滚动位置的相位计算循环复用它们，从而支持"理论上无限长"的列表。

从 src/infinite/infinite.js 的实现看，其核心机制包括：

• infiniteElements：滚动区域内参与复用的元素集合（可为选择器字符串或元素数组）；
• cacheSize：数据缓存条目数，默认1000，infiniteCacheBuffer约为其四分之一；
• dataset(start, count)：按起始位置与数量向外部请求数据（在 demos/infinite/index.html 中通过 AJAX 请求dataset.php实现）；
• dataFiller(el, data)：把缓存数据填充到复用元素上；
• updateCache(start, data)：将数据写入缓存并触发内容刷新。

无限滚动的边界计算在 src/infinite/refresh.js 中完成：当设置了infiniteElements时，maxScrollY由infiniteLimit（默认取2147483645 / infiniteElementHeight的整数部分）推导，从而使滚动范围逼近理论无限值。

2.2_execEvent支持参数传递

5.1.0 让自定义事件回调可以携带参数。核心实现位于 src/core.js：

_execEvent: function (type) { ... for ( ; i < l; i++ ) { this._events[type][i].apply(this, [].slice.call(arguments, 1)); } }

arguments从下标 1 开始切片并apply到回调，意味着任何调用方都可以向事件监听器透传额外数据——这为后续 wheel、zoom、indicator 等模块在事件中携带坐标或缩放信息铺平了道路。

2.3isBadAndroid误报修复（#558）

isBadAndroid用于识别低于 Android 4.1（WebKit build 535.19）的旧浏览器，这些设备对 CSS transition 的支持有缺陷。5.1.0 修复了该检测的误报问题，其逻辑见 src/utils.js：仅当 UA 命中Android且不含Chrome/\d时，才进一步用 Safari 版本号判定是否为 badAndroid。

这一检测结果在 src/core.js 的_transitionTime中被特殊利用：对 badAndroid 设备把 transition 时长写成0.0001ms再在下一帧还原为0s，以规避旧内核的渲染 bug。

2.4 构建产物的变更

5.1.0 起，压缩产物（dist/minified 文件）不再推送到主仓库，需要开发者自行构建。这与 package.json 中的devDependencies（jshint、uglify-js）一致——仓库只保留src/下的模块化源码与构建脚本依赖，产物在发布时生成。

三、5.1.1（2014.01.10）：开发者体验补全

5.1.1 紧随 5.1.0 一天后发布，重点补齐事件管理的对称性与动量行为的可调性。

3.1 新增off方法

此前 iScroll 只有on(type, fn)注册事件，5.1.1 补充了对称的off(type, fn)以卸载自定义事件，实现见 src/core.js：通过indexOf定位回调并splice移除。该方法的典型用途是在组件销毁或复用实例时解绑旧回调，避免内存泄漏与重复触发。

3.2 新增options.deceleration

deceleration用于调节惯性（momentum）动画的时长与速度。其底层计算位于 src/utils.js 的momentum()函数：位移distance与耗时time推导出速度speed，再按destination = current + speed² / (2 × deceleration)计算目标位置，duration = speed / deceleration。默认值0.0006；数值越大，惯性动画越短——文档提示从0.01起步才有可感知的效果，再大则几乎不产生惯性。

在 src/core.js 的_end中，momentum()以this.options.deceleration作为参数调用，也就是说该选项直接影响快速滑动松手后的滑行距离。

3.3 Infinite scroll 的useTransform适配

5.1.1 修复了无限滚动始终使用transform的问题，改为依据useTransform选项在两种定位方式间切换。见 src/infinite/infinite.js：

if ( this.options.infiniteUseTransform ) { this.infiniteElements[i].style[utils.style.transform] = 'translate(0, ' + top + 'px)' + this.translateZ; } else { this.infiniteElements[i].style.top = top + 'px'; }

当useTransform为假时，复用元素改用top定位——这与 src/core.js 中_translate对两种定位方式的统一处理保持一致。

3.4 细节修复

• #555：清理一个未使用的变量；
• #372：标签名检测改为大小写不敏感。对应实现见 src/utils.js，utils.click中对SELECT|INPUT|TEXTAREA的判断使用了/i标志。

四、5.1.2（2014.06.02）：Pointer 事件支持

5.1.2 是 iScroll 向标准 Pointer Events 靠拢的关键一步。

4.1 W3C Pointer 支持与MSPointerEvent检测修复（#713）

该版本加入 W3C Pointer 事件支持，并修复了旧 IE 前缀事件MSPointerEvent的检测。仓库中有两处直接证据：

• 特性检测：src/utils.js 的hasPointer: !!(window.PointerEvent || window.MSPointerEvent)，显式兼容标准与 IE10 前缀两种形态；
• 事件绑定：src/core.js 在hasPointer且未禁用disablePointer时，为 wrapper 绑定pointerdown、为滚动目标绑定pointermove/pointerup/pointercancel。

事件名称前缀的转换由 src/utils.js 的prefixPointerEvent完成：当存在window.MSPointerEvent时，把pointerdown之类的标准名转换为MSPointerDown。这一方法本身在后续 5.2.0 又经历了一次修复（见第六节）。

4.2 构建失败修复（#707）

5.1.2 修复了dist目录不存在时构建失败的问题。结合 5.1.0 起产物不再入库的变更，可以推断这是构建脚本健壮性的一次补强：构建前自动创建输出目录，而不是直接报错。

五、5.1.3（2014.09.19）：Firefox 滚动修复（#577）

5.1.3 只有一条修复记录：修复 Firefox 中的滚动问题（#577）。从源码结构看，Firefox 相关的兼容工作主要围绕滚轮事件展开——src/wheel/wheel.js 同时绑定了三种滚轮事件形态：标准wheel、旧 IE 的mousewheel、以及 Firefox 历史实现DOMMouseScroll，并在destroy时一并解绑。此外 src/core.js 对transitionend也做了webkitTransitionEnd、oTransitionEnd、MSTransitionEnd多前缀兼容。可见 5.1.3 的修复属于这一"多事件形态兜底"策略的一部分。

六、5.2.0（2016.04.05）：跨平台兼容性大修

5.2.0 是发布记录中改动最密集的版本，横跨 Chrome 兼容、Pointer 工具方法、事件去重、指示器、模块化与默认配置策略六个方向。

6.1 Chrome 滚动异常修复（#760、#441、#943、#927、#780）

5.2.0 集中修复了 Chrome 中一系列"奇怪滚动"问题。虽然发布记录没有逐条给出根因，但从源码可以定位 iScroll 针对 Chrome/Android WebView 的核心兼容手段：

• isBadAndroid判定（src/utils.js）识别旧 WebKit 内核；
• _transitionTime中针对 badAndroid 的0.0001ms过渡 hack（src/core.js），先用极小过渡时长触发渲染、再在下一帧清零，规避旧内核的动画残留问题。

这些兼容逻辑正是 iScroll 在不同 Chrome 内核版本间表现一致性的底层保证。

6.2utils.prefixPointerEvent修复（#1009）

prefixPointerEvent本身在 5.1.2 引入，5.2.0 修复了它在某些调用路径下的行为。该方法见 src/utils.js，其作用是把标准 Pointer 事件名转换为 IE10 前缀形式：

me.prefixPointerEvent = function (pointerEvent) { return window.MSPointerEvent ? 'MSPointer' + pointerEvent.charAt(7).toUpperCase() + pointerEvent.substr(8) : pointerEvent; };

它被 src/core.js 和指示器、缩放等模块广泛调用，因此其正确性直接影响所有依赖 Pointer 事件的功能。

6.3 鼠标滚动方向修复（#1018、#652）

修复了鼠标滚动时directionX/directionY不准确的问题。方向推算见 src/wheel/wheel.js：

this.directionX = wheelDeltaX > 0 ? -1 : wheelDeltaX < 0 ? 1 : 0; this.directionY = wheelDeltaY > 0 ? -1 : wheelDeltaY < 0 ? 1 : 0;

值得注意的是，_wheel在计算wheelDeltaX/wheelDeltaY时会兼容deltaX（含deltaMode行模式）、wheelDeltaX/wheelDeltaY、wheelDelta、detail四种滚轮事件数据结构，方向修复正落在这一多分支归一化逻辑上。

6.4 destroy 时清理定时器（#924、#950）

修复实例销毁后定时器残留的问题。见 src/core.js：

destroy: function () { this._initEvents(true); clearTimeout(this.resizeTimeout); this.resizeTimeout = null; this._execEvent('destroy'); }

resizeTimeout是_resize（src/core.js）中防抖刷新用的定时器，wheelTimeout（src/wheel/wheel.js）与fadeTimeout（src/indicator/indicator.js）也都在destroy时被显式清理——这正是 #924、#950 修复的完整范围。

6.5useTransition=false时清理多余样式（#949）

修复了关闭 CSS transition 后 wrapper 上残留多余样式值的问题。与之呼应，src/core.js 在useTransition与useTransform都为假时，会主动为 scroller 补充position: relative（若未显式设置），确保top/left定位方案下布局正确、无冗余样式。

6.6 两次 click/tap 事件问题（#361）

修复了同一交互触发两次 click/tap 的问题。iScroll 为绕过原生滚动会拦截默认 click，其防御机制在 src/default/handleEvent.js：

case 'click': if ( this.enabled && !e._constructed ) { e.preventDefault(); e.stopPropagation(); } break;

而utils.click（src/utils.js）构造的替代 click 事件会打上ev._constructed = true标记；tap事件则通过 src/utils.js 的utils.tap合成并派发到目标元素。_constructed标记加上enabled判断，从机制上避免了事件重复派发与循环触发。

6.7 wheel 事件传播修复（#980）

修复滚轮事件的传播问题。_wheel中每次处理都会preventDefault()并管理wheelTimeout（src/wheel/wheel.js）：滚动开始立即触发scrollStart，停止滚动 400ms 后触发scrollEnd，防止事件向上冒泡干扰页面其他部分。该修复保证 iScroll 容器内的滚轮操作既被正确消费，又不会在页面层重复触发滚动。

6.8 indicators 修复（#768）

修复指示器（scrollbar）相关缺陷。指示器的创建与生命周期集中在 src/indicator/indicator.js 与 src/indicator/_initIndicators.js：包括默认滚动条的创建、fade淡入淡出、shrink缩放/裁剪边界、updatePosition中基于speedRatioX/Y的位置映射等。5.2.0 的修复涉及这些路径中的边界计算与事件绑定，确保指示器在多轴滚动、越界回弹等场景下与主滚动状态严格同步。

6.9 两次 scrollEnd 事件（#761）

修复同一滚动结束被派发两次的问题。从 src/core.js 的结构看，scrollEnd存在两条派发路径：一是_end在位置无变化或惯性结束后直接派发（src/core.js），二是_transitionEnd在 CSS transition 结束后派发（src/core.js）。当 transition 结束回调与手势结束同时到达时，就可能重复触发scrollEnd；#761 的修复即是对这两条路径的收敛（例如在_start中接管进行中的 transition 后立即补发一次scrollEnd，见 src/core.js）。

6.10 禁用状态下 click 不触发

修复 iScroll 被禁用后 click 事件不派发的问题。与 6.6 同一段代码（src/default/handleEvent.js）：enabled为假时直接不拦截、不阻止 click 事件，让元素恢复浏览器默认的点击行为。这与 src/core.js 的disable()/enable()开关形成完整配合。

6.11 AMD 模块支持

5.2.0 最重要的工程化变更是加入 AMD 支持。导出逻辑见 src/close.js：

if ( typeof module != 'undefined' && module.exports ) { module.exports = IScroll; } else if ( typeof define == 'function' && define.amd ) { define( function () { return IScroll; } ); } else { window.IScroll = IScroll; }

三种导出形态按 CommonJS → AMD → 全局变量 的优先级依次兜底，bower.json 的moduleType: ["amd", "node", "globals"]正是对这一能力的声明。从此 iScroll 可以被 RequireJS 等加载器按模块方式引入，不再强制依赖全局window.IScroll。

6.12 disableMouse / disableTouch / disablePointer 默认值调整

5.2.0 改变了三大输入通道的默认启用策略。5.1.x 时期默认全部监听、以"最先出现的那个事件为准"；5.2.0 改为基于特性检测的自动默认值，见 src/core.js：

disablePointer : !utils.hasPointer, disableTouch : utils.hasPointer || !utils.hasTouch, disableMouse : utils.hasPointer || utils.hasTouch,

即在支持 Pointer 的现代浏览器上默认只走 Pointer 通道；在不支持 Pointer 但支持 Touch 的移动端上默认启用 Touch、关闭 Mouse；只有在既无 Pointer 又无 Touch 的环境（如纯桌面）才回退到 Mouse。这套默认值与 src/core.js 的_initEvents按选项条件绑定事件的分支逻辑严格对应，既节省了无谓的事件监听开销，又保留了按需手动覆盖（显式传true/false）的灵活性。

6.13 移除 CLA

发布记录还提到"Removed CLA non-sense"，即取消了对贡献者签署 Contributor License Agreement 的要求，简化了社区参与流程。

七、从发布记录反观 iScroll 的工程化演进

综观五个版本的发布记录，可以提炼出 iScroll 5 工程化的三条主线：

1. 事件体系从单向到闭环。5.1.0 让_execEvent支持参数透传（src/core.js），5.1.1 补上off方法（src/core.js），5.2.0 又集中修复 click/tap 重复派发（#361）、双scrollEnd（#761）与禁用态 click（src/default/handleEvent.js）。事件 API 的对称性与触发路径的确定性，是自定义事件机制走向成熟的标志。

2. 模块化从全局变量到多规范。5.1.0 不再向仓库提交压缩产物，5.2.0 引入 AMD/CommonJS/全局三态导出（src/close.js），配合 package.json 的main字段与 bower.json 的moduleType，iScroll 完成了从"script 标签全局脚本"到"可被现代构建体系消费的库"的转型。

3. 特性检测从"全监听兜底"到"自动默认值"。5.1.0 修复isBadAndroid误报（#558），5.1.2 引入 W3C Pointer 支持（#713），5.2.0 将disablePointer/disableTouch/disableMouse默认值改为按hasPointer/hasTouch自动推导（src/core.js）。这一演进在保证"从桌面到智能电视"广泛兼容的同时，逐步收敛了不必要的资源消耗。

对仍在维护 iScroll 5 项目的开发者而言，这份 release notes 是一份难得的兼容性备忘录：升级到 5.2.0 时，应重点回归 Chrome/Android WebView 的滚动体验（6.1）、Pointer 通道下的 click/tap 行为（6.6、6.10）、destroy()后的定时器清理（6.4）以及滚轮方向（6.3）；若使用多模块加载，则可直接受益于 6.11 的 AMD 支持。以上所有结论均可在 src/ 目录对应的源码文件中逐行验证。

• 前端
• UI组件