Touch

在開發(fā)移動端的應(yīng)用中會使用到很多的手勢操作，例如一指拖動、兩指旋轉(zhuǎn)等等，為了方便開放者快速集成這些手勢，在Clouda中內(nèi)置了事件和手勢庫Library.touch，下面將詳細(xì)的介紹如何使用Library.touch。

touch.config

語法： touch.config(config)

對手勢事件庫進(jìn)行全局配置。

參數(shù)描述：

• config為一個對象

  { 
      tap: true,                  //tap類事件開關(guān), 默認(rèn)為true 
      doubleTap: true,            //doubleTap事件開關(guān)， 默認(rèn)為true 
      hold: true,                 //hold事件開關(guān), 默認(rèn)為true 
      holdTime: 650,              //hold時間長度 
      swipe: true,                //swipe事件開關(guān) 
      swipeTime: 300,             //觸發(fā)swipe事件的最大時長 
      swipeMinDistance: 18,       //swipe移動最小距離 
      swipeFactor: 5,             //加速因子, 值越大變化速率越快 
      drag: true,                 //drag事件開關(guān) 
      pinch: true,                //pinch類事件開關(guān) 
  } 

touch.on

語法：touch.on(element, types, options, callback)

綁定指定元素的事件。

參數(shù)描述：

• element: 元素對象或選擇器。

• types: 事件的類型, 可接受多個事件以空格分開，支持原生事件的透傳, 支持的一些事件類型有:

例如旋轉(zhuǎn)實例如下：

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(可選): 目前可配置的參數(shù)為:

  { 
     //采樣頻率 
     interval: 10,//性能參數(shù)，值越小，實時性越好， 但性能可能略差， 值越大， 性能越好。遇到性能問題時，可以將值設(shè)大調(diào)優(yōu)，建議值設(shè)置為10。 
     //swipe加速度因子（swipe事件專用） 
     swipeFactor: 5 //(int: 1-10)值越大，速率更快。 
  } 

• callback: 事件處理函數(shù)， 該函數(shù)接受的參數(shù)為一個gesture event object, 可訪問的屬性有：

  • originEvent //觸發(fā)某事件的原生對象

  • type //事件的名稱

  • rotation //旋轉(zhuǎn)角度

  • scale //縮放比例

  • direction //操作的方向?qū)傩?/p>

  • fingersCount //操作的手勢數(shù)量

  • position //相關(guān)位置信息, 不同的操作產(chǎn)生不同的位置信息。

  • distance //swipe類兩點之間的位移

  • distanceX //swipe類事件x方向的位移

  • distanceY //swipe類事件y方向的位移

  • angle //swipe類事件觸發(fā)時偏移角度

  • factor //swipe事件加速度因子

  • startRotate //啟動單指旋轉(zhuǎn)方法，在某個元素的touchstart觸發(fā)時調(diào)用。

touch.live

語法：touch.live(selector, types, options, callback)

使用方法基本上與on相同，live的第一個參數(shù)只接受css3選擇器。通過live()方法附加的事件處理程序適用于匹配選擇器的當(dāng)前及未來的元素（比如由腳本創(chuàng)建的新元素）

touch.off

語法：touch.off(element,types,callback)

解除某元素上的事件綁定。

參數(shù)描述：

• element：元素對象或選擇器

• types：事件的類型

• callback：時間處理函數(shù)

#p#

Publish/Subscribe

subscribe

訂閱被發(fā)布的數(shù)據(jù)，與pubilsh配合使用

• 不帶參數(shù) env.subscribe(publishName, function(collection){});

  env.subscribe("pub-allStudents", function(studentCollection){ 
   
  }); 

  • pulishName

    所定義的Publish的唯一名稱，在一個App內(nèi)全局唯一，該參數(shù)與sumeru.publish(modelName, publishName,function(callback))中的publishName名稱需要保持一致。

  • function(Collection){}

    Subscribe成功獲得數(shù)據(jù)時，被調(diào)用的響應(yīng)方法。

• 帶參數(shù) env.subscribe(publishName,arg1,arg2, ... , function(collection){});

  env.subscribe("pub-StudentsWithGender", "male", function(msgCollection){ 
   
  }); 

• subscribeByPage

  分頁訂閱數(shù)據(jù)

  • 不帶參數(shù) env.subscribeByPage(publishName, options, function(collection){});

    var pageOption{ 
        pagesize : 1,  
        page : 2, 
        uniqueField : 'time' 
    }; 
     
    env.subscribeByPage("pub-allStudents", pageOption, function(studentCollection){ 
     
    }); 

    • options

      分頁設(shè)置

      • pageSize

        每頁數(shù)據(jù)的數(shù)量

      • page

        頁碼

      • uniqueField

        排序的唯一字段名

  • 帶參數(shù) env.subscribeByPage(publishName, options, arg1,arg2, ... , function(collection){});

    env.subscribeByPage("pub-StudentsWithGender", pageOption, "male", function(msgCollection){ 
     
    }); 

