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也来完善下,也让整个系列相对完整,博主不希望烂尾. ...
随机推荐
- angularJs---route
route route---‘路由’ ajax的弊端: 1.ajax请求不会留下history记录 2.用户无法直接通过url进入应用中的指定页面(保存书签,分享朋友?) 3.ajax不利于SEO 前 ...
- [转载]c语言指针segmentation fault 指针常常错误的小地方
http://www.cnblogs.com/qingjoin/archive/2012/03/20/2408944.html #include <stdio.h> ] = ] = ] = ...
- 017PHP基础知识——流程控制语句(五)
<?php /** * break;退出循环: * 语法结构:break int;可以指定跳过几级循环: * while do_while for foreach switch */ /*$i= ...
- js控制easyui datagrid列的显示和隐藏
easyui datagrid 列隐藏和显示 $('#grid').datagrid('hideColumn','列field'); //把hideColumn换成showColumn 即为显示列
- 穷举算法和递推算法（Java）
穷举算法 概念: 最简单算法,依赖计算机的强大计算能力穷尽每一种可能的情况.穷举算法效率不高,但是适合一些没有明显规律可循的场合. 思想: 在使用穷举算法时,需要明确问题答案的范围,这样才可能在指定范 ...
- protel 99se 加载库文件 files not recognised 解决办法-转
WIN7操作系统下,protel99se添加元件库的操作方法(非修改ADVSch99SE方法) 最近更换了新电脑,操作系统是正版的WIN7,在用protel时发现元件库无法加载,很是郁闷,上网查找解决 ...
- 从U-Boot显示Logo到Android
/******************************************************************************* * 从U-Boot显示Logo到And ...
- MacBook下java环境的搭建
在Mac下搭建JAVA环境: 1.下载并安装JDK: 下载最新的JDK,傻瓜式安装,一直下一步就OK了. 2.配置环境变量: 在终端中输入 sudo vim ~/.bash_profile ,打开 . ...
- [TopCoder14647]HiddenRabbits
vjudge description 有一棵\(n\)个节点的树和\(m\)只兔子,每只兔子要住在一个点上(可以多只兔子住在同一个点上).有\(q\)组要求,每组形如"当以\(r\)为根时, ...
- MSMQ向远程服务器发送消息----错误总结
一:路径错误(Path)错误 如果向远程服务器发送消息,请使用格式名的形式,如: FormatName:Direct=TCP:121.0.0.1\\private$\\queueFormatName: ...