iscroll是移端端开发的两大利器之一（另一个是fastclick），为了将它整合的avalon，需要对它认真学习一番。下面是我的笔记。

第一天看的是它的工具类util.js

  1. //用于做函数节流
  2. var rAF = window.requestAnimationFrame	||
  3. 	window.webkitRequestAnimationFrame	||
  4. 	window.mozRequestAnimationFrame		||
  5. 	window.oRequestAnimationFrame		||
  6. 	window.msRequestAnimationFrame		||
  7. 	function (callback) { window.setTimeout(callback, 1000 / 60); };
  8.  
  9. var utils = (function () {
  10. 	var me = {};
  11.  
  12. 	var _elementStyle = document.createElement('div').style;
  13.         //取得可以用的私有前缀
  14. 	var _vendor = (function () {
  15. 		var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
  16. 			transform,
  17. 			i = 0,
  18. 			l = vendors.length;
  19.  
  20. 		for ( ; i  0 ) {
  21. 			destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
  22. 			distance = Math.abs(current) + destination;
  23. 			duration = distance / speed;
  24. 		}
  25.  
  26. 		return {
  27. 			destination: Math.round(destination),
  28. 			duration: duration
  29. 		};
  30. 	};
  31.         //取得可以用transform样式名
  32. 	var _transform = _prefixStyle('transform');
  33.  
  34. 	me.extend(me, {
  35. 		hasTransform: _transform !== false,//判定浏览器是否支持CSS3 transform
  36. 		hasPerspective: _prefixStyle('perspective') in _elementStyle,//支持透视效果
  37. 		hasTouch: 'ontouchstart' in window,//是否是触摸屏
  38. 		hasPointer: window.PointerEvent || window.MSPointerEvent, // IE10 is prefixed
  39. 		hasTransition: _prefixStyle('transition') in _elementStyle//支持CSS3渐变
  40. 	});
  41.  
  42. 	// This should find all Android browsers lower than build 535.19 (both stock browser and webview)
  43.         //判定安卓的浏览器是否版本过低
  44. 	me.isBadAndroid = /Android /.test(window.navigator.appVersion) && !(/Chrome\/\d/.test(window.navigator.appVersion));
  45.  
  46. 	me.extend(me.style = {}, {//修正与CSS3变渐相关的样式名
  47. 		transform: _transform,
  48. 		transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
  49. 		transitionDuration: _prefixStyle('transitionDuration'),
  50. 		transitionDelay: _prefixStyle('transitionDelay'),
  51. 		transformOrigin: _prefixStyle('transformOrigin')
  52. 	});
  53.         //操作类名的三个常用方法
  54. 	me.hasClass = function (e, c) {
  55. 		var re = new RegExp("(^|\\s)" + c + "(\\s|$)");
  56. 		return re.test(e.className);
  57. 	};
  58.  
  59. 	me.addClass = function (e, c) {
  60. 		if ( me.hasClass(e, c) ) {
  61. 			return;
  62. 		}
  63.  
  64. 		var newclass = e.className.split(' ');
  65. 		newclass.push(c);
  66. 		e.className = newclass.join(' ');
  67. 	};
  68.  
  69. 	me.removeClass = function (e, c) {
  70. 		if ( !me.hasClass(e, c) ) {
  71. 			return;
  72. 		}
  73.  
  74. 		var re = new RegExp("(^|\\s)" + c + "(\\s|$)", 'g');
  75. 		e.className = e.className.replace(re, ' ');
  76. 	};
  77.  
  78. 	me.offset = function (el) {
  79. 		var left = -el.offsetLeft,
  80. 			top = -el.offsetTop;
  81.  
  82. 		// jshint -W084
  83. 		while (el = el.offsetParent) {
  84. 			left -= el.offsetLeft;
  85. 			top -= el.offsetTop;
  86. 		}
  87. 		// jshint +W084
  88.  
  89. 		return {
  90. 			left: left,
  91. 			top: top
  92. 		};
  93. 	};
  94.  
  95. 	me.preventDefaultException = function (el, exceptions) {
  96. 		for ( var i in exceptions ) {
  97. 			if ( exceptions[i].test(el[i]) ) {
  98. 				return true;
  99. 			}
  100. 		}
  101.  
  102. 		return false;
  103. 	};
  104.         //四套事件名
  105. 	me.extend(me.eventType = {}, {
  106. 		touchstart: 1,
  107. 		touchmove: 1,
  108. 		touchend: 1,
  109.  
  110. 		mousedown: 2,
  111. 		mousemove: 2,
  112. 		mouseup: 2,
  113.  
  114. 		pointerdown: 3,
  115. 		pointermove: 3,
  116. 		pointerup: 3,
  117.  
  118. 		MSPointerDown: 3,
  119. 		MSPointerMove: 3,
  120. 		MSPointerUp: 3
  121. 	});
  122.         //各种缓动公式
  123. 	me.extend(me.ease = {}, {
  124. 		quadratic: {
  125. 			style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
  126. 			fn: function (k) {
  127. 				return k * ( 2 - k );
  128. 			}
  129. 		},
  130. 		circular: {
  131. 			style: 'cubic-bezier(0.1, 0.57, 0.1, 1)',	// Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 1)
  132. 			fn: function (k) {
  133. 				return Math.sqrt( 1 - ( --k * k ) );
  134. 			}
  135. 		},
  136. 		back: {
  137. 			style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
  138. 			fn: function (k) {
  139. 				var b = 4;
  140. 				return ( k = k - 1 ) * k * ( ( b + 1 ) * k + b ) + 1;
  141. 			}
  142. 		},
  143. 		bounce: {
  144. 			style: '',
  145. 			fn: function (k) {
  146. 				if ( ( k /= 1 ) 
  147.  
  148. 源码还算易读，但也遇到几个不懂的地方。一个是momentum方法，物理公式忘光了，另一个是offset方法。offset的结果与我们常用的不一致。
  149. <!DOCTYPE html>
  150. <html>
  151.     <head>
  152.         <title>iscroll学习 by 司徒正美</title>
  153.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  154.         <script src="avalon.js" ></script>
  155.         <script>
  157.             window.onload = function() {
  158.                 var elem = document.querySelector("#son")
  159.                 var offset = function(el) {
  160.                     var left = -el.offsetLeft,
  161.                             top = -el.offsetTop;
  163.                     // jshint -W084
  164.                     while (el = el.offsetParent) {
  165.                         left -= el.offsetLeft;
  166.                         top -= el.offsetTop;
  167.                     }
  168.                     // jshint +W084
  170.                     return {
  171.                         left: left,
  172.                         top: top
  173.                     };
  174.                 };
  175.                 console.log(offset(elem)) //iscroll.offset 返回 [-400,-400]
  176.                 console.log(avalon(elem).offset()) //jQuery.offset, avalon.offset返回 [400, 400]
  178.             }
  180.         </script>
  181.     </head>
  182.     <body>
  183.         <style>
  185.             #parent{
  186.                 position: absolute;
  187.                 top:200px;
  188.                 left:200px;
  189.             }
  190.             #son {
  191.                 position: absolute;
  192.                 top:200px;
  193.                 left:200px;
  194.             }
  195.         </style>
  196.         <div ms-controller="test">
  197.             <div  id="parent" >
  198.                 <input id="son"  />ddd
  199.             </div
  201.         </div>
  202.     </body>
  203. </html>
  204. 												
  206. 											
    iscroll源码学习(1)的更多相关文章
    	
      1. 						
      1. 【iScroll源码学习04】分离IScroll核心
      1. 		
        前言 最近几天我们前前后后基本将iScroll源码学的七七八八了,文章中未涉及的各位就要自己去看了 1. [iScroll源码学习03]iScroll事件机制与滚动条的实现 2. [iScroll源码 ...
      1. 		
      4. 						
      1. 【iScroll源码学习03】iScroll事件机制与滚动条的实现
      1. 		
        前言 想不到又到周末了,周末的时间要抓紧学习才行,前几天我们学习了iScroll几点基础知识: 1. [iScroll源码学习02]分解iScroll三个核心事件点 2. [iScroll源码学习01 ...
      1. 		
      7. 						
      1. 【iScroll源码学习02】分解iScroll三个核心事件点
      1. 		
        前言 最近两天看到很多的总结性发言,我想想今年好像我的变化挺大的,是不是该晚上来水一发呢?嗯,决定了,晚上来水一发! 上周六,我们简单模拟了下iScroll的实现,周日我们开始了学习iScroll的源 ...
      1. 		
      10. 						
      1. 【iScroll源码学习01】准备阶段 - 叶小钗
      1. 		
        [iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3 ...
      1. 		
      13. 						
      1. 【iScroll源码学习00】模拟iScroll
      1. 		
        前言 相信对移动端有了解的朋友对iScroll这个库非常熟悉吧,今天我们就来说下我们移动页面的iScroll化 iScroll是我们必学框架之一,我们这次先根据iScroll功能自己实现其功能,然后再 ...
      1. 		
      16. 						
      1. 【iScroll源码学习01】准备阶段
      1. 		
        前言 我们昨天初步了解了为什么会出现iScroll:[SPA]移动站点APP化研究之上中下页面的iScroll化(上),然后简单的写了一个demo来模拟iScroll,其中了解到了以下知识点: ① v ...
      1. 		
      19. 								
      1. Java集合专题总结（1）：HashMap 和 HashTable 源码学习和面试总结
      1. 		
        2017年的秋招彻底结束了,感觉Java上面的最常见的集合相关的问题就是hash--系列和一些常用并发集合和队列,堆等结合算法一起考察,不完全统计,本人经历:先后百度.唯品会.58同城.新浪微博.趣分 ...
      1. 		
      22. 						
      1. jQuery源码学习感想
      1. 		
        还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码, ...
      1. 		
      25. 						
      1. MVC系列——MVC源码学习：打造自己的MVC框架（四：了解神奇的视图引擎）
      1. 		
        前言:通过之前的三篇介绍,我们基本上完成了从请求发出到路由匹配.再到控制器的激活,再到Action的执行这些个过程.今天还是趁热打铁,将我们的View也来完善下,也让整个系列相对完整,博主不希望烂尾. ...
      1. 		
      28. 		
    29. 	
    30.  
    31. 随机推荐
      	
        1. 									
        1. bzoj1176
        1. 			
          题解: 和上一题差不多 就加上一个初始值 代码: #include<bits/stdc++.h> ; using namespace std; int n,m,cnt,s,sum[N],a ...
        1. 			
        4. 						
        1. CentOS7 Could not retrieve mirrorlist http://mirrorlist.centos.org/?...
        1. 			
          在执行命令 sudo yum clean expire-cache 清理完过期的缓存后,再执行yum install 或 update命令都失败了.原因是清理过期缓存结果不该被清理的也删掉了,可能是y ...
        1. 			
        7. 						
        1. VS2017打包安装程序
        1. 			
          VS2017 并不自带安装部署项目,需要在[扩展和更新]中安装插件:Microsoft Visual Studio 2017 Installer Projects(现更名为Microsoft Visu ...
        1. 			
        10. 						
        1. iOS笔记之ScrollView
        1. 			
          ScrollView三个基本的要理解的属性: contentSize The size of the content view.所以很好理解,contentSize也就是scrollView可滚动的区 ...
        1. 			
        13. 						
        1. linux命令返回值的含义
        1. 			
          linux命令执行后无论成功与否都有一个返回值: 如果为 0,则表示命令执行成功,其它值则表示错误, 具体的错误码含义如下: "OS error code 1: Operation not  ...
        1. 			
        16. 						
        1. 20155202 2016-2017-2 《Java程序设计》第8周学习总结
        1. 			
          20155202 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 有Java.util.logging包提供了日志功能相关类与接口,使用日志起点是logger ...
        1. 			
        19. 						
        1. ES6必知必会 （六）—— Class
        1. 			
          1.在之前的JS面向对象编程中,如果定义一个构造函数,一般来说是这样: function Person( name , age ) { this.name = name; this.age = age ...
        1. 			
        22. 						
        1. 使用docker 部署graylog集群
        1. 			
          graylog 相比elk 有比较简单的方面,使用简单,配置简单,可视化工具是一体化的,比较方便 搭建使用docker,多主机部分,结合docker-compose 进行管理 具体docker 配置文 ...
        1. 			
        25. 						
        1. Mac 使用ab性能测试工具
        1. 			
          Mac 使用ab命令进行压测 1.在Mac中配置Apache ①启动Apache,打开终端 sudo apachectl -v 如下显示Apache的版本 sudo apachectl start 这 ...
        1. 			
        28. 						
        1. 【c#】设置Socket连接、接收超时（转）
        1. 			
          用到Socket,发现如果连接错误,比如Connect的端口不对,会造成很长时间的延时,程序就僵在那里,效果很不好: 在网上找到很方便的设置办法,分享如下: Socket.SetSocketOptio ...
        1. 			
        31. 			
        			
      32. 							
      33.