以前看犀牛书收藏和组合别人的库。
; (function () {
'use strict'; if (!Date.now)
Date.now = function () { return new Date().getTime(); }; var vendors = ['webkit', 'moz'];
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
var vp = vendors[i];
window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
window.cancelAnimationFrame = (window[vp + 'CancelAnimationFrame']
|| window[vp + 'CancelRequestAnimationFrame']);
}
if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
|| !window.requestAnimationFrame || !window.cancelAnimationFrame) {
var lastTime = 0;
window.requestAnimationFrame = function (callback) {
var now = Date.now();
var nextTime = Math.max(lastTime + 16, now);
return setTimeout(function () { callback(lastTime = nextTime); },
nextTime - now);
};
window.cancelAnimationFrame = clearTimeout;
}
}());; (function(win, doc) { function JSLibrary(arg) { //用来保存选中的元素, elements是一个真正的数组, 不是HTMLCollection对象
this.elements = []; switch (typeof arg) {
case 'function':
_methodSets.ready(arg);
break;
case 'string':
switch (arg.charAt(0)) {
case '#': //ID
var obj = doc.querySelector(arg);
this.elements.push(obj);
break;
case '.': //class
this.elements = _methodSets.getByClass(doc, arg.substring(1));
break;
default: //tagName
this.elements = _methodSets.convertToArray(doc.getElementsByTagName(arg));
}
break;
case 'object':
this.elements.push(arg);
}
}; // 用来存放内部调用的方法
JSLibrary.methodSets = { //文档加载完毕执行js脚本
ready: (function() {
var funcs = []; //当获得事件时,要运行的函数
var bReady = false; //当触发事件处理程序时,切换到true //当文档准备就绪时,调用事件处理程序
function handler(e) {
//如果已经运行过一次, 只需要返回
if (bReady) return; //如果发生readystatechange事件,但是其状态不是'complete'的话, 那么文档尚未准备好
if (e.type === 'readystatechange' && doc.readyState !== 'complete') return; //运行所有注册函数, 注意每次都要计算funcs.length, 以防止这些函数的调用可能会导致注册更多的函数
for (var i = 0; i < funcs.length; i++) {
funcs[i].call(doc);
} //现在设置ready标识为true, 并移除所有函数
bReady = true;
funcs = null;
} //为接收到任何事件注册处理程序
if (doc.addEventListener) {
doc.addEventListener('DomContentLoaded', handler, false);
doc.addEventListener('readystatechange', handler, false);
win.addEventListener('load', handler, false); } else if (doc.attachEvent) {
doc.attachEvent('onreadystatechange', handler);
win.attachEvent('onload', handler);
} //返回whenReady()函数
return function whenReady(f) {
if (bReady) f.call(doc); //若准备完毕, 只需要运行它
else funcs.push(f); //否则, 加入列队等候
}
})(), //把NodeList数组对象转换成数组
convertToArray: function(nodes) {
var arrayOfNodes = null; try {
arrayOfNodes = Array.prototype.slice.call(nodes, 0);
} catch (ex) { //兼容ie8及以前的版本
arrayOfNodes = new Array();
for (var i = 0; i < nodes.length; i++) {
arrayOfNodes.push(nodes[i]);
} }; return arrayOfNodes;
}, myAddEvent: function(obj, sEv, fn) {
if (obj.attachEvent) {
obj.attachEvent('on' + sEv, function() {
if (false == fn.call(obj)) {
event.cancelBubble = true;
return false;
}
});
} else {
obj.addEventListener(sEv, function(ev) {
if (false == fn.call(obj)) {
ev.cancelBubble = true;
ev.preventDefault();
}
}, false);
}
}, getByClass: function(oParent, sClass) {
var aEle = oParent.getElementsByTagName('*');
var aResult = [];
var i = 0; for (i = 0; i < aEle.length; i++) {
if (aEle[i].className == sClass) {
aResult.push(aEle[i]);
}
} return aResult;
}, getStyle: function(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
} }; var _methodSets = JSLibrary.methodSets; /********************* 以下JSLibrary 原型方法 开始 ************************/
JSLibrary.prototype = {
constructor: JSLibrary, /**
* 这个点击事件是针对传统pc的
* 手机端使用tap事件
*/
click: function(callback) { this.elements.forEach(function(item) {
_methodSets.myAddEvent(item, 'click', callback);
}); return this;
}, _setEvent: function(evtName, callback) { var oFinger = null, currentDom = null; for (var i = 0, len = this.elements.length; i < len; i += 1) {
currentDom = this.elements[i];
if (currentDom.oFinger) { currentDom.oFinger.on(evtName, callback);
} else { oFinger = new jsLib.Finger(currentDom, {});
oFinger.on(evtName, callback);
currentDom.oFinger = oFinger;
};
};
}, _removeEvent: function(evtName, callback) { var currentDom = null; for (var i = 0, len = this.elements.length; i < len; i += 1) {
currentDom = this.elements[i];
if (currentDom.oFinger) {
currentDom.oFinger.off(evtName, callback);
};
};
}, /**
* 移动端事件
* @use
*
var aLi = jsLib('#ul1').find('li').swipe(swipe);
function swipe(ev) {
console.log(ev.direction);
}
aLi.tap(tap);
function tap(ev) {
console.log('tap');
jsLib(ev.target).removeSwipe(swipe);
}
aLi.doubleTap(doubleTap);
function doubleTap(ev) {
console.log('doubleTap');
jsLib(ev.target).removeTap(tap);
};
aLi.longTap(longTap);
function longTap(ev) {
console.log('longTap');
jsLib(ev.target).removeDTap(doubleTap);
}; aLi.destroy(); //销毁dom上的一切事件
*/ tap: function(callback) { this._setEvent('tap', callback); return this;
}, removeTap: function(callback) { this._removeEvent('tap', callback); return this;
}, swipe: function(callback) {
// console.log(ev.direction); this._setEvent('swipe', callback); return this;
}, removeSwipe: function(callback) { this._removeEvent('swipe', callback); return this;
}, longTap: function(callback) { this._setEvent('longTap', callback); return this;
}, removeLTap: function(callback) { this._removeEvent('longTap', callback); return this;
}, doubleTap: function(callback) { this._setEvent('doubleTap', callback); return this;
}, removeDTap: function(callback) { this._removeEvent('doubleTap', callback); return this;
}, destroy: function() { var currentDom = null; for (var i = 0, len = this.elements.length; i < len; i += 1) {
currentDom = this.elements[i];
if (currentDom.oFinger) {
currentDom.oFinger.destroy();
};
}; return this;
}, transform: function() { for (var i = 0, len = this.elements.length; i < len; i += 1) {
jsLib.Transform(this.elements[i]);
}; return this.toDom();
}, /*
* 据父节点查找其子孩子
* @param { String } 可以是标签名或.calss名
*/
find: function(str) {
var i = 0;
var aResult = []; for (i = 0; i < this.elements.length; i++) {
switch (str.charAt(0)) {
case '.': //class
var aEle = _methodSets.getByClass(this.elements[i], str.substring(1)); aResult = aResult.concat(aEle);
break;
default: //标签
var aEle = this.elements[i].getElementsByTagName(str); aResult = _methodSets.convertToArray(aEle);
}
} var newJSLib = jsLib(); newJSLib.elements = aResult; return newJSLib;
}, /*
* 获取点击时它在其兄弟节点的索引位置
*/
index: function() {
var _this = this;
return (function(_this) {
var obj = _this.elements[0];
var aBrother = obj.parentNode.children;
var i = 0; for (i = 0; i < aBrother.length; i++) {
if (aBrother[i] == obj) {
return i;
}
}
}(_this));
}, /*
* 获取第几个dom对象(含原型方法)
* @param { Number } 从0开始
*/
eq: function(n) {
return jsLib(this.elements[n]);
}, /*
* 返回元素的length长度
*/
length: function() {
return this.elements.length;
}, /*
* 单纯地获取dom对象(不含原型方法)
* @param { Number } 从0开始
*/
toDom: function() {
if (this.elements.length === 1) {
return this.elements[0];
} else {
return this.elements;
}
}, show: function() {
this.elements.forEach(function(item) {
item.style.display = 'block';
});
}, hide: function() {
this.elements.forEach(function(item) {
item.style.display = 'none';
});
}, /*
* 给节点元素添加样式(多个或者单个)
* @param { Object } {width: '100px', height: '100px', background: '#ccc', opacity: 30}
* @use: setStyle([oDiv,oDiv2], {width: '100px', height: '100px', background: '#ccc', opacity: 30});
* @use: setStyle(oDiv, {width: 100, height: 100, background: '#ccc', opacity: 30});
*/
setStyle: function(json) {
(function setDomStyle(obj, json) {
if (obj.length) { //对象数组 // for (var i = 0; i < obj.length; i++) arguments.callee(obj[i], json);
for (var i = 0; i < obj.length; i++) setDomStyle(obj[i], json); } else {
if (arguments.length == 2) { // for (var attr in json) arguments.callee(obj, attr, json[attr]);
for (var attr in json) setDomStyle(obj, attr, json[attr]); } else {
switch (arguments[1].toLowerCase()) {
case 'opacity':
obj.style.filter = 'alpha(opacity:' + arguments[2] + ')';
obj.style.opacity = arguments[2] / 100;
break;
default:
if (typeof arguments[2] == 'number') {
obj.style[arguments[1]] = arguments[2] + 'px';
} else {
obj.style[arguments[1]] = arguments[2];
}
break;
}
}
}
})(this.elements, json);
}, /*
* 获取/设置dom样式
* @param { String } 样式名
* @param { String } 样式值
*/
css: function(attr, value) {
if (arguments.length == 2) { //设置样式
var i = 0; for (i = 0; i < this.elements.length; i++) {
this.elements[i].style[attr] = value;
}
} else { //获取样式
if (typeof attr == 'string') {
return _methodSets.getStyle(this.elements[0], attr);
} else {
for (i = 0; i < this.elements.length; i++) {
var k = ''; for (k in attr) {
this.elements[i].style[k] = attr[k];
}
}
}
} return this;
}, /*
* 获取/设置dom属性
* @param { String } dom属性名
* @param { String } dom属性值
*/
attr: function(attr, value) {
if (arguments.length == 2) {
var i = 0; for (i = 0; i < this.elements.length; i++) {
this.elements[i][attr] = value;
}
} else {
return this.elements[0][attr];
} return this;
}, removeAttr: function(name) {
this.elements.forEach(function(item) {
item.removeAttribute(name);
}); return this;
}, /*
* 给元素节点设置Css3样式
* @param { String } name 属性名
* @param { String } value 属性值
*/
setStyle3: function(name, value) {
this.elements.forEach(function(item) {
item.style['Webkit' + name.charAt(0).toUpperCase() + name.substring(1)] = value;
item.style['Moz' + name.charAt(0).toUpperCase() + name.substring(1)] = value;
item.style['ms' + name.charAt(0).toUpperCase() + name.substring(1)] = value;
item.style['O' + name.charAt(0).toUpperCase() + name.substring(1)] = value;
item.style[name] = value;
});
}, /*
* 给元素节点添加class
* @param { String } sClass class名
*/
addClass: function(sClass) {
var re = new RegExp('\\b' + sClass + '\\b'); this.elements.forEach(function(item) {
if (re.test(item.className)) return;
item.className = (item.className + ' ' + sClass).match(/\S+/g).join(' ');
}); return this;
}, /*
* 移除某元素节点的class
* @param { String } sClass class名
*/
removeClass: function(sClass) {
var re = new RegExp('\\b' + sClass + '\\b', 'g'); this.elements.forEach(function(item) {
item.className = item.className.replace(re, '').replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ');
}); return this;
}, /*
* 设置dom文本
*/
html: function(str) {
this.elements.forEach(function(item) {
item.innerHTML = str;
});
}, /*
* 扩张方法,把一些好的方法扩张到JSLibrary原型上
* @param { String } 方法名
* @param { Function } 函数
*/
extend: function(name, fn) {
JSLibrary.prototype[name] = fn;
}, /**
* [功能: 返回元素e的第几层祖先元素, 如果不存在此类祖先或祖先不是Element,
* 则返回NUll]
* @param {Object Dom} e 指定的元素
* @param {Number} n 第n层祖先元素
* @return {Object Dom} 返回其祖父元素
*/
parent: function(n) {
if (this.elements.length > 1) return; //多个元素直接返回
var e = this.elements[0]; if (n === undefined) n = 1;
while(n -- && e)
e = e.parentNode;
if (!e || e.nodeType !== 1)
return null; // return e;
return jsLib(e);
}, /**
* [功能: 返回元素e的第几个兄弟元素, n为正,返回后续的第n个兄弟元素,
* n为负,返回前面的第n个兄弟元素, n为0, 返回e本身]
* @param {Object Dom} e 指定的元素
* @param {Number} n 第几个兄弟节点
* @return {Object Dom} 返回第几个兄弟节点
*/
sibling: function(n) {
if (this.elements.length > 1) return; //多个元素直接返回
var e = this.elements[0]; while(e && n !== 0) { //如果e未定义, 立即返回它 if (n > 0) { //查找后续的兄弟元素
if (e.nextElementSibling) {
e = e.nextElementSibling;
} else {
for (e = e.nextSibling; e && e.nodeType !== 1; e = e.nextSibling)
/* 空循环 */;
};
n --;
} else { //查找前面的兄弟元素
if (e.previousElementSibing) {
e = e.previousElementSibing;
} else {
for (e = e.previousSibling; e && e.nodeType !== 1; e = e.previousSibling)
/* 空循环 */;
};
n ++;
}
} // return e;
return jsLib(e);
}, /**
* [功能: 返回元素e的第n代子元素,如果不存在则为NUll,
* 负值n代表从后往前计数. 0表示第一个子元素, -1代表最后一个, -2代表倒数第二个,以此类推.(和children功能一样, 从0开始)]
* @param {Object Dom} e 指定的元素
* @param {Number} n 第几个
* @return {Object Dom} 返回第n代子元素
*/
child: function(n) {
if (this.elements.length > 1) return; //多个元素直接返回
var e = this.elements[0];
if (!e) return; if (e.children) { // 如果children数组存在
if (n < 0) // 转换负的n为数组索引
n += e.children.length;
if (n < 0) // 如果它仍然为负, 说明没有子元素
return null;
// return e.children[n]; //返回指定的子元素
return jsLib(e.children[n]); //返回指定的子元素
} //如果e没有children数组, 找到第一个子元素并向前数, 或找到最后一个子元素并往回数
if (n >= 0) {
//找到元素的第一个子元素
if (e.firstElementChild) {
e = e.firstElementChild;
} else {
for (e = e.firstChild; e && e.nodeType !== 1; e = e.nextSibling)
/* 空循环 */;
}
// return this.sibling(e, n); //返回第一个子元素的第n个兄弟元素
return jsLib(this.sibling(e, n)); //返回第一个子元素的第n个兄弟元素
} else { // n为负数
if (e.lastElementChild) {
e.lastElementChild;
} else {
for (e = e.lastChild; e && e.nodeType !== 1; e = e.previousSibling)
/* 空循环 */;
}
// return this.sibling(e, n+1);
return jsLib(this.sibling(e, n+1));
}
}
}; /********************* 以上JSLibrary 原型方法 结束 ************************/ /************** 以下是一些常用的方法挂在到jsLib(类方法) 开始 **************/ /**
* 一些实用工具方法挂载到jsLib.utils
*/ jsLib.utils = {}; /**
* 检测一个值是否是NaN
*/
jsLib.utils.isReallyNaN = function(x) {
return x !== x;
}; /**
* 检测一个对象是否为空
*/
jsLib.utils.isEmptyObj = function(obj){
for(var i in obj){
if(obj.hasOwnProperty(i)){
return false;
}
}
return true;
}; /**
* 检测一个对象是否为数组
*/
jsLib.utils.isArray = function (arr) {
if (Array.isArray) {
return Array.isArray(arr);
} else {
return Object.prototype.toString.call(arg) === '[object Array]';
}
}; /**
*
* @param parent 要拷贝的对象
* @param child 返回浅拷贝的对象
*
* 如果parent对象中属性也是对象或者数组，那么浅拷贝的对象是引用parent这个对象
*/
jsLib.utils.extend = function(parent, child) {
var i;
child = child || {};
for (i in parent) {
if (parent.hasOwnProperty(i)) {
child[i] = parent[i];
};
};
return child;
}; /**
*
* @param parent
* @param child
* 深拷贝以后，parent对象和child对象就不相等了,都是独立的了
*/
jsLib.utils.extendDeep = function(parent, child) {
var i,
toStr = Object.prototype.toString,
astr = "[object Array]"; child = child || {}; for (i in parent) {
if (parent.hasOwnProperty(i)) {
if (typeof parent[i] === 'object') {
child[i] = (toStr.call(parent[i]) === astr) ? [] : {};
this.extendDeep(parent[i], child[i]);
} else {
child[i] = parent[i];
};
};
};
return child;
}; /**
* 从数组中随机取几个不重复的元素
*/
jsLib.utils.getArrayItems = function(arr, num) {
var temp_array = new Array();
for (var index in arr) {
temp_array.push(arr[index]);
}
var return_array = new Array();
for (var i = 0; i<num; i++) {
if (temp_array.length>0) {
var arrIndex = Math.floor(Math.random()*temp_array.length);
return_array[i] = temp_array[arrIndex];
temp_array.splice(arrIndex, 1);
} else {
break;
};
};
return return_array;
} /**
* 判断点在多边形内
* eg: var pointCenter = {x: gV.box_w/2, y: gV.box_h/2};
* var polygon = [
* {x:aClientLeftPoint[0], y:aClientLeftPoint[1]},
* {x:aClientRightPoint[0], y:aClientRightPoint[1]},
* {x:aClientRightunderPoint[0], y:aClientRightunderPoint[1]},
* {x:aClientLeftunderPoint[0], y:aClientLeftunderPoint[1]},
* {x:aClientLeftPoint[0], y:aClientLeftPoint[1]}
* ];
* jsLib.utils.pointInPolygon(pointCenter, polygon);
*/
jsLib.utils.pointInPolygon = function(curPoint, points) {
var counter = 0;
for (var i = 0, p1, p2; i < points.length; i++) {
p1 = points[i];
p2 = points[(i + 1) % points.length];
if (p1.y == p2.y) {
continue;
}
if (curPoint.y <= Math.min(p1.y, p2.y)) {
continue;
}
if (curPoint.y >= Math.max(p1.y, p2.y)) {
continue;
}
var x = (curPoint.y - p1.y) * (p2.x - p1.x) / (p2.y - p1.y) + p1.x;
if (x > curPoint.x) counter++;
}; if (counter % 2 == 0) {
return false;
} else {
return true;
};
}; /**
* [功能: 作为一个对象的w和h属性返回视口的尺寸(视口坐标)]
* @param {Object} w 指定的窗口
* @return {Object} { x: 屏幕的宽度, y: 屏幕的高度 }
*/
jsLib.utils.getViewportSize = function(w) {
//使用指定的窗口, 如果不带参数则使用当前窗口
var w = w || window; //出了ie8及更早的版本以外, 其他浏览器都能用
if (w.innerWidth != null)
return { w: w.innerWidth, h: w.innerHeight }; //对标准下的ie (或任何浏览器)
var d = w.document;
if (document.compatMode == 'CSS1Compat')
return {
w: d.documentElement.clientWidth,
h: d.documentElement.clientHeight
}; //对怪异模式下的浏览器
return { w: d.body.clientWidth, h: d.body.clientHeight };
}; /**
* [功能: 查询窗口滚动条的位置]
* @param {Object} w 指定的窗口
* @return {Object} { x: 滚动条的x, y: 滚动条的y }
*/
jsLib.utils.getScrollOffset = function(w) {
//使用指定的窗口, 如果不带参数则使用当前窗口
var w = w || window; //除了ie8及更早的版本, 其他浏览器都能用
if (w.pageXOffset != null)
return { x: w.pageXOffset, y: w.pageYOffset } //对于标准下的ie(或任意浏览器)
var d = w.document;
if (document.compatMode == 'CSS1Compat')
return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop } //对于怪异模式下的浏览器
return { x: d.body.scrollLeft, y: d.body.scrollTop }
}; /**
* [功能: 文档如果有滚动条的话,就不行了(文档坐标,含滚动条)]
* @param {Object Dom} e dom节点
* @return {Object} 返回节点坐标(含滚动条)
*/
jsLib.utils.getElementPosition = function(e) {
var x = 0,
y = 0;
while(e != null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent;
} return { x: x, y: y };
}; /**
* [功能: 增强版(视口坐标) 与 dom.getBoundingClientRect()对象中left和top相等,并且getBoundingClientRect方法效率高]
* @param {Object Dom} elt dom节点
* @return {Object} 返回节点坐标(不含滚动条)
*/
jsLib.utils.getElementPos = function(elt) {
var x = 0, y = 0; //循环以累加偏移量
for (var e = elt; e != null; e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
} //在此循环所有的祖先元素,减去滚动的偏移量
//这也减去了主滚动条, 并转化为视口坐标
for (var e = elt.parentNode; e != null && e.nodeType == 1; e = e.parentNode) {
x -= e.scrollLeft;
y -= e.scrollTop;
} return { x: x, y: y };
}; //函数赋值
jsLib.utils.getByClass = _methodSets.getByClass;
jsLib.utils.convertToArray = _methodSets.convertToArray; /*
* 仅仅简单的dom Id选择器
*/
jsLib.getEle = function(id) {
return doc.querySelector(id);
}; /* ajax 的封装, 含跨域 jsonp
*
* 参数 默认值 描述 可选值
* url “” 请求的链接 string
* type get 请求的方法 get,post
* data null 请求的数据 object,string
* contentType “” 请求头 string
* dataType “” 请求的类型 jsonp
* async true 是否异步 blooean
* timeOut undefined 超时时间 number
* before function(){} 发送之前执行的函数 function
* error function(){} 请求报错执行的函数 function
* success function(){} 请求成功的回调函数 function
*
* @use
* ajax({
* type:"post",
* dataType: 'jsonp',
* url:"http://wx.indoorun.com/wx/getUnitsOfFloor.html", //添加自己的接口链接
* data: {'regionId':'14428254382730015', 'floorId':'14428254382890016'},
* timeOut:5000,
* before:function(){
* console.log("before");
* },
* success:function(str){
* console.log(str);
* },
* error:function(){
* console.log("error");
* }
* });
*/
jsLib.ajax = function(options) {
//编码数据
function setData() {
var name, value;
if (data) {
if (typeof data === "string") {
data = data.split("&");
for (var i = 0, len = data.length; i < len; i++) {
name = data[i].split("=")[0];
value = data[i].split("=")[1];
data[i] = encodeURIComponent(name) + "=" + encodeURIComponent(value);
}
data = data.replace("/%20/g", "+");
} else if (typeof data === "object") {
var arr = [];
for (var name in data) {
if (typeof data[name] !== 'undefined') {
var value = data[name].toString();
name = encodeURIComponent(name);
value = encodeURIComponent(value);
arr.push(name + "=" + value);
} }
data = arr.join("&").replace("/%20/g", "+");
}
//若是使用get方法或JSONP，则手动添加到URL中
if (type === "get" || dataType === "jsonp") {
url += url.indexOf("?") > -1 ? (url.indexOf("=")>-1 ? "&"+data : data ): "?" + data;
}
}
}
// JSONP
function createJsonp() { var script = document.createElement("script"),
timeName = new Date().getTime() + Math.round(Math.random() * 1000),
callback = "JSONP_" + timeName; window[callback] = function(data) {
clearTimeout(timeout_flag);
document.body.removeChild(script);
success(data);
}
script.src = url + (url.indexOf("?") > -1 ? "&" : "?") + "callback=" + callback;
script.type = "text/javascript";
document.body.appendChild(script);
setTime(callback, script);
}
//设置请求超时
function setTime(callback, script) {
if (timeOut !== undefined) {
timeout_flag = setTimeout(function() {
if (dataType === "jsonp") {
// delete window[callback];
document.body.removeChild(script); } else {
timeout_bool = true;
xhr && xhr.abort();
}
console.log("timeout"); }, timeOut);
}
}
// XHR
function createXHR() {
//由于IE6的XMLHttpRequest对象是通过MSXML库中的一个ActiveX对象实现的。
//所以创建XHR对象，需要在这里做兼容处理。
function getXHR() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
//遍历IE中不同版本的ActiveX对象
var versions = ["Microsoft", "msxm3", "msxml2", "msxml1"];
for (var i = 0; i < versions.length; i++) {
try {
var version = versions[i] + ".XMLHTTP";
return new ActiveXObject(version);
} catch (e) {}
}
}
}
//创建对象。
xhr = getXHR();
xhr.open(type, url, async);
//设置请求头
if (type === "post" && !contentType) {
//若是post提交，则设置content-Type 为application/x-www-four-urlencoded
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
} else if (contentType) {
xhr.setRequestHeader("Content-Type", contentType);
}
//添加监听
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (timeOut !== undefined) {
//由于执行abort()方法后，有可能触发onreadystatechange事件，
//所以设置一个timeout_bool标识，来忽略中止触发的事件。
if (timeout_bool) {
return;
}
clearTimeout(timeout_flag);
}
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { success(xhr.responseText);
} else {
error(xhr.status, xhr.statusText);
}
}
};
//发送请求
xhr.send(type === "get" ? null : data);
setTime(); //请求超时
} var url = options.url || "", //请求的链接
type = (options.type || "get").toLowerCase(), //请求的方法,默认为get
data = options.data || null, //请求的数据
contentType = options.contentType || "", //请求头
dataType = options.dataType || "", //请求的类型
async = options.async === undefined && true, //是否异步，默认为true.
timeOut = options.timeOut, //超时时间。
before = options.before || function() {}, //发送之前执行的函数
error = options.error || function() {}, //错误执行的函数
success = options.success || function() {}; //请求成功的回调函数
var timeout_bool = false, //是否请求超时
timeout_flag = null, //超时标识
xhr = null; //xhr对角
setData();
before();
if (dataType === "jsonp") {
createJsonp();
} else {
createXHR();
}
}; /*
* 把url后面的参数放入到一个对象中去
* 返回这个对象
*/
jsLib.getQueryString = function() { var str = location.search.length > 0 ? location.search.substring(1) : "";
var items = str.length ? str.split("&") : []; var args = {}, item = null, name = null, value = null; for (var i = 0, len = items.length; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}; return args;
}; /*
* 绑定和解绑事件的方法
*/
jsLib.EventUtil = { //事件绑定 EventUtil.addHandler()
addHandler: function(element, type, handler) { //要绑定的元素, 事件类型, 发生事件的函数
if (element.addEventListener) {
element.addEventListener(type, handler, false); // false为事件冒泡 (w3c标准下)
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler); // 只有事件冒泡 (ie下)
} else {
element['on' + type] = handler;
}
}, //事件移除
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
}, //获取事件对象
getEvent: function(event) {
return event ? event : win.event;
}, //获取事件目标
getTarget: function(event) {
var oEvent = jsLib.EventUtil.getEvent(event);
return oEvent.target || oEvent.srcElement; //标准或ie下
}, //取消默认事件
preventDefault: function(event) {
var oEvent = jsLib.EventUtil.getEvent(event);
oEvent.preventDefault ? oEvent.preventDefault() : oEvent.returnValue = false;
}, //阻止事件冒泡和事件捕获
stopPropagation: function(event) {
var oEvent = jsLib.EventUtil.getEvent(event);
oEvent.stopPropagation ? oEvent.stopPropagation() : oEvent.cancelBubble = true;
}
}; /************** 以上是一些常用的方法挂在到jsLib(类方法) 结束 **************/ /************** 以下一些方法(插件)扩展到JSLibrary原型上 开始 **************/ /*
* 任意dom节点运动方法
* @param { Object } 运动的属性
* @param { Function } 回调函数
* @user jsLib('#id').animate({left: '200', top: '200', 'opacity': 30});
*/
jsLib().extend('animate', function(json, fn, time) { var time = time || 30; this.elements.forEach(function(item, index, array) {
startMove(item, json, fn);
}); function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
//运动
function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var attr = '';
var iStop = true; //假设所有值都到达了，定时器里一轮的运动结束了
for (attr in json) {
//1.计算当前值
var iCurr = 0;
if (attr == 'opacity') {
iCurr = parseInt(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCurr = parseInt(getStyle(obj, attr));
}
//2.计算速度
var speed = (json[attr] - iCurr) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3.检测停止
if (iCurr != json[attr]) {
iStop = false;
};
if (attr == 'opacity') {
obj.style.opacity = (iCurr + speed) / 100;
obj.style.filter = 'alpha(opacity:' + (iCurr + speed) + ')';
} else {
obj.style[attr] = iCurr + speed + 'px';
};
};
if (iStop) { //所有属性都到达了目标，那就关闭定时器
clearInterval(obj.timer);
fn && fn();
};
}, time);
}
}); /**
* 任意运动, 传入回调函数, 分批执行
* @return {_stopMove} 可以停止运动
* 可以单独使用
* @user
* var stop = new Move.elastic([0, 1], 800, function(v){
* console.log(v); // v是速度在 0,1之间以各种运动变化, 每变化一次就执行一次函数
* }
*
* stop(); //通过调用,可以立即停止
*/
; (function(exports) { var PI = Math.PI,
sin = Math.sin,
cos = Math.cos,
pow = Math.pow,
abs = Math.abs,
sqrt = Math.sqrt; var request = window.requestAnimationFrame,
stopRequest = window.cancelAnimationFrame;
var _move, _stopMove; // 都是函数, 不支持requestAnimationFrame的浏览器就使用定时器 //初始化运动函数和停止函数
if (request) {
_move = function(fn, timer) { // fn: 匿名函数, timer: 不同的空对象
var step = function() {
if (!fn()) { // fn函数返回值为假值则调用requestAnimationFrame方法(true代表运动结束)
timer.id = request(step);
};
};
step(); // 函数调用
};
} else {
_move = function(fn, timer) {
timer.id = setInterval(fn, 16); // 采用定时器, 时间间隔不能低于16
};
};
if (stopRequest) {
_stopMove = function(timer) {
stopRequest(timer.id); // 停止动画调用
};
} else {
_stopMove = function(timer) {
clearInterval(timer.id); // 关闭定时器
};
}; var Move = function() { // Move构造函数
this.aCurve = []; // 曲线动画函数名集合
this.init();
}; var curve = Move.prototype = { // Move原型
// 初始化动画曲线
init: function() {
this.extends({
//定义域和值域均为[0, 1], 传入自变量x返回对应值y
//先加速后减速
ease: function(x) {
// return -0.5*cos(PI * (2 - x)) + 0.5;
if (x <= 0.5) return 2 * x * x;
else if (x > 0.5) return -2 * x * x + 4 * x - 1;
}, // 初速度为0 ,一直加速
easeIn: function(x) {
return x * x;
}, //先慢慢加速1/3, 然后突然大提速, 最后减速
ease2: function(x) {
return x < 1 / 3 ? x * x : -2 * x * x + 4 * x - 1;
}, //初速度较大, 一直减速, 缓冲动画
easeOut: function(x) {
return pow(x, 0.8);
}, //碰撞动画
collision: function(x) {
var a, b; //a, b代表碰撞点的横坐标
for (var i = 1, m = 20; i < m; i++) {
a = 1 - (4 / 3) * pow(0.5, i - 1);
b = 1 - (4 / 3) * pow(0.5, i);
if (x >= a && x <= b) {
return pow(3 * (x - (a + b) / 2), 2) + 1 - pow(0.25, i - 1);
}
}
}, //弹性动画
elastic: function(x) {
return -pow(1 / 12, x) * cos(PI * 2.5 * x * x) + 1;
}, //匀速动画
linear: function(x) {
return x;
}, //断断续续加速减速
wave: function(x) {
return (1 / 12) * sin(5 * PI * x) + x;
}, //先向反方向移动一小段距离, 然后正方向移动, 并超过终点一小段, 然后回到终点
opposite: function(x) {
return (sqrt(2) / 2) * sin((3 * PI / 2) * (x - 0.5)) + 0.5;
}, // 相反的三次贝塞尔
reverseEase: function (x) {
return 1 - Math.sqrt(1 - x * x);
}
});
}, // 随机选择一个动画方法名
getRd: function () {
var preItem = null; return function () {
var arr = this.aCurve;
var index = Math.floor(Math.random() * arr.length),
item = arr[index],
result; if (preItem != item) {
preItem = item;
result = item;
} else {
result = this.getRd(arr);
}; return result;
};
}(), // 扩张曲线动画
extends: function(obj) {
for (var k in obj) {
if (k in curve) {
console.warn('扩张的方法名' + k + ': 已经存在, 换个方法名吧!' );
return;
};
this.aCurve.push(k);
curve[k] = (function(moveType) { // 给Move原型添加 动画曲线 方法
return function() {
return _doMove.call(this, arguments, moveType); // 每个动画曲线方法实际调用_doMove函数
};
})(obj[k]);
};
}
}; /**
* 开始动画函数
* arg: 用户要传的([0, 1000], 500, function(v){ ... }, fnEnd)
* moveType: 曲线动画函数
*/
function _doMove(arg, moveType) {
var r, // r => 过渡范围, 例如[0, 1000] (必须传, 且传数组)
d, // d => 过渡时间, ms, (可不传, 默认500)
fn, // fn => 每一帧的回调函数, 传入当前过渡值v (必须传)
fnEnd; // fnEnd => 动画结束时回调 (可不传) // 严格限制传入参数, 且传入的参数可以没有顺序
for (var i = 0; i < 4; i++) {
if (typeof arg[i] === 'object' && !r) r = arg[i];
else if (typeof arg[i] === 'number' && !d) d = arg[i];
else if (typeof arg[i] === 'function' && !fn) fn = arg[i];
else if (typeof arg[i] === 'function' && !fnEnd) fnEnd = arg[i];
}; if (!r instanceof Array || !fn) return; // 如果r不是数组或者fn不是函数(真值)就return掉 d = d || 500; // 过渡时间默认500ms var from = +new Date, //起始时间
x = 0,
y,
a = r[0], // 过渡范围的起点
b = r[1]; // 过度范围的终点 var timer = 't' + Math.random(); // 随机数 var self = this; // 存一下Move的实例 //用于保存定时器ID的对象, requestAnimation递归调用必须传入对象(给实例添加timer属性值为{})
this[timer] = {}; // 优先使用requestAnimationFrame否则setInterval定时器
_move(function() {
x = (+new Date - from) / d; if (x >= 1) { // 动画结束
fn(b); // 调用外部动画的回调函数且把过度范围的终点值作为参数传过去
if (fnEnd) fnEnd(); // 如果有动画结束回调函数就执行回调函数
return true; // 返回真值停止调用requestAnimationFrame方法
} else { // 动画进行中
y = moveType(x); // 调用动画曲线中的函数返回运动数字
fn(a + (b - a) * y); // 调用外部动画的回调函数传参为 a + (b - a) * y
};
}, self[timer]); return function() {
_stopMove(self[timer]); // 调用cancelAnimationFrame方法停止动画
return a + (b - a) * y; // 返回动画停止后的运动数字
};
}; // 抛出去
exports.Move = Move; // Move构造函数抛出去 })(jsLib); ; (function(exports) {
// 一些要使用的内部工具函数 // 2点之间的距离 (主要用来算pinch的比例的, 两点之间的距离比值求pinch的scale)
function getLen(v) {
return Math.sqrt(v.x * v.x + v.y * v.y);
}; // dot和getAngle函数用来算两次手势状态之间的夹角, cross函数用来算方向的, getRotateAngle函数算手势真正的角度的
function dot(v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
}; // 求两次手势状态之间的夹角
function getAngle(v1, v2) {
var mr = getLen(v1) * getLen(v2);
if (mr === 0) return 0;
var r = dot(v1, v2) / mr;
if (r > 1) r = 1;
return Math.acos(r);
}; // 利用cross结果的正负来判断旋转的方向(大于0为逆时针, 小于0为顺时针)
function cross(v1, v2) {
return v1.x * v2.y - v2.x * v1.y;
}; // 如果cross大于0那就是逆时针对于屏幕是正角,对于第一象限是负角,所以 角度 * -1, 然后角度单位换算
function getRotateAngle(v1, v2) {
var angle = getAngle(v1, v2);
if (cross(v1, v2) > 0) {
angle *= -1;
};
return angle * 180 / Math.PI;
}; // HandlerAdmin构造函数
var HandlerAdmin = function(el) {
this.handlers = []; // 手势函数集合
this.el = el; // dom元素
}; // HandlerAdmin原型方法 // 把fn添加到实例的 handlers数组中
HandlerAdmin.prototype.add = function(handler) {
this.handlers.push(handler);
}; // 删除 handlers数组中的函数
HandlerAdmin.prototype.del = function(handler) {
if(!handler) this.handlers = []; // handler为假值,handlers则赋值为[](参数不传undefined,其实不管this.handlers有没有成员函数,都得置空) for(var i = this.handlers.length; i >= 0; i--) {
if(this.handlers[i] === handler) { // 如果函数一样
this.handlers.splice(i, 1); // 从handler中移除该函数(改变了原数组)
};
};
}; // 执行用户的回调函数
HandlerAdmin.prototype.dispatch = function() {
for(var i=0, len=this.handlers.length; i<len; i++) {
var handler = this.handlers[i];
if(typeof handler === 'function') handler.apply(this.el, arguments); // 执行回调this为dom元素, 把触发的事件对象作为参数传过去了
};
}; function wrapFunc(el, handler) {
var handlerAdmin = new HandlerAdmin(el); // 实例化一个对象
handlerAdmin.add(handler); return handlerAdmin;
}; // AlloyFinger构造函数
var AlloyFinger = function (el, option) { // el: dom元素/id, option: 各种手势的集合对象 this.element = typeof el == 'string' ? document.querySelector(el) : el; // 获取dom元素 // 绑定原型上start, move, end, cancel函数的this对象为 AlloyFinger实例
this.start = this.start.bind(this);
this.move = this.move.bind(this);
this.end = this.end.bind(this);
this.cancel = this.cancel.bind(this); // 给dom元素 绑定原生的 touchstart, touchmove, touchend, touchcancel事件, 默认冒泡
this.element.addEventListener("touchstart", this.start, false);
this.element.addEventListener("touchmove", this.move, false);
this.element.addEventListener("touchend", this.end, false);
this.element.addEventListener("touchcancel", this.cancel, false); this.preV = { x: null, y: null }; // 开始前的坐标
this.pinchStartLen = null; // start()方法开始时捏的长度
this.scale = 1; // 初始缩放比例为1
this.isDoubleTap = false; // 是否双击, 默认为false var noop = function () { }; // 空函数(把用户没有绑定手势函数默认赋值此函数) // 提供了14种手势函数. 根据option对象, 分别创建一个 HandlerAdmin实例 赋值给相应的this属性
this.rotate = wrapFunc(this.element, option.rotate || noop);
this.touchStart = wrapFunc(this.element, option.touchStart || noop);
this.multipointStart = wrapFunc(this.element, option.multipointStart || noop);
this.multipointEnd = wrapFunc(this.element, option.multipointEnd || noop);
this.pinch = wrapFunc(this.element, option.pinch || noop);
this.swipe = wrapFunc(this.element, option.swipe || noop);
this.tap = wrapFunc(this.element, option.tap || noop);
this.doubleTap = wrapFunc(this.element, option.doubleTap || noop);
this.longTap = wrapFunc(this.element, option.longTap || noop);
this.singleTap = wrapFunc(this.element, option.singleTap || noop);
this.pressMove = wrapFunc(this.element, option.pressMove || noop);
this.touchMove = wrapFunc(this.element, option.touchMove || noop);
this.touchEnd = wrapFunc(this.element, option.touchEnd || noop);
this.touchCancel = wrapFunc(this.element, option.touchCancel || noop); this.delta = null; // 差值 变量增量
this.last = null; // 最后数值
this.now = null; // 开始时的时间戳
this.tapTimeout = null; // tap超时
this.singleTapTimeout = null; // singleTap超时
this.longTapTimeout = null; // longTap超时(定时器的返回值)
this.swipeTimeout = null; // swipe超时
this.x1 = this.x2 = this.y1 = this.y2 = null; // start()时的坐标x1, y1, move()时的坐标x2, y2 (相对于页面的坐标)
this.preTapPosition = { x: null, y: null }; // 用来保存start()方法时的手指坐标
}; // AlloyFinger原型对象
AlloyFinger.prototype = { start: function (evt) {
if (!evt.touches) return; // 如果没有TouchList对象, 直接return掉 (touches: 位于屏幕上的所有手指的列表) this.now = Date.now(); // 开始时间戳
this.x1 = evt.touches[0].pageX; // 相对于页面的 x1, y1 坐标
this.y1 = evt.touches[0].pageY;
this.delta = this.now - (this.last || this.now); // 时间戳差值 this.touchStart.dispatch(evt); // 调用HandlerAdmin实例this.touchStart上的dispatch方法(用户的touchStart回调就在此调用的) if (this.preTapPosition.x !== null) { // 开始前tap的x坐标不为空的话(一次没点的时候必然是null了)
this.isDoubleTap = (this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30);
};
this.preTapPosition.x = this.x1; // 把相对于页面的 x1, y1 坐标赋值给 this.preTapPosition
this.preTapPosition.y = this.y1;
this.last = this.now; // 把开始时间戳赋给 this.last
var preV = this.preV, // 把开始前的坐标赋给 preV变量
len = evt.touches.length; // len: 手指的个数 if (len > 1) { // 一根手指以上
this._cancelLongTap(); // 取消长按定时器
this._cancelSingleTap(); // 取消SingleTap定时器 var v = { // 2个手指坐标的差值
x: evt.touches[1].pageX - this.x1,
y: evt.touches[1].pageY - this.y1
};
preV.x = v.x; // 差值赋值给PreV对象
preV.y = v.y; this.pinchStartLen = getLen(preV); // start()方法中2点之间的距离
this.multipointStart.dispatch(evt); // (用户的multipointStart回调就在此调用的)
}; this.longTapTimeout = setTimeout(function () {
this.longTap.dispatch(evt); // (用户的longTap回调就在此调用的)
}.bind(this), 750);
}, move: function (evt) {
if (!evt.touches) return; // 如果没有TouchList对象, 直接return掉 (touches: 位于屏幕上的所有手指的列表) var preV = this.preV, // 把start方法保存的2根手指坐标的差值xy赋给preV变量
len = evt.touches.length, // 手指个数
currentX = evt.touches[0].pageX, // 第一根手指的坐标(相对于页面的 x1, y1 坐标)
currentY = evt.touches[0].pageY;
this.isDoubleTap = false; // 移动过程中不能双击了 if (len > 1) { // 2根手指以上(处理捏pinch和旋转rotate手势) var v = { // 第二根手指和第一根手指坐标的差值
x: evt.touches[1].pageX - currentX,
y: evt.touches[1].pageY - currentY
}; if (preV.x !== null) { // start方法中保存的this.preV的x不为空的话 if (this.pinchStartLen > 0) { // 2点间的距离大于0
evt.scale = getLen(v) / this.pinchStartLen; // move中的2点之间的距离除以start中的2点的距离就是缩放比值
this.pinch.dispatch(evt); // scale挂在到evt对象上 (用户的pinch回调就在此调用的)
}; evt.angle = getRotateAngle(v, preV); // 计算angle角度
this.rotate.dispatch(evt); // (用户的pinch回调就在此调用的)
}; preV.x = v.x; // 把move中的2根手指中的差值赋值给preV, 当然也改变了this.preV
preV.y = v.y; } else { // 一根手指(处理拖动pressMove手势) if (this.x2 !== null) { // 一根手指第一次必然为空,因为初始化赋值为null, 下面将会用x2, y2保存上一次的结果 evt.deltaX = currentX - this.x2; // 拖动过程中或者手指移动过程中的差值(当前坐标与上一次的坐标)
evt.deltaY = currentY - this.y2; } else {
evt.deltaX = 0; // 第一次嘛, 手指刚移动,哪来的差值啊,所以为0呗
evt.deltaY = 0;
};
this.pressMove.dispatch(evt); // deltaXY挂载到evt对象上,抛给用户(用户的pressMove回调就在此调用的)
}; this.touchMove.dispatch(evt); // evt对象因if语句而不同,挂载不同的属性抛出去给用户 (用户的touchMove回调就在此调用的) this._cancelLongTap(); // 取消长按定时器 this.x2 = currentX; // 存一下本次的pageXY坐标, 为了下次做差值
this.y2 = currentY; if (len > 1) { // 2个手指以上就阻止默认事件
evt.preventDefault();
};
}, end: function (evt) {
if (!evt.changedTouches) return; // 位于该元素上的所有手指的列表, 没有TouchList也直接return掉 this._cancelLongTap(); // 取消长按定时器 var self = this; // 存个实例
if (evt.touches.length < 2) { // 手指数量小于2就触发 (用户的多点结束multipointEnd回调函数)
this.multipointEnd.dispatch(evt);
}; this.touchEnd.dispatch(evt); // 触发(用户的touchEnd回调函数) //swipe 滑动
if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) || (this.y2 && Math.abs(this.preV.y - this.y2) > 30)) { evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2); // 获取上下左右方向中的一个 this.swipeTimeout = setTimeout(function () {
self.swipe.dispatch(evt); // 立即触发,加入异步队列(用户的swipe事件的回调函数)
}, 0); } else { // 以下是tap, singleTap, doubleTap事件派遣 this.tapTimeout = setTimeout(function () { self.tap.dispatch(evt); // 触发(用户的tap事件的回调函数)
// trigger double tap immediately
if (self.isDoubleTap) { // 如果满足双击的话 self.doubleTap.dispatch(evt); // 触发(用户的doubleTap事件的回调函数)
clearTimeout(self.singleTapTimeout); // 清除singleTapTimeout定时器 self.isDoubleTap = false; // 双击条件重置 } else {
self.singleTapTimeout = setTimeout(function () {
self.singleTap.dispatch(evt); // 触发(用户的singleTap事件的回调函数)
}, 250);
}; }, 0); // 加入异步队列,主线程完成立马执行
}; this.preV.x = 0; // this.preV, this.scale, this.pinchStartLen, this.x1 x2 y1 y2恢复初始值
this.preV.y = 0;
this.scale = 1;
this.pinchStartLen = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
}, cancel: function (evt) {
//清除定时器
clearTimeout(this.singleTapTimeout);
clearTimeout(this.tapTimeout);
clearTimeout(this.longTapTimeout);
clearTimeout(this.swipeTimeout);
// 执行用户的touchCancel回调函数,没有就执行一次noop空函数
this.touchCancel.dispatch(evt);
}, _cancelLongTap: function () { // 取消长按定时器
clearTimeout(this.longTapTimeout);
}, _cancelSingleTap: function () { // 取消延时SingleTap定时器
clearTimeout(this.singleTapTimeout);
}, // 2点间x与y之间的绝对值的差值作比较,x大的话即为左右滑动,y大即为上下滑动,x的差值大于0即为左滑动,小于0即为右滑动
_swipeDirection: function (x1, x2, y1, y2) { // 判断用户到底是从上到下，还是从下到上，或者从左到右、从右到左滑动
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down');
}, // 给dom添加14种事件中的一种
on: function(evt, handler) {
if(this[evt]) { // 看看有没有相应的事件名
this[evt].add(handler); // HandlerAdmin实例的add方法
};
}, // 移除手势事件对应函数
off: function(evt, handler) {
if(this[evt]) {
this[evt].del(handler); // 从数组中删除handler方法
};
}, destroy: function() { // 关闭所有定时器
if(this.singleTapTimeout) clearTimeout(this.singleTapTimeout);
if(this.tapTimeout) clearTimeout(this.tapTimeout);
if(this.longTapTimeout) clearTimeout(this.longTapTimeout);
if(this.swipeTimeout) clearTimeout(this.swipeTimeout); // 取消dom上touchstart, touchmove, touchend, touchcancel事件
this.element.removeEventListener("touchstart", this.start);
this.element.removeEventListener("touchmove", this.move);
this.element.removeEventListener("touchend", this.end);
this.element.removeEventListener("touchcancel", this.cancel); // 把14个HandlerAdmin实例的this.handlers置为空数组
this.rotate.del();
this.touchStart.del();
this.multipointStart.del();
this.multipointEnd.del();
this.pinch.del();
this.swipe.del();
this.tap.del();
this.doubleTap.del();
this.longTap.del();
this.singleTap.del();
this.pressMove.del();
this.touchMove.del();
this.touchEnd.del();
this.touchCancel.del(); // 实例成员的变量全部置为null
this.preV = this.pinchStartLen = this.scale = this.isDoubleTap = this.delta = this.last = this.now = this.tapTimeout = this.singleTapTimeout = this.longTapTimeout = this.swipeTimeout = this.x1 = this.x2 = this.y1 = this.y2 = this.preTapPosition = this.rotate = this.touchStart = this.multipointStart = this.multipointEnd = this.pinch = this.swipe = this.tap = this.doubleTap = this.longTap = this.singleTap = this.pressMove = this.touchMove = this.touchEnd = this.touchCancel = null; return null;
}
}; // 抛出去
exports.Finger = AlloyFinger; })(jsLib); ; (function(exports) { var DEG_TO_RAD = 0.017453292519943295; // 三维矩阵
var Matrix3D = function(n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) {
this.elements = window.Float32Array ? new Float32Array(16) : [];
var te = this.elements;
te[0] = (n11 !== undefined) ? n11 : 1;
te[1] = n21 || 0;
te[2] = n31 || 0;
te[3] = n41 || 0; te[4] = n12 || 0;
te[5] = (n22 !== undefined) ? n22 : 1;
te[6] = n32 || 0;
te[7] = n42 || 0; te[8] = n13 || 0;
te[9] = n23 || 0;
te[10] = (n33 !== undefined) ? n33 : 1;
te[11] = n43 || 0; te[12] = n14 || 0;
te[13] = n24 || 0;
te[14] = n34 || 0;
te[15] = (n44 !== undefined) ? n44 : 1;
}; Matrix3D.prototype = {
constructor: Matrix3D, set: function(n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) {
var te = this.elements;
te[0] = n11; te[4] = n12; te[8] = n13; te[12] = n14;
te[1] = n21; te[5] = n22; te[9] = n23; te[13] = n24;
te[2] = n31; te[6] = n32; te[10] = n33; te[14] = n34;
te[3] = n41; te[7] = n42; te[11] = n43; te[15] = n44;
return this;
},
identity: function() {
this.set(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
);
return this;
},
appendTransform: function(x, y, z, scaleX, scaleY, scaleZ, rotateX, rotateY, rotateZ, skewX, skewY, originX, originY, originZ) { var rx = rotateX * DEG_TO_RAD;
var cosx = this._rounded(Math.cos(rx));
var sinx = this._rounded(Math.sin(rx));
var ry = rotateY * DEG_TO_RAD;
var cosy = this._rounded(Math.cos(ry));
var siny = this._rounded(Math.sin(ry));
var rz = rotateZ * DEG_TO_RAD;
var cosz = this._rounded(Math.cos(rz * -1));
var sinz = this._rounded(Math.sin(rz * -1)); this.multiplyMatrices(this, this._arrayWrap([
1, 0, 0, x,
0, cosx, sinx, y,
0, -sinx, cosx, z,
0, 0, 0, 1
])); this.multiplyMatrices(this, this._arrayWrap([
cosy, 0, siny, 0,
0, 1, 0, 0,
-siny, 0, cosy, 0,
0, 0, 0, 1
])); this.multiplyMatrices(this, this._arrayWrap([
cosz * scaleX, sinz * scaleY, 0, 0,
-sinz * scaleX, cosz * scaleY, 0, 0,
0, 0, 1 * scaleZ, 0,
0, 0, 0, 1
])); if (skewX || skewY) {
this.multiplyMatrices(this, this._arrayWrap([
this._rounded(Math.cos(skewX * DEG_TO_RAD)), this._rounded(Math.sin(skewX * DEG_TO_RAD)), 0, 0,
-1 * this._rounded(Math.sin(skewY * DEG_TO_RAD)), this._rounded(Math.cos(skewY * DEG_TO_RAD)), 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]));
}; if (originX || originY || originZ) {
this.elements[12] -= originX * this.elements[0] + originY * this.elements[4] + originZ * this.elements[8];
this.elements[13] -= originX * this.elements[1] + originY * this.elements[5] + originZ * this.elements[9];
this.elements[14] -= originX * this.elements[2] + originY * this.elements[6] + originZ * this.elements[10];
}; return this;
},
// 矩阵相乘
multiplyMatrices: function(a, be) {
var ae = a.elements;
var te = this.elements; var a11 = ae[0], a12 = ae[4], a13 = ae[8], a14 = ae[12];
var a21 = ae[1], a22 = ae[5], a23 = ae[9], a24 = ae[13];
var a31 = ae[2], a32 = ae[6], a33 = ae[10], a34 = ae[14];
var a41 = ae[3], a42 = ae[7], a43 = ae[11], a44 = ae[15]; var b11 = be[0], b12 = be[1], b13 = be[2], b14 = be[3];
var b21 = be[4], b22 = be[5], b23 = be[6], b24 = be[7];
var b31 = be[8], b32 = be[9], b33 = be[10], b34 = be[11];
var b41 = be[12], b42 = be[13], b43 = be[14], b44 = be[15]; te[0] = a11 * b11 + a12 * b21 + a13 * b31 + a14 * b41;
te[4] = a11 * b12 + a12 * b22 + a13 * b32 + a14 * b42;
te[8] = a11 * b13 + a12 * b23 + a13 * b33 + a14 * b43;
te[12] = a11 * b14 + a12 * b24 + a13 * b34 + a14 * b44; te[1] = a21 * b11 + a22 * b21 + a23 * b31 + a24 * b41;
te[5] = a21 * b12 + a22 * b22 + a23 * b32 + a24 * b42;
te[9] = a21 * b13 + a22 * b23 + a23 * b33 + a24 * b43;
te[13] = a21 * b14 + a22 * b24 + a23 * b34 + a24 * b44; te[2] = a31 * b11 + a32 * b21 + a33 * b31 + a34 * b41;
te[6] = a31 * b12 + a32 * b22 + a33 * b32 + a34 * b42;
te[10] = a31 * b13 + a32 * b23 + a33 * b33 + a34 * b43;
te[14] = a31 * b14 + a32 * b24 + a33 * b34 + a34 * b44; te[3] = a41 * b11 + a42 * b21 + a43 * b31 + a44 * b41;
te[7] = a41 * b12 + a42 * b22 + a43 * b32 + a44 * b42;
te[11] = a41 * b13 + a42 * b23 + a43 * b33 + a44 * b43;
te[15] = a41 * b14 + a42 * b24 + a43 * b34 + a44 * b44; return this;
},
// 解决角度为90的整数倍导致Math.cos得到极小的数，其实是0。导致不渲染
_rounded: function(value, i) {
i = Math.pow(10, i || 15);
return Math.round(value * i) / i;
},
_arrayWrap: function(arr) {
return window.Float32Array ? new Float32Array(arr) : arr;
}
}; // 主入口函数
function Transform(obj, notPerspective) {
var observeProps = ['translateX', 'translateY', 'translateZ', 'scaleX', 'scaleY', 'scaleZ', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'originX', 'originY', 'originZ'],
objIsElement = isElement(obj);
if (!notPerspective) {
observeProps.push('perspective');
}; obj.matrix3d = new Matrix3D();
observe(
obj,
observeProps,
function() {
var mtx = obj.matrix3d.identity().appendTransform(obj.translateX, obj.translateY, obj.translateZ, obj.scaleX, obj.scaleY, obj.scaleZ, obj.rotateX, obj.rotateY, obj.rotateZ, obj.skewX, obj.skewY, obj.originX, obj.originY, obj.originZ);
var transform = (notPerspective ? '' : 'perspective(' + obj.perspective + 'px) ') + 'matrix3d(' + Array.prototype.slice.call(mtx.elements).join(',') + ')';
if (objIsElement) {
obj.style.transform = obj.style.msTransform = obj.style.OTransform = obj.style.MozTransform = obj.style.webkitTransform = transform;
} else {
obj.transform = transform;
};
}); if (!notPerspective) {
obj.perspective = 500; // 景深默认值
};
obj.scaleX = obj.scaleY = obj.scaleZ = 1;
obj.translateX = obj.translateY = obj.translateZ = obj.rotateX = obj.rotateY = obj.rotateZ = obj.skewX = obj.skewY = obj.originX = obj.originY = obj.originZ = 0;
}; // 工具函数
function isElement(obj) {
return (
typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2
obj && typeof obj === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string'
);
}; function observe(target, props, callback) {
for (var i = 0, len = props.length; i < len; i += 1) {
var prop = props[i];
watch(target, prop, callback);
};
}; // 每一次改变那15个属性中的任意一个,都会执行回调
function watch(target, prop, callback) {
Object.defineProperty(target, prop, {
get: function() {
return this['_' + prop];
},
set: function(value) {
if (value !== this['_' + prop]) {
this['_' + prop] = value;
callback();
};
}
});
}; // 抛出去
exports.Transform = Transform; })(jsLib); /************** 上面一些方法(插件)扩展到JSLibrary原型上 结束 **************/ // 把jsLib抛出去
function jsLib(arg) {
return new JSLibrary(arg);
}; if (typeof module !== 'undefined' && typeof exports === 'object') {
module.exports = jsLib;
} else {
if (!win.jsLib) win.jsLib = jsLib;
};
}(window, document));
