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也来完善下,也让整个系列相对完整,博主不希望烂尾. ...
随机推荐
- JavaScript---详解scroll
scroll scroll--译为‘滚动’,他是非常常用的属性. 滚动宽高 scrollHeight scrollHeight表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分(不要误解为只有 ...
- CF86D
题解: 莫队分块 分块大小为sqrt(n) 代码: #include<bits/stdc++.h> using namespace std; ; typedef long long ll; ...
- js 判断一个对象是否为空
由于对于一个空对象{},其boolean值也是真,所以不能简单的用boolean来判断: jQuery的源码里有一个判断空对象的方法 function isEmptyObject(a) { var b ...
- python 列表构造时的引用问题
以前老是不注意python对象引用,平时也没遇到这样的问题,昨天在这个小问题纠结了半天时间.真是TMD啊 先说明一下我的目的,我有一个包含16个元素的列表,每个元素也是一个小列表.我想每四个子列表为一 ...
- 作业要求20181023-4 Alpha阶段第2周/共2周 Scrum立会报告+燃尽图 03
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284] 版本控制:https://git.coding.net/liuyy08 ...
- 常量池之字符串常量池String.intern()
运行时常量池是方法区(PermGen)的一部分. 需要提前了解: 1. JVM内存模型. 2. JAVA对象在JVM中内存分配 常量池的好处 常量池是为了避免频繁的创建和销毁对象而影响系统性能,其实现 ...
- java重写toString方法
在输出对象属性时,重写toString按照你希望的输出形式重写 object类里的toString只是把字符串的直接打印,数字的要转化成字符再打印,而对象,则直接打印该对象的hash码.所以当你要想按 ...
- springboot项目中文件的下载（解决中文乱码问题）
最近使用springboot项目,一直以来文件都以英文格式存储,这次使用的是xls文件下载,文件名为中文的,特此记录下中文文件名的下载以及springboot中下载路径报错问题. 正文 在使用spri ...
- C#对Jason序列化匿名对象
引用: using System.Web.Script.Serialization; 代码: var resp = new { flag = false, url = ConfigReader.Log ...
- 使用Visual Studio Code打开浏览器查看HTML文件
FROM: http://www.cnblogs.com/undefined000/p/5466626.html 针对Version 1.8.0的更新 最近升级到1.8.0,发现上面的操作失效了,于 ...