數據變更緩存

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

1. 頻繁的去 setData

   為了解決這個問題，grace引入了數據變更緩存機制，下面看一個例子：

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

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

2. 后臺態(tài)頁面進行 setData

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

Http

Grace通過Promise封裝了wx.request， 并支持攔截器、請求配置等：

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. 多個并發(fā)請求

   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)=>{
      //事件處理器參數為$emit觸發(fā)事件時傳遞的參數
  	  console.log(arg1)
})

$emit(eventName,[…arguments])

觸發(fā)事件

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

$off(eventName,[handler])

取消監(jiān)聽

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

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

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

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

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

但是，新頁面關閉時如何向前一個頁面返回數據？ 小程序中沒有提供直接的方法，grace給所有頁面添加了一個回調，用于接收頁面回傳的數據，如下：

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

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

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

$goBack([data],[delta])

關閉當前頁面，返回上一頁面或多級頁面，如果存在 data , 則會調用返回到的頁面的 $onBackData 回調，若 data 不存在，則不會回調 $onBackData .

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