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也来完善下,也让整个系列相对完整,博主不希望烂尾. ...
随机推荐
- 快速切题 sgu136. Erasing Edges
136. Erasing Edges time limit per test: 0.25 sec. memory limit per test: 4096 KB Little Johnny paint ...
- windows安装mysql方法 mysql5.7以后的安装方法
mysql 安装步骤: 1.www.mysql.com 下载mysql 2.解压mysql到E盘,或者其他盘解压后 E:\mysql\bin (bin一定要按照这个目录) 3.这bin目录 ...
- JS代码执行机制
JS代码从编译到执行 我们写出一段JS代码,JS的引擎并不是按照我们书写的顺序从上到下顺序编译并且执行的,首先是按照自己的规则对我们的代码先进行编译,然后从上到下执行编译的代码. 在全局作用域中,JS ...
- Alpha冲刺一 （6/10）
前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10004107.html 作业博客:https://edu.cnblogs.com/campus ...
- PostgreSQL锁级别及什么操作获取什么锁
表级锁 大多数的表级锁是由内置的 SQL 命令获得的,但他们也可以通过锁命令来明确获取.可使用的表级锁包括: 访问共享(ACCESS SHARE) - SELECT 命令可在查询中引用的表上获得该锁. ...
- java IO 学习（二）
文件表示形式的转换: 一.从系统文件变成java中可以使用的文件对象 File file = new FIle("文件的路径"); 二.读取文件系统中文件的原始字节流,要读取字符流 ...
- 在做私密相冊的SDK，奇怪的是在ios6上项目里的navigationbar能够传进来一直往下传，但在ios7上却仅仅能够传一层，原来答案在下边
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/chenyong05314/article/details/33867247 //若不加这一句 在IO ...
- xargs命令学习
1.xargs复制文件 目录下文件结构为: . ├── demo1 │ ├── test.lua │ ├── test.php │ └── test.txt └── demo2 执行命令: find ...
- （5）函数式接口的简单使用之Predicate
我们经常操作List,例如现在有一个功能要求在所有人中筛选出年龄在20岁以上的人. public class MyTest { private final List<Person> ...
- android单元测试 activity跳转 以及 input 输入后 测试
Android junit实现多个Activity跳转测试 分类: Android Junit测试2011-11-14 16:49 1601人阅读 评论(2) 收藏 举报 androidjunitla ...