• prioritySubscribe

在斷線重新連接的情況下，使用prioritySubscribe方法訂閱數(shù)據(jù)優(yōu)先被調(diào)用，使用方式與subscribe相同。

#p#

publish

發(fā)布數(shù)據(jù)的方法，其運行在Server上。

• 不帶參數(shù) sumeru.publish(modelName,pubName,function(callback){},options)

  • modelName

    被發(fā)布數(shù)據(jù)所屬的Model名稱

  • pubName

    所定義的Publish的唯一名稱，在一個App內(nèi)全局唯一，該參數(shù)與Controller中subscribe()成對使用。

  • function(callback)

    描述數(shù)據(jù)發(fā)布規(guī)則的自定義函數(shù)，在這里定義被發(fā)布數(shù)據(jù)所需要符合的條件。

  • options

    可在此添加以下六種事件

    • beforeInsert

      在實際插入數(shù)據(jù)到數(shù)據(jù)庫前的事件

      beforeInsert : function(serverCollection, structData, userinfo, callback){ 
          callback(structData); 
      } 

      • structData

        需要插入到數(shù)據(jù)庫的數(shù)據(jù)，我們可以對該數(shù)據(jù)進(jìn)行操作，然后將數(shù)據(jù)插入到數(shù)據(jù)庫中，如果對數(shù)據(jù)沒有修改，則將原數(shù)據(jù)添加到數(shù)據(jù)庫中。

      • callback

        before系列的事件中如果不添加 callback()，將阻止數(shù)據(jù)對數(shù)據(jù)庫的影響。

      • callback(structData)

        如果需要對原數(shù)據(jù)進(jìn)行修改，可以傳入?yún)?shù)structData

    • afterInsert

      在實際插入數(shù)據(jù)到數(shù)據(jù)庫后的事件

      afterInsert : function(serverCollection, structData){ 
      } 

    • beforeUpdate

      在實際更新數(shù)據(jù)庫數(shù)據(jù)前的事件

      beforeUpdate : function(serverCollection, structData, userinfo, callback){ 
          callback(); 
      } 

    • afterUpdate

      在實際更新數(shù)據(jù)庫數(shù)據(jù)后的事件

      afterUpdate : function(serverCollection, structData){ 
      } 

    • beforeDelete

      在實際刪除數(shù)據(jù)庫數(shù)據(jù)前的事件

      beforeDelete : function(serverCollection, structData, userinfo, callback){ 
          callback(); 
      } 

    • afterDelete

      在實際刪除數(shù)據(jù)庫數(shù)據(jù)后的事件

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

• 帶參數(shù) 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

  分頁發(fā)布數(shù)據(jù)

  sumeru.publishByPage(modelName,pubName,function(arg1,arg2,...,pageOptions, callback){},options)

  • options

    分頁設(shè)置，有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

    每頁顯示的個數(shù)

  • skip

    當(dāng)前頁與起始頁間隔的個數(shù)

  詳細(xì)的使用情況請查看《Example》文檔中的實例。

• publishPlain

  用于發(fā)布簡單對象，而非Collection。

  sumeru.publishPlain(modelName,pubName,function(callback){},options)

  實例：

  如果需要發(fā)布Collection中數(shù)據(jù)的總數(shù)量，可使用下面方法：

  fw.publishPlain('student', 'pub-allStudents', function(callback){ 
      var collection = this; 
   
      collection.count({},function(err, count){ 
          callback(count); 
      }); 
  }); 

  下面的三種方法是包含權(quán)限中心的身份驗證的Publish。

• securePublish

  在身份驗證成功的情況下發(fā)布數(shù)據(jù)

  sumeru.publish(modelName,pubName,function(userinfo, callback){},options)

• securePublishByPage

  在身份驗證成功的情況下分頁發(fā)布數(shù)據(jù)

  sumeru.securePublishByPage(modelName,pubName,function(pageOptions,userinfo, callback){},options)

• securePublishPlain

  在身份驗證成功的情況下發(fā)布簡單對象

  sumeru.securePublishPlain(modelName,pubName,function(userinfo, callback){},options)

