Iscroll source code

Recently, when I tried to use the web app, I used the iscroll. In view of its low level of skill, I didn't fully use it. So I am going to study it carefully today!

Open the official website. The current version is 5, but there are not many articles. The specific file version is:

• General iscroll. js version
• Iscroll-lite.js castrated version, if you only need the slide function, it is recommended that this, the size is very small. Snap, scrollbars, mouse wheel, and key bindings are not supported.
• The iscroll-probe.js specifically provides the ability to get the current location, which may be included in regular versions in the future.
• Iscroll-zoom.js add zooming Function
• Because the iscroll-infinlte.js is too long to scroll the list of mobile device hardware requirements are high, so this version uses the cache mechanism to achieve this effect.

The iscroll-probe version is used in the project. The specific reason is that you need to use the positioning function. But if you want to learn it today, choose iscroll-lite.

The first entry code:

// Request the animation frame var RAF = Window. requestanimationframe | window. webkitrequestanimationframe | window. required requestanimationframe | window. orequestanimationframe | window. msrequestanimationframe | function (callback) {window. setTimeout (callback, 1000/60) ;};/* Other draw requests (setTimeout) occurred before the display 16.7ms refresh interval, leading to the loss of all frames, the minimum 16.7 ms (1000/60 =, or 60 frames per second) is recommended for the setTimeout timer value. The difference between requestanimationframe and setTimeout is that the former follows the re-painting time of the browser, the latter frame is not lost */

 

　　

I don't understand ...... So I immediately looked at Xin Ye's blog to find out that this is a JS animation interface-requesting an animation frame. The difference between requestanimationframe and setTimeout is that the former follows the browser redrawing time, the latter frame is not lost. Css3 animation is so strong. Does requestanimationframe still have wool?

The sliding effect of iscroll is probably the first step, and the structure is very clear: util + iscroll. prototype.

Util encapsulates methods for obtaining style names (prefixes), event binding methods, animation easing methods, and style operation methods. The most important of them are preventdefaultexception, tap, click these three methods.

// Use the preventdefaultexception attribute in config. The matching element uses e. preventdefault (). // The default preventdefaultexception is {tagname:/^ (input | textarea | button | select) $/} Me. preventdefaultexception = function (El, exceptions) {for (var I in exceptions) {If (exceptions [I]. test (El [I]) {return true ;}} return false ;}; me. tap = function (E, eventname) {var EV = document. createevent ('event');/** the event can be called only when the newly created event object is assigned by the document object or the dispatchevent () method of the element object. the initevent () method initializes the attributes of the new event object */ev. initevent (eventname, true, true); eV. pagex = E. pagex; eV. pagey = E. pagey; // an event trigger is used to trigger an event e.tar get under an element. dispatchevent (EV) ;}; me. click = function (e) {var target = e.tar get, ev;
// Create an event if (! (/(Select | input | textarea)/I ). test (target. tagname) {EV = document. createevent ('mouseevents'); eV. initmouseevent ('click', true, true, E. view, 1, target. screenx, target. screeny, target. clientx, target. clienty, E. ctrlkey, E. altkey, E. shiftkey, E. metakey, 0, null); // indicates whether perventdefault is required. _ constructed = true; target. dispatchevent (EV );}};

Continue, that is, the iscroll initialization operation. When new iscroll is used, some default settings are prioritized. Note the following points:

1. The eventpassthrough parameter supports two types of writing: True/false for boolean type and 'vertical '/'horizontal for string type ';
2. When eventpassthrough is set to true, it is automatically converted to 'vertical 'and scrollx is set to false. That is, when horizontal sliding is performed, the browser native sliding is used;
3. Freescroll can only be used with scrollx {scrollx: True, freescroll: true}

Finally

// Iscroll initializes the mouse/gesture event this. _ Init (); // set the Slip Value this. refresh (); // locate this. scrollto (this. options. startx, this. options. starty); // indicates a flag of "enabled" this. enable ();

The most important thing here is the _ initevents called in the _ init method, which uses handleevent. This feature can be used to register any object as an event handler as long as it has the handleevent method.

Therefore, iscroll has a handleevent attribute, which uses the element. addeventlistener ('transitionend', iscroll) method to process related events.

IScroll.prototype = {　　handleEvent: function (e) {   　　 switch ( e.type ) {            case ‘touchstart‘:                ......                this._start(e);                break;            case ‘touchmove‘:                ......                this._move(e);                break;            case ‘touchend‘:                ......                this._end(e);                break;            case ‘orientationchange‘:            case ‘resize‘:                this._resize();                break;            case ‘transitionend‘:                ......                this._transitionEnd(e);                break;            case ‘wheel‘:                ......                this._wheel(e);                break;            case ‘keydown‘:                this._key(e);                break;            case ‘click‘:                if ( !e._constructed ) {                    e.preventDefault();                    e.stopPropagation();                }                break;        }    }}    

 

Now, the iscroll initialization and event processing are almost done. The next step is the event processing program. It is estimated that there are some location processing items. Continue:

• _ Start (e) is used to initialize some location information;
• _ Move (e) the position information is updated during the move process to trigger the dynamic effect;
• _ End (e) performs the corresponding easing action based on whether or not to be slowed down.

For details, refer to the iscroll-lite source code comment I wrote. In fact, after reading the source code, there is really nothing complicated, but there are several points that are to be discussed:

1. For the _ execevent (eventtype) method, the currently triggered event object, _ execevent (eventtype, event) should be added, because this. _ events [type] [I]. apply (this, []. slice. call (arguments, 1); it will be intercepted from the second parameter, and the event object will help us determine which element triggers the event.
2. There is no one-time unbinding method when unbinding an event. We recommend that you modify the unbinding method as follows:

   if ( index > -1 ) {    this._events[type].splice(index, 1);}else{    this._events[type].length = 0;}

    

Finally, complete parameter settings are provided:

VaR Options = {startx: 0, starty: 0, // whether the Y axis slides scrolly: True, // whether the X axis slides scrollx: True, // whether the x y axis slides freely, freescroll can only be used with scrollx {scrollx: True, freescroll: true} freescroll: false, // The direction lock threshold. For example, after a user clicks the screen, the gap between x and y is greater than 5px, determine the user's dragging intention, whether it is X or Y direction directionlockthreshold: 5, // whether there is an inertial buffer animation momentum: True, // whether the bounce can be dragged when the bounce is exceeded: true, // bouncetime: 600 when the bouncetime exceeds the boundun restoration time, // The animation bounceeasing: ''returned when the bounceeasing is exceeded, // whether to block the default rolling event preventdefault: True, // If a form element is encountered, the system will not stop bubbling. Instead, the system will pop up the corresponding input control preventdefaultexception: {tagname:/^ (input | textarea | button | select) $ /}, // hardware merging using GPU for graphic rendering hwcompositing: True, // use transition usetransition: True, // use transform usetransform: True, // whether penetration does not trigger native sliding eventpassthrough: false, // easing function {string | function} bounceeasing: '', // execute the refresh Method 60 ms to re-obtain the location information resizepolling: 60, // whether to allow clicking event CLICK: false, // simulate the tap event, and trigger the method specified by addeventlistener ('tap'). Tap: 'tap ', // deceleration: 0.0006, // whether the event is bound to the wrapper element. Otherwise, most of the events are bound to the window bindtowrapper: false. // disable the mouse disablemouse: false, // disable the pointer event disablepointer: false of the win system, // disable the touch event disabletouch: false };