touch.js下载使用方式
touch.js下载地址
https://gitee.com/mirrors/touch-js
Touch
在开发移动端的应用中会使用到很多的手势操作,例如一指拖动、两指旋转等等,为了方便开放者快速集成这些手势,在Clouda中内置了事件和手势库Library.touch,下面将详细的介绍如何使用Library.touch。
touch.config
语法: touch.config(config)
对手势事件库进行全局配置。
参数描述:
config为一个对象
{
tap: true, //tap类事件开关, 默认为true
doubleTap: true, //doubleTap事件开关, 默认为true
hold: true, //hold事件开关, 默认为true
holdTime: 650, //hold时间长度
swipe: true, //swipe事件开关
swipeTime: 300, //触发swipe事件的最大时长
swipeMinDistance: 18, //swipe移动最小距离
swipeFactor: 5, //加速因子, 值越大变化速率越快
drag: true, //drag事件开关
pinch: true, //pinch类事件开关
}
touch.on
语法:touch.on(element, types, options, callback)
绑定指定元素的事件。
参数描述:
element: 元素对象或选择器。
types: 事件的类型, 可接受多个事件以空格分开,支持原生事件的透传, 支持的一些事件类型有:
pinchstart 双指缩放动作开始
pinchend 双指缩放动作结束
pinch 双指缩放事件
pinchin 双指向里缩小
pinchout 双指向外放大
rotateleft 向左旋转
rotateright 向右旋转
rotate 旋转事件
swipestart 单指滑动动作开始
swiping 单指滑动事件
swipeend 单指滑动动作结束
swipeleft 单指向左滑动
swiperight 单指向右滑动事件
swipeup 单指向上滑动
swipedown 单指向下滑动
swipe 单指滑动事件
drag 单指向左右拖动
hold 单指按住不放事件
tap 单指点击
doubletap 单指双击
例如旋转实例如下:
var angle = 30;
touch.on(‘#rotation .target’, ‘touchstart’, function(ev){
ev.startRotate();
ev.originEvent.preventDefault();
ev.originEvent.stopPropagation();
});
touch.on(‘#rotation .target’, ‘rotate’, {interval: 10}, function(ev){
var totalAngle = angle + ev.rotation;
if(ev.fingerStatus === ‘end’){
angle = angle + ev.rotation;
}
this.style.webkitTransform = ‘rotate(’ + totalAngle + ‘deg)’;
});
更多使用实例请查看http://code.baidu.com/
options(可选): 目前可配置的参数为:
{
//采样频率
interval: 10,//性能参数,值越小,实时性越好, 但性能可能略差, 值越大, 性能越好。遇到性能问题时,可以将值设大调优,建议值设置为10。
//swipe加速度因子(swipe事件专用)
swipeFactor: 5 //(int: 1-10)值越大,速率更快。
}
callback: 事件处理函数, 该函数接受的参数为一个gesture event object, 可访问的属性有:
originEvent //触发某事件的原生对象
type //事件的名称
rotation //旋转角度
scale //缩放比例
direction //操作的方向属性
fingersCount //操作的手势数量
position //相关位置信息, 不同的操作产生不同的位置信息。
distance //swipe类两点之间的位移
distanceX //swipe类事件x方向的位移
distanceY //swipe类事件y方向的位移
angle //swipe类事件触发时偏移角度
factor //swipe事件加速度因子
startRotate //启动单指旋转方法,在某个元素的touchstart触发时调用。
touch.live
语法:touch.live(selector, types, options, callback)
使用方法基本上与on相同,live的第一个参数只接受css3选择器。通过live()方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)
touch.off
语法:touch.off(element,types,callback)
解除某元素上的事件绑定。
参数描述:
element:元素对象或选择器
types:事件的类型
callback:时间处理函数
Publish/Subscribe
subscribe
订阅被发布的数据,与pubilsh配合使用
不带参数 env.subscribe(publishName, function(collection){});
env.subscribe(“pub-allStudents”, function(studentCollection){
});
pulishName
所定义的Publish的唯一名称,在一个App内全局唯一,该参数与sumeru.publish(modelName, publishName,function(callback))中的publishName名称需要保持一致。
function(Collection){}
Subscribe成功获得数据时,被调用的响应方法。
带参数 env.subscribe(publishName,arg1,arg2, … , function(collection){});
env.subscribe(“pub-StudentsWithGender”, “male”, function(msgCollection){
});
subscribeByPage
分页订阅数据
不带参数 env.subscribeByPage(publishName, options, function(collection){});
var pageOption{
pagesize : 1,
page : 2,
uniqueField : ‘time’
};
env.subscribeByPage(“pub-allStudents”, pageOption, function(studentCollection){
});
options
分页设置
pageSize
每页数据的数量
page
页码
uniqueField
排序的唯一字段名
带参数 env.subscribeByPage(publishName, options, arg1,arg2, … , function(collection){});
env.subscribeByPage(“pub-StudentsWithGender”, pageOption, “male”, function(msgCollection){
});
prioritySubscribe
在断线重新连接的情况下,使用prioritySubscribe方法订阅数据优先被调用,使用方式与subscribe相同。
publish
发布数据的方法,其运行在Server上。
不带参数 sumeru.publish(modelName,pubName,function(callback){},options)
modelName
被发布数据所属的Model名称
pubName
所定义的Publish的唯一名称,在一个App内全局唯一,该参数与Controller中subscribe()成对使用。
function(callback)
描述数据发布规则的自定义函数,在这里定义被发布数据所需要符合的条件。
options
可在此添加以下六种事件
beforeInsert
在实际插入数据到数据库前的事件
beforeInsert : function(serverCollection, structData, userinfo, callback){
callback(structData);
}
structData
需要插入到数据库的数据,我们可以对该数据进行操作,然后将数据插入到数据库中,如果对数据没有修改,则将原数据添加到数据库中。
callback
before系列的事件中如果不添加 callback(),将阻止数据对数据库的影响。
callback(structData)
如果需要对原数据进行修改,可以传入参数structData
afterInsert
在实际插入数据到数据库后的事件
afterInsert : function(serverCollection, structData){
}
beforeUpdate
在实际更新数据库数据前的事件
beforeUpdate : function(serverCollection, structData, userinfo, callback){
callback();
}
afterUpdate
在实际更新数据库数据后的事件
afterUpdate : function(serverCollection, structData){
}
beforeDelete
在实际删除数据库数据前的事件
beforeDelete : function(serverCollection, structData, userinfo, callback){
callback();
}
afterDelete
在实际删除数据库数据后的事件
afterDelete : function(serverCollection, structData){
}
实例:
module.exports = function(sumeru){
sumeru.publish(‘student’, ‘pub-allStudents’, function(callback){
var collection = this;
collection.find({}, function(err, items){
callback(items);
});
});
}
带参数 sumeru.publish(modelName,pubName,function(arg1, …, callback){},options)
实例:
module.exports = function(sumeru){
sumeru.publish(‘student’, ‘pub-allStudents’, function(gender,callback){
var collection = this;
collection.find({'gender':gender}, function(err, items){
callback(items);
});
});
}
publishByPage
分页发布数据
sumeru.publishByPage(modelName,pubName,function(arg1,arg2,…,pageOptions, callback){},options)
options
分页设置,有Controller中subscribeByPage()传入。
实例:
sumeru.publishByPage(‘student’, ‘pub-allStudents’, function(gender,options,callback){
var collection = this;
collection.find({ sort :{‘time’:-1},
limit : options.pagesize,
skip : (options.page-1)*options.pagesize,
“gender”: gender
}, function(err, items){
callback(items);
});
});
sort
排序
limit
每页显示的个数
skip
当前页与起始页间隔的个数
详细的使用情况请查看《Example》文档中的实例。
publishPlain
用于发布简单对象,而非Collection。
sumeru.publishPlain(modelName,pubName,function(callback){},options)
实例:
如果需要发布Collection中数据的总数量,可使用下面方法:
fw.publishPlain(‘student’, ‘pub-allStudents’, function(callback){
var collection = this;
collection.count({},function(err, count){
callback(count);
});
});
下面的三种方法是包含权限中心的身份验证的Publish。
securePublish
在身份验证成功的情况下发布数据
sumeru.publish(modelName,pubName,function(userinfo, callback){},options)
securePublishByPage
在身份验证成功的情况下分页发布数据
sumeru.securePublishByPage(modelName,pubName,function(pageOptions,userinfo, callback){},options)
securePublishPlain
在身份验证成功的情况下发布简单对象
sumeru.securePublishPlain(modelName,pubName,function(userinfo, callback){},options)
external
实现了三方数据同步的方法,用来满足从三方网站/三方接口获取和同步数据的需求。
extfind(pubName,callback)
在publish文件中发布第三方数据
fw.publish(‘news’,’pubnews’,function(callback){
var collection = this;
collection.extfind('pubnews',callback);
});
使用该方法需要在publish下添加一个如何获取第三方数据的配置文件
config[pubname]
pubname
与publish中collection.extfind(pubname,callback)方法pubname一致,全局唯一
uniqueColumn
uniqueColumn为三方数据唯一标识,类型为String
uniqueColumn : “name”,
fetchUrl: function((/* arg1, arg2, arg3 /)){}
指定抓取的URL。arg1,arg2为传递的参数
fetchUrl : function(/* arg1, arg2, arg3 /){
return ‘http://some.host.com‘;
}
resolve : function(originData){}
resolve方法作用是将抓取回来的原始数据(originData)转化成为符合Model定义的数据(resolved)
resolve : function(originData){
var j = JSON.parse(originData);
var resolved = j;
return resolved;
}
fetchInterval
fetchInterval为可选参数,用来指定抓取时间间隔,单位为ms
buffer
buffer为可选参数,值为true时表示获取原始Buffer,否则获取原始数据字符串
type
声明此模块为归属为’external’
return {
type : ‘external’,
config : config
}
实例如下:
/**
* 获取三方数据信息,由开发者自定义
*/
function runnable(){
//{Object} config是所有三方publish配置的容器
var config = {};
config['pubext'] = {
//{String} uniqueColumn为三方数据唯一标识
uniqueColumn : "name",
//{Function} fetchUrl的参数就是订阅时发起的参数,返回值为pubext所抓取的url地址
fetchUrl : function(/** arg1, arg2, arg3 */){
return 'http://some.host.com';
},
//{Function} resolve方法作用是将抓取回来的原始数据(originData)转化成为符合Model定义的数据(resolved)
resolve : function(originData){
var j = JSON.parse(originData);
var resolved = j;
return resolved;
},
//{Number} fetchInterval为可选参数,用来指定抓取时间间隔,单位为ms
fetchInterval : 60 * 1000,
//{Boolean} buffer为可选参数,值为true时表示获取原始Buffer,否则获取原始数据字符串
buffer : false
}
//最后需要声明此模块为归属为'external'
return {
type : 'external',
config : config
}
}
module.exports = runnable;
指定三方增/删/改接口以及数据
当数据发生变化时,如何使用Clouda达到三方数据同步的效果,具体实现方法如下:
较为紧凑的声明方式
postUrl
postUrl方法用来指定三方post接口的地址信息, 参数type为增量类型,增量类型为’insert’,’update’,’delete’三者之一;
prepare
prepare方法用来将增量数据转化成为符合三方POST接口要求的post数据,参数type同为增量类型,参数data为增量的实际数据。
实例如下:
/**
* 三方数据POST请求信息,由开发者自定义
*/
function runnable(){
var config = {}
config['pubext'] = {
/**
* 声明三方POST接口地址
* {String} type为'delete', 'insert', 'update'其中之一
* 如果subscribe时带参数,参数会按照subscribe顺序接在postUrl的参数中
*/
postUrl : function(type /** arg1, arg2, arg3... */){
var options = {
host : 'some.host.com',
path : '/' + type ,
headers: {
//在此自定义header内容,clouda默认的 'Content-Type': 'application/x-www-form-urlencoded'
'Content-Type': ...
}
}
return options;
},
/**
* prepare方法将增量数据转化为符合三方要求的post数据。
* {String} type为增量操作,值为'delete', 'insert', 'update'其一;
* {Object} data为增量数据,如:{ name : 'user1', age : 26 }。
*/
prepare : function(type, data){
var prepareData = {}; //prepareData为三方post所需的data
if(type === "delete"){
prepareData.name = data.name;
}else if(type === "insert"){
prepareData.name = data.name;
prepareData.age = data.age;
}else{
prepareData.name = data.name;
prepareData.age = data.age;
}
return prepareData;
}
}
return {
type : 'external',
config : config
}
}
module.exports = runnable;
较为工整的声明方式
deleteUrl,insertUrl,updateUrl
三个方法作用等同于postUrl,返回不同操作下三方接口url信息
onDelete,onInsert,onUpdate
三个方法作用等同于prepare方法, 返回经过处理,传给三方接口的post数据
实例如下:
function runnable(){
var config = {};
config['pubext'] = {
//arg1, arg2, arg3是subscribe时输入的参数
deleteUrl : function(/** arg1, arg2, arg3... */){
return {
host : 'some.host.com',
path : '/delete'
}
},
insertUrl : function(/** arg1, arg2, arg3... */){
return {
host : 'some.host.com',
path : '/insert'
}
},
updateUrl : function(/** arg1, arg2, arg3... */){
return {
host : 'some.host.com',
path : '/update'
}
},
onInsert : function(data){
var prepareData = {};
prepareData.name = data.name;
prepareData.age = data.age;
return prepareData;
},
onUpdate : function(data){
var prepareData = {};
prepareData.name = data.name;
prepareData.age = data.age;
return prepareData;
},
onDelete : function(data){
var prepareData = {}
prepareData.name = data.name;
return prepareData;
}
}
return {
type : 'external',
config : config
}
}
module.exports = runnable;
sumeru.external.get
向第三方发送get请求
var url = “http://some.host.com“;
var getCallback = function(data){
console.log(data);
}
sumeru.external.get(url, getCallback);
sumeru.external.post
向第三方发送post请求
var options = {
host : “some.host.com”,
path : “/insert”
}
var postData = {
name : sumeru.utils.randomStr(8),
age : parseInt( 100 * Math.random())
}
var postCallback = function(data){
console.log(data);
}
sumeru.external.post(options, postData, postCallback);
具
touch.js下载使用方式的更多相关文章
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- Js下载文件到本地(兼容多浏览器)
在客户端通过js下载文件,试过几种下载方式,iframe方式仅限于IE浏览器,window.open(url),location.href=url 这两种方式在chrome浏览器还会是直接打开文件而不 ...
- 移动端上下滑动事件之--坑爹的touch.js
下面的方法,不知道是操作方法不对还是啥. 在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...
- ajax下载,前端js下载(转)
前面一直做过下载的功能.就是后台将文件流写入response里面,然后就好了.前台会自动弹出下载提示等. 今天打算做一个ajax下载.想当然的结果死活浏览器没反应.我擦. 然后浏览器调试,发现resp ...
- 不阻塞浏览器的解析,待外部js下载完成后异步执行
网站统计中的数据收集原理及实现(js埋点实现) - lastwhisper - CSDN博客 https://blog.csdn.net/l1212xiao/article/details/80450 ...
- 移动端上下滑动事件之--坑爹的touch.js
原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!
原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...
- 一、touch.js
一.touch.js 1.引用链接: <script src="https://cdn.bootcss.com/touchjs/0.2.14/touch.min.js"> ...
- 病毒木马查杀实战第025篇:JS下载者脚本木马的分析与防御
前言 这次我与大家分享的是我所总结的关于JS下载者脚本木马的分析与防御技术.之所以要选择这样的一个题目,是因为在日常的病毒分析工作中,每天都会遇到这类病毒样本,少则几个,多则几十个(当然了,更多的样本 ...
随机推荐
- ConcurrentHashMap、CopyOnWriteArrayList、LinkedHashMap
HashMap中未进行同步考虑,而Hashtable在每个方法上加上了synchronized,锁住了整个Hash表,一个时刻只能有一个线程操作,其他的线程则只能等待,在并发的环境下,这样的操作导致H ...
- 济南清北学堂游记 Day 5.
十一月的第一天.算下来在济南已经呆了接近一星期了...... 还剩九天...看着洛谷的倒计时心里直发慌. 也许我不该过多纠结于高级算法,基础也是很重要的. 今天晚上就自由的敲一些板子吧.最后的九天,让 ...
- 洛谷 P3672 小清新签到题 [DP 排列]
传送门 题意:给定自然数n.k.x,你要求出第k小的长度为n的逆序对对数为x的1~n的排列 $n \le 300, k \le 10^13$ 一下子想到hzc讲过的DP 从小到大插入,后插入不会对前插 ...
- 分享一下自己写的一个vscode-leetcode答题插件
0. 前言 春节这几天每天吃吃喝喝睡睡玩玩,突然发现明天就要上班了,吓得我虎躯一震. 春节结束之后,学生党们陆续开学,相信有许多同学马上就要在春季招聘中拼杀一番.想要收获心意的offer,当然免不了对 ...
- iOS 开发 atomic 与 nonatomic 区别
atomic : 变量默认是有该有属性的,这个属性是为了保证在多线程的情况下,编译器会自动生成一些互斥加锁的代码,避免该变量的读写不同步的问题. nonatomic : 如果该对象无需考虑多线程的 ...
- 通过核心概念了解webpack工作机制
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gr ...
- python多版本以及各种包管理
python多版本以及各种包管理 python 包管理 各个版本 python版本管理 由于Python有2.x和3.x两个大的版本,而且每一个工程建立所用的各种包的版本也不尽相同(如flask1.x ...
- Visual Studio 2017 发布 15.5 版本,百度网盘离线安装包下载。
Visual Studio 2017 15.5 版本已正式发布,同时发布的还有 Visual Studio for Mac 7.3 .此次更新包含主要性能改进,新特性以及 bug 修复.发行说明中文版 ...
- java常用类————Date类
Date类在Java.util包中. 一.功能介绍:创建Date对象,获取时间,格式化输出的时间. 二.对象创建:1.使用Date类无参数的构造方法创建的对象可以获取本地时间.例如: Date now ...
- CentOS7上安装Nginx、PHP、MySQL
一.安装准备 首先由于nginx的一些模块依赖一些lib库,所以在安装nginx之前,必须先安装这些lib库,这些依赖库主要有g++.gcc.openssl-devel.pcre-devel和zlib ...