iscroll-lite源码阅读

jackzou 发布于2019-08-22 16:17 / 2568人阅读

摘要：最后调用函数来判断是否需要重置位置保存事件的类型，如果跟已经保存的事件类型不是同一类，不继续执行函数。如果在滚动状态，调用函数来获取的位置，调用方法让停在当前位置。主要是选择动画效果，调用或是来进行滚动根据所选的动画效果，在每一个下调用函数

背景

最近开发移动端项目用到了iscroll，踩了不少坑，因此阅读源码加深下对这个工具的了解。
本次阅读的是iscroll-lite，包含了主要的功能，比完整版少了鼠标滚轮，滚动后对齐到特定位置，按键绑定及定制滚动条等功能。

主体结构

以当前的5.2版本为例，前三百行是工具函数，封装了一些工具。三百行到四百行是构造函数IScroll，起到配置和初始化的效果。四百行到一千修改了IScroll的原型，给IScroll实例加上了各种方法。最后是模块化相关的判断。总体的结构是很清晰的。

工具函数

_prefixStyle

用于浏览器兼容。

</>复制代码 
    var _vendor = (function () {
        var vendors = ["t", "webkitT", "MozT", "msT", "OT"],
            transform,
            i = 0,
            l = vendors.length;
        for ( ; i < l; i++ ) {
            transform = vendors[i] + "ransform";
            if ( transform in _elementStyle ) return vendors[i].substr(0, vendors[i].length-1);
        }
        return false;
    })();
    function _prefixStyle (style) {
        if ( _vendor === false ) return false;
        if ( _vendor === "" ) return style;
        return _vendor + style.charAt(0).toUpperCase() + style.substr(1);
    }

能力检测

判断浏览器是否支持相关的特性

</>复制代码 
    me.extend(me, {
        hasTransform: _transform !== false,
        hasPerspective: _prefixStyle("perspective") in _elementStyle,
        hasTouch: "ontouchstart" in window,
        hasPointer: !!(window.PointerEvent || window.MSPointerEvent), // IE10 is prefixed
        hasTransition: _prefixStyle("transition") in _elementStyle
    });

还有一些事件监听方面的处理函数，处理class的函数，处理惯性的函数momentum

父元素的位置

</>复制代码 
    me.offset = function (el) {
        var left = -el.offsetLeft,
            top = -el.offsetTop;
        // jshint -W084
        while (el = el.offsetParent) {
            left -= el.offsetLeft;
            top -= el.offsetTop;
        }
        // jshint +W084
        return {
            left: left,
            top: top
        };
    };

对事件进行分类

</>复制代码 
    me.extend(me.eventType = {}, {
        touchstart: 1,
        touchmove: 1,
        touchend: 1,
...略...
        MSPointerDown: 3,
        MSPointerMove: 3,
        MSPointerUp: 3
    });

动画处理的函数

</>复制代码 
    me.extend(me.ease = {}, {
        quadratic: {
            style: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
            fn: function (k) {
                return k * ( 2 - k );
            }
        },
        ....略....
    });

tap和click的事件模拟

</>复制代码 
    me.tap = function (e, eventName) {
        var ev = document.createEvent("Event");
        ev.initEvent(eventName, true, true);
        ev.pageX = e.pageX;
        ev.pageY = e.pageY;
        e.target.dispatchEvent(ev);
    };
    me.click = function (e) {
        var target = e.target,
            ev;
        if ( !(/(SELECT|INPUT|TEXTAREA)/i).test(target.tagName) ) {
            // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent
            // initMouseEvent is deprecated.
            ev = document.createEvent(window.MouseEvent ? "MouseEvents" : "Event");
            ev.initEvent("click", true, true);
         ...略...
            target.dispatchEvent(ev);
        }
    };

touchAction的设定

</>复制代码 
    me.getTouchAction = function(eventPassthrough, addPinch) {
        var touchAction = "none";
        if ( eventPassthrough === "vertical" ) {
            touchAction = "pan-y";
        } else if (eventPassthrough === "horizontal" ) {
            touchAction = "pan-x";
        }
        if (addPinch && touchAction != "none") {
            // add pinch-zoom support if the browser supports it, but if not (eg. Chrome <55) do nothing
            touchAction += " pinch-zoom";
        }
        return touchAction;
    };

