iscroll源码学习(1)
iscroll是移端端开发的两大利器之一（另一个是fastclick），为了将它整合的avalon，需要对它认真学习一番。下面是我的笔记。
第一天看的是它的工具类util.js
//用于做函数节流
var rAF = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) { window.setTimeout(callback, 1000 / 60); }; var utils = (function () {
var me = {}; var _elementStyle = document.createElement('div').style;
//取得可以用的私有前缀
var _vendor = (function () {
var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
transform,
i = 0,
l = vendors.length; for ( ; i 0 ) {
destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
distance = Math.abs(current) + destination;
duration = distance / speed;
} return {
destination: Math.round(destination),
duration: duration
};
};
//取得可以用transform样式名
var _transform = _prefixStyle('transform'); me.extend(me, {
hasTransform: _transform !== false,//判定浏览器是否支持CSS3 transform
hasPerspective: _prefixStyle('perspective') in _elementStyle,//支持透视效果
hasTouch: 'ontouchstart' in window,//是否是触摸屏
hasPointer: window.PointerEvent || window.MSPointerEvent, // IE10 is prefixed
hasTransition: _prefixStyle('transition') in _elementStyle//支持CSS3渐变
}); // This should find all Android browsers lower than build 535.19 (both stock browser and webview)
//判定安卓的浏览器是否版本过低
me.isBadAndroid = /Android /.test(window.navigator.appVersion) && !(/Chrome\/\d/.test(window.navigator.appVersion)); me.extend(me.style = {}, {//修正与CSS3变渐相关的样式名
transform: _transform,
transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
transitionDuration: _prefixStyle('transitionDuration'),
transitionDelay: _prefixStyle('transitionDelay'),
transformOrigin: _prefixStyle('transformOrigin')
});
//操作类名的三个常用方法
me.hasClass = function (e, c) {
var re = new RegExp("(^|\\s)" + c + "(\\s|$)");
return re.test(e.className);
}; me.addClass = function (e, c) {
if ( me.hasClass(e, c) ) {
return;
} var newclass = e.className.split(' ');
newclass.push(c);
e.className = newclass.join(' ');
}; me.removeClass = function (e, c) {
if ( !me.hasClass(e, c) ) {
return;
} var re = new RegExp("(^|\\s)" + c + "(\\s|$)", 'g');
e.className = e.className.replace(re, ' ');
}; 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.preventDefaultException = function (el, exceptions) {
for ( var i in exceptions ) {
if ( exceptions[i].test(el[i]) ) {
return true;
}
} return false;
};
//四套事件名
me.extend(me.eventType = {}, {
touchstart: 1,
touchmove: 1,
touchend: 1, mousedown: 2,
mousemove: 2,
mouseup: 2, pointerdown: 3,
pointermove: 3,
pointerup: 3, 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 );
}
},
circular: {
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)
fn: function (k) {
return Math.sqrt( 1 - ( --k * k ) );
}
},
back: {
style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
fn: function (k) {
var b = 4;
return ( k = k - 1 ) * k * ( ( b + 1 ) * k + b ) + 1;
}
},
bounce: {
style: '',
fn: function (k) {
if ( ( k /= 1 ) 源码还算易读，但也遇到几个不懂的地方。一个是momentum方法，物理公式忘光了，另一个是offset方法。offset的结果与我们常用的不一致。<!DOCTYPE html>
<html>
<head>
<title>iscroll学习 by 司徒正美</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" ></script>
<script> window.onload = function() {
var elem = document.querySelector("#son")
var 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
};
};
console.log(offset(elem)) //iscroll.offset 返回 [-400,-400]
console.log(avalon(elem).offset()) //jQuery.offset, avalon.offset返回 [400, 400] } </script>
</head>
<body>
<style> #parent{
position: absolute;
top:200px;
left:200px;
}
#son {
position: absolute;
top:200px;
left:200px;
}
</style>
<div ms-controller="test">
<div id="parent" >
<input id="son" />ddd
</div </div>
</body>
</html>iscroll源码学习(1)的更多相关文章
- 【iScroll源码学习04】分离IScroll核心
前言 最近几天我们前前后后基本将iScroll源码学的七七八八了,文章中未涉及的各位就要自己去看了 1. [iScroll源码学习03]iScroll事件机制与滚动条的实现 2. [iScroll源码 ...
- 【iScroll源码学习03】iScroll事件机制与滚动条的实现
前言 想不到又到周末了,周末的时间要抓紧学习才行,前几天我们学习了iScroll几点基础知识: 1. [iScroll源码学习02]分解iScroll三个核心事件点 2. [iScroll源码学习01 ...
- 【iScroll源码学习02】分解iScroll三个核心事件点
前言 最近两天看到很多的总结性发言,我想想今年好像我的变化挺大的,是不是该晚上来水一发呢?嗯,决定了,晚上来水一发! 上周六,我们简单模拟了下iScroll的实现,周日我们开始了学习iScroll的源 ...
- 【iScroll源码学习01】准备阶段 - 叶小钗
[iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文 http://www.cnblogs.com/yexiaochai/p/3 ...
- 【iScroll源码学习00】模拟iScroll
前言 相信对移动端有了解的朋友对iScroll这个库非常熟悉吧,今天我们就来说下我们移动页面的iScroll化 iScroll是我们必学框架之一,我们这次先根据iScroll功能自己实现其功能,然后再 ...
- 【iScroll源码学习01】准备阶段
前言 我们昨天初步了解了为什么会出现iScroll:[SPA]移动站点APP化研究之上中下页面的iScroll化(上),然后简单的写了一个demo来模拟iScroll,其中了解到了以下知识点: ① v ...
- Java集合专题总结（1）：HashMap 和 HashTable 源码学习和面试总结
2017年的秋招彻底结束了,感觉Java上面的最常见的集合相关的问题就是hash--系列和一些常用并发集合和队列,堆等结合算法一起考察,不完全统计,本人经历:先后百度.唯品会.58同城.新浪微博.趣分 ...
- jQuery源码学习感想
还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码, ...
- MVC系列——MVC源码学习：打造自己的MVC框架（四：了解神奇的视图引擎）
前言:通过之前的三篇介绍,我们基本上完成了从请求发出到路由匹配.再到控制器的激活,再到Action的执行这些个过程.今天还是趁热打铁,将我们的View也来完善下,也让整个系列相对完整,博主不希望烂尾. ...
随机推荐
- mysql 索引原理及查询优化
一 介绍 为何要有索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语句 ...
- LINQ 分页 和存储过程分页
存储过程分页 SELECT * FROM ( SELECT ROW_NUMBER() OVER(ORDER BY CreateDate DESC) AS RowNo, EstateAddress, E ...
- cuteftp不能连接虚拟机的解决方法
使用cuteftp在PC和虚拟机之间传送文件 工具/原料 PC机中装有cuteftp软件和虚拟机 注意事项 首先要确保虚拟机中的ftp软件已安装,如未安装可以用如下命令安装 sudo apt-get ...
- 移动端H5调用摄像头(选择上传图片)
<label>照相机</label> <input type="file" id='image' accept="image/*" ...
- C#中时间计算方法汇总
这几天要做一个关于时间数据统计的页面,发现有些东西还是比较用的,现总结如下. DateTime dt = DateTime.Now; //当前时间 DateTime startWeek = dt.A ...
- 6-19 Count Connected Components（20 分）
Write a function to count the number of connected components in a given graph. Format of functions: ...
- 2018-2019-2 《网络对抗技术》Exp5 msf 20165222
本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 总计:主动:ms17_010永恒之蓝(成功): 浏览器:office_word_hta(成功): 客户 ...
- 在做私密相冊的SDK，奇怪的是在ios6上项目里的navigationbar能够传进来一直往下传，但在ios7上却仅仅能够传一层，原来答案在下边
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/chenyong05314/article/details/33867247 //若不加这一句 在IO ...
- C#/.NET主线程与子线程之间的关系
以前一直没有在程序中写过总结,再翻开程序时却不知所云,所以我决定写总结 一般 一个应用程序就对应一个进程,一个进程可有一个或多个线程,而一般有一个主线程. 有的博客上说“至少 ...
- Install LAMP Server (Apache, MariaDB, PHP) On CentOS/RHEL/Scientific Linux 7
Install LAMP Server (Apache, MariaDB, PHP) On CentOS/RHEL/Scientific Linux 7 By SK - August 12, 201 ...