• external

  實現(xiàn)了三方數(shù)據(jù)同步的方法，用來滿足從三方網(wǎng)站/三方接口獲取和同步數(shù)據(jù)的需求。

  • extfind(pubName,callback)

    在publish文件中發(fā)布第三方數(shù)據(jù)

    fw.publish('news','pubnews',function(callback){ 
        var collection = this; 
     
        collection.extfind('pubnews',callback); 
    }); 

  使用該方法需要在publish下添加一個如何獲取第三方數(shù)據(jù)的配置文件

  • config[pubname]

    • pubname

      與publish中collection.extfind(pubname,callback)方法pubname一致，全局唯一

    • uniqueColumn

      uniqueColumn為三方數(shù)據(jù)唯一標(biāo)識，類型為String

      uniqueColumn : "name",

    • fetchUrl: function((/** arg1, arg2, arg3 */)){}

      指定抓取的URL。arg1,arg2為傳遞的參數(shù)

      fetchUrl : function(/** arg1, arg2, arg3 */){ 
          return 'http://some.host.com'; 
      } 

    • resolve : function(originData){}

      resolve方法作用是將抓取回來的原始數(shù)據(jù)(originData)轉(zhuǎn)化成為符合Model定義的數(shù)據(jù)(resolved)

      resolve : function(originData){ 
          var j = JSON.parse(originData); 
          var resolved = j; 
          return resolved; 
      } 

    • fetchInterval

      fetchInterval為可選參數(shù)，用來指定抓取時間間隔，單位為ms

    • buffer

      buffer為可選參數(shù)，值為true時表示獲取原始Buffer，否則獲取原始數(shù)據(jù)字符串

    • type

      聲明此模塊為歸屬為'external'

      return { 
          type : 'external', 
          config : config 
      } 

    實例如下：

    /** 
     * 獲取三方數(shù)據(jù)信息，由開發(fā)者自定義 
     */ 
    function runnable(){ 
        //{Object} config是所有三方publish配置的容器 
        var config = {}; 
     
        config['pubext'] = { 
            //{String} uniqueColumn為三方數(shù)據(jù)唯一標(biāo)識 
            uniqueColumn : "name", 
     
            //{Function} fetchUrl的參數(shù)就是訂閱時發(fā)起的參數(shù)，返回值為pubext所抓取的url地址 
            fetchUrl : function(/** arg1, arg2, arg3 */){ 
                return 'http://some.host.com'; 
            }, 
     
            //{Function} resolve方法作用是將抓取回來的原始數(shù)據(jù)(originData)轉(zhuǎn)化成為符合Model定義的數(shù)據(jù)(resolved) 
            resolve : function(originData){ 
                var j = JSON.parse(originData); 
                var resolved = j; 
     
                return resolved; 
            }, 
     
            //{Number} fetchInterval為可選參數(shù)，用來指定抓取時間間隔，單位為ms 
            fetchInterval : 60 * 1000, 
     
            //{Boolean} buffer為可選參數(shù)，值為true時表示獲取原始Buffer，否則獲取原始數(shù)據(jù)字符串 
            buffer : false 
        } 
     
        //最后需要聲明此模塊為歸屬為'external' 
        return { 
            type : 'external', 
            config : config 
        } 
     
    } 
     
    module.exports = runnable; 

  • 指定三方增/刪/改接口以及數(shù)據(jù)

    當(dāng)數(shù)據(jù)發(fā)生變化時，如何使用Clouda達(dá)到三方數(shù)據(jù)同步的效果，具體實現(xiàn)方法如下：

    • 較為緊湊的聲明方式

      • postUrl

        postUrl方法用來指定三方post接口的地址信息, 參數(shù)type為增量類型，增量類型為'insert','update','delete'三者之一;

      • prepare

        prepare方法用來將增量數(shù)據(jù)轉(zhuǎn)化成為符合三方POST接口要求的post數(shù)據(jù)，參數(shù)type同為增量類型，參數(shù)data為增量的實際數(shù)據(jù)。

      實例如下：

      /** 
       *  三方數(shù)據(jù)POST請求信息，由開發(fā)者自定義 
       */ 
      function runnable(){ 
       
          var config = {} 
       
          config['pubext'] = { 
       
              /** 
               * 聲明三方POST接口地址 
               * {String} type為'delete', 'insert', 'update'其中之一 
               * 如果subscribe時帶參數(shù)，參數(shù)會按照subscribe順序接在postUrl的參數(shù)中 
               */ 
              postUrl : function(type /** arg1, arg2, arg3... */){ 
                  var options = { 
                      host : 'some.host.com', 
                      path : '/' + type , 
                      headers: { 
                          //在此自定義header內(nèi)容，clouda默認(rèn)的 'Content-Type': 'application/x-www-form-urlencoded' 
                          'Content-Type': ... 
                      } 
                  } 
                  return options; 
              }, 
       
              /** 
               * prepare方法將增量數(shù)據(jù)轉(zhuǎn)化為符合三方要求的post數(shù)據(jù)。 
               * {String} type為增量操作，值為'delete', 'insert', 'update'其一; 
               * {Object} data為增量數(shù)據(jù)，如：{ 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方法, 返回經(jīng)過處理，傳給三方接口的post數(shù)據(jù)

      實例如下：

      function runnable(){ 
       
          var config = {}; 
       
          config['pubext'] = { 
              //arg1, arg2, arg3是subscribe時輸入的參數(shù) 
              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

    向第三方發(fā)送get請求

    var url = "http://some.host.com"; 
    var getCallback = function(data){ 
        console.log(data); 
    } 
    sumeru.external.get(url, getCallback); 

  • sumeru.external.post

    向第三方發(fā)送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); 

  具體使用請查看《Example》文檔中的SpiderNews實例。