元素的位置

</>复制代码 
    me.getRect = function(el) {
        if (el instanceof SVGElement) {
            var rect = el.getBoundingClientRect();
            return {
                top : rect.top,
                left : rect.left,
                width : rect.width,
                height : rect.height
            };
        } else {
            return {
                top : el.offsetTop,
                left : el.offsetLeft,
                width : el.offsetWidth,
                height : el.offsetHeight
            };
        }
    };

构造函数

先是获取了wrapper和scroller，接着是一些能力检测。

在这里通过eventPassthrough，scrollY，scrollX，freeScroll来配置滚动的方向。只有scrollY是默认为true，其他都是未设定undefined.
当eventPassthrough的值为vertical时，在垂直方向不使用iscroll的滚动，使用原生的滚动。为horizontal时，则水平方向如此。想要二维自由滚动，不能设置该值。

</>复制代码 
    this.options.eventPassthrough = this.options.eventPassthrough === true ? "vertical" : this.options.eventPassthrough;
    this.options.scrollY = this.options.eventPassthrough == "vertical" ? false : this.options.scrollY;
    this.options.scrollX = this.options.eventPassthrough == "horizontal" ? false : this.options.scrollX;
    this.options.freeScroll = this.options.freeScroll && !this.options.eventPassthrough;

接着还有其他属性的设定，最后调用_init,refresh,scrollTo,enable等函数

一些原形上绑定的函数

_init

只调用了_initEvents函数

_initEvents

在这里根据配置给wrapper或是window加入了鼠标事件，pointer事件和触摸事件，transition事件等事件的监听。这里用到了一种少见的事件绑定方法，在这里事件绑定的第三个参数不是常见的function，而是iscroll对象。而iscroll对象里有一个方法handleEvent,这种方式的好处就是可以传递this

</>复制代码 
handleEvent: function (e) {
        switch ( e.type ) {
            case "touchstart":
            case "pointerdown":
            case "MSPointerDown":
            case "mousedown":
                this._start(e);
                break;
            case "touchmove":
            case "pointermove":
            case "MSPointerMove":
            case "mousemove":
                this._move(e);
                break;
            case "touchend":
            case "pointerup":
            case "MSPointerUp":
            case "mouseup":
            case "touchcancel":
            case "pointercancel":
            case "MSPointerCancel":
            case "mousecancel":
              this._end(e);
            ...略...
            }
        }

refresh

保存wrapper和scroller的尺寸信息，及wrapper的位置信息。设定最大滚动距离,为负数。
接着判断是否存在水平滚动或是垂直滚动

</>复制代码 
        this.maxScrollX        = this.wrapperWidth - this.scrollerWidth;
        this.hasHorizontalScroll    = this.options.scrollX && this.maxScrollX < 0;

如果浏览器支持pointer，使用touchAction来限制wrapper。
最后调用resetPosition函数来判断是否需要重置位置

_start

保存事件的类型，如果跟已经保存的事件类型不是同一类，不继续执行函数。
如果scroller在滚动状态，调用getComputedPosition函数来获取scroller的位置，调用_translate方法让scroller停在当前位置。
保存当前的位置信息和触发事件的位置信息，设置状态信息

</>复制代码 
    this.initiated    = utils.eventType[e.type];
    this.moved        = false;
    this.distX        = 0;
    this.distY        = 0;
    this.directionX = 0;
    this.directionY = 0;
    this.directionLocked = 0;
    this.startX    = this.x;
    this.startY    = this.y;
    this.absStartX = this.x;
    this.absStartY = this.y;
    this.pointX    = point.pageX;
    this.pointY    = point.pageY;

_move

获取事件的位置信息，对比_start中保存的位置信息，计算偏移值

</>复制代码 
    var point        = e.touches ? e.touches[0] : e,
        deltaX        = point.pageX - this.pointX,
        deltaY        = point.pageY - this.pointY,

保存新的位置信息，位移信息

</>复制代码 
    this.pointX        = point.pageX;
    this.pointY        = point.pageY;
    this.distX        += deltaX;
    this.distY        += deltaY;

如果偏移小于10像素不执行滚动。偏移的大小值和设定来根据判断滚动的方向。最后调用_translate函数来滚动

_translate

根据设定，修改滚动条中的transform的值或是修改left和top的值来进行具体的滚动，保存信息到this.x和this.y

</>复制代码 
        if ( this.options.useTransform ) {
            this.scrollerStyle[utils.style.transform] = "translate(" + x + "px," + y + "px)" + this.translateZ;
        } else {
            x = Math.round(x);
            y = Math.round(y);
            this.scrollerStyle.left = x + "px";
            this.scrollerStyle.top = y + "px";
        }

_end

让scroller滚动到整数位置，根据位移和触发事件的时间的情况，摸你tap事件、click事件或是执行flick事件或调用scrollTO函数进行惯性滚动。

scrollTo

主要是选择动画效果，调用__translate或是_animate来进行滚动

_animate

根据所选的动画效果，在每一个requestAnimationFrame下调用_translate函数

云服务器 GPU云服务器源码阅读 webrtc源码阅读 hbase源码阅读如何阅读java源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94216.html

一篇文章把本该属于你的源码天赋还给你

摘要：一些方法不应该这样不应该漫无目的地随手拿起一分源码，试图去通读。应该这样精心挑选要阅读的源码项目。这最好是与你的编程语言你的工作内容你的兴趣所在相关的，这样才能更切实地感受到阅读源码给你带来的益处，更有动力继续。 showImg(https://segmentfault.com/img/bVbcvmm?w=785&h=525); 怎么阅读源码没有经验的技术差底子薄的初级程序员，如何阅...

chanjarster 2019-08-16 12:32 评论0 收藏0
精读《源码学习》

摘要：精读原文介绍了学习源码的两个技巧，并利用实例说明了源码学习过程中可以学到许多周边知识，都让我们受益匪浅。讨论地址是精读源码学习如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。 1. 引言 javascript-knowledge-reading-source-code 这篇文章介绍了阅读源码的重要性，精读系列也已有八期源码系列文章，分别是：精读《Immer.js》源...

aboutU 2019-08-26 10:15 评论0 收藏0
android高级工程师－阅读源码的经验总结

摘要：对于一个有追求的程序员来说必须读源码，当然阅读源码是一件令人头疼的事。和差不多，想法一样，但是和相比，搜索到的有价值结果不是很多，没有的理想，还有一些来着百度知道。对于一个有追求的程序员来说必须读源码，当然阅读源码是一件令人头疼的事。阅读别人的代码远比自己写代码要难。Linus 是Linux的早期作者，一句影响深远的话是Read The Fucking Source Code（RTF...

idisfkj 2019-08-14 14:35 评论0 收藏0

发表评论

登陆后可评论

0条评论

jackzou

男|高级讲师

我要关注我要私信

TA的文章

Verilog HDL 快速入门FPGA超级干货第一季

阅读 2502·2021-10-11 10:57
neironvps：1G内存/1核/10gSSD/1T流量，洛杉矶vps/瑞士vps/德国vps，$

阅读 1357·2021-10-09 09:59
网络安全—xss

阅读 2072·2019-08-30 15:53
献给前端求职路上的你们（上）

阅读 3275·2019-08-30 15:53
如何科学的组织React组件样式

阅读 1077·2019-08-30 15:45
美化文件上传按钮自定义input file样式

阅读 824·2019-08-30 15:44
Codepen 每日精选（2018-4-11）

阅读 3511·2019-08-30 14:24
CSS笔记

阅读 1021·2019-08-30 14:21

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

iscroll-lite源码阅读

_prefixStyle

</>复制代码

能力检测

</>复制代码

父元素的位置

</>复制代码

对事件进行分类

</>复制代码

动画处理的函数

</>复制代码

tap和click的事件模拟

</>复制代码

touchAction的设定

</>复制代码

元素的位置

</>复制代码

</>复制代码

_init

_initEvents

</>复制代码

refresh

</>复制代码

</>复制代码

_move

</>复制代码

</>复制代码

_translate

</>复制代码

_end

scrollTo

_animate

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动