數(shù)據(jù)變更緩存

根據(jù)微信小程序官方優(yōu)化建議，grace可以避免如下問題：

1. 頻繁的去 setData

   為了解決這個(gè)問題，grace引入了數(shù)據(jù)變更緩存機(jī)制，下面看一個(gè)例子：

   //開始緩存數(shù)據(jù)變更
   this.$data.$cache();
   
   //接下來是n次密集的數(shù)據(jù)更新
   this.$data.name="doris"
   this.$data.userCard.no="610xxx889"
   this.$data.balance=66666
   ....
   //統(tǒng)一提交變更
   this.$data.$commit();

   在調(diào)用 $cache() 之后，所有數(shù)據(jù)的變化將會(huì)緩存起來（不會(huì)觸發(fā) setData ）, 知道調(diào)用$commit 后，才會(huì)統(tǒng)一刷新，這樣即避免了頻繁調(diào)用 setData 帶來的性能消耗。

2. 后臺(tái)態(tài)頁面進(jìn)行 setData

   當(dāng)頁面進(jìn)入后臺(tái)態(tài)（用戶不可見），不應(yīng)該繼續(xù)去進(jìn)行 setData ，后臺(tái)態(tài)頁面的渲染用戶是無法感受的，另外后臺(tái)態(tài)頁面去 setData 也會(huì)搶占前臺(tái)頁面的執(zhí)行。當(dāng)頁面進(jìn)入后臺(tái)時(shí)，grace會(huì)自動(dòng)停止數(shù)據(jù)更新，當(dāng)頁面再次轉(zhuǎn)到前臺(tái)時(shí)會(huì)自動(dòng)開啟渲染。

Http

Grace通過Promise封裝了wx.request， 并支持?jǐn)r截器、請(qǐng)求配置等：

1. Restful API

   $http.get(url, [data], [options])
   $http.post(url, data, [options])
   $http.put(url, data, [options])
   $http.delete(url,[data],[options])
   $http.patch(url,[data],[options])

2. 多個(gè)并發(fā)請(qǐng)求

   var getUserRecords=()=>{
     return this.$http.get('/user/133/records');
   }
   
   var getUserProjects=()=>{
     return this.$http.get('/user/133/projects');
   }
   
   this.$http.all([getUserRecords(), getUserProjects()])
     .then(this.$http.spread(function (records, projects) {
       // Both requests are now complete
     }))
     .catch(function(error){
       console.log(error)
     })

3. 攔截器

   // Add a request interceptor
   this.$http.interceptors.request.use((config,promise)=>{
       // Do something before request is sent
       config.headers["X-Tag"]="grace";
       // Complete the request with custom data
       // promise.resolve("fake data")
       return config;
   })
   
   // Add a response interceptor
   this.$http.interceptors.response.use(
       (response,promise) => {
           // Do something with response data .
           // Just return the data field of response
           return response.data
       },
       (err,promise) => {
         // Do something with response error
           //promise.resolve("ssss")
       }
   )

var newHttp=this.$creatHttpClient();

事件總線

全局事件總線可以在全局（跨頁面）觸發(fā)、監(jiān)聽事件。

$on(eventName,handler)

監(jiān)聽事件

this.$bus.$on("enventName",(arg1,arg2)=>{
      //事件處理器參數(shù)為$emit觸發(fā)事件時(shí)傳遞的參數(shù)
  	  console.log(arg1)
})

$emit(eventName,[…arguments])

觸發(fā)事件

this.$bus.$emit("enventName", 1,2)

$off(eventName,[handler])

取消監(jiān)聽

this.$bus.$off("eventName",cb)

當(dāng)提供hanlder時(shí)，只將該hanlder移出監(jiān)聽者隊(duì)列，如果沒有傳handler,則清空該事件的監(jiān)聽者隊(duì)列。

跨頁面?zhèn)髦?/h2>

在小程序中打開新頁面時(shí)可以通過url的query向新頁面?zhèn)髦?，這很容易，如：

wx.navigateTo({
  //傳遞id,在新頁面onLoad中獲取
  url: 'test?id=1'
})

但是，新頁面關(guān)閉時(shí)如何向前一個(gè)頁面返回?cái)?shù)據(jù)？ 小程序中沒有提供直接的方法，grace給所有頁面添加了一個(gè)回調(diào)，用于接收頁面回傳的數(shù)據(jù)，如下：

createPage({
  data:{}
  $onBackData(data){
   //接收頁面返回的數(shù)據(jù)，
  }  
  ...         
})

上面的頁面我們記為A, 假設(shè)你打開了一個(gè)新頁面B, 你需要在B中選擇一些信息后回傳給A，那么你在B中應(yīng)該：

createPage({
  data: {},
  bindViewTap(){
    //返回上一個(gè)頁面，并回傳一些數(shù)據(jù)
    this.$goBack({xxx:5});
  }
  ...
}

$goBack([data],[delta])

關(guān)閉當(dāng)前頁面，返回上一頁面或多級(jí)頁面，如果存在 data , 則會(huì)調(diào)用返回到的頁面的 $onBackData 回調(diào)，若 data 不存在，則不會(huì)回調(diào) $onBackData .

delta 意義同 wx.navigateBack 參數(shù)的delta, 表示回退的頁面數(shù)，默認(rèn)為1（上一頁），如果如果 delta 大于現(xiàn)有頁面數(shù)，則返回到首頁。