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