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);
具