由于微信小程序 技術(shù)生態(tài)比較閉合，導(dǎo)致很多 現(xiàn)代前端框架很多積累出的成果都沒有實(shí)現(xiàn)(可能未來會(huì)逐一實(shí)現(xiàn)). 用慣了現(xiàn)代 再耍小程序 總感覺很不順手.

需要結(jié)果的請(qǐng)直接看最后的WXS

### View Filter
filter 理解為管道加工處理, 你扔給我一組數(shù)據(jù) 經(jīng)過各種不同類型的管道加工 產(chǎn)出新的數(shù)據(jù) 但是又不會(huì)影響修改原數(shù)據(jù), 最終展示給用戶.

現(xiàn)有前端框架filter一般:

 time | dateTime('yyy-mm-dd')

使用 | 作為管道符 傳遞參數(shù)進(jìn)行序列化

缺陷:

截止目前,小程序官方并沒有管道實(shí)現(xiàn)方式,以下列出了替代幾種方案，供大家選擇使用.

直接修改原數(shù)據(jù)

在請(qǐng)求完成之后 對(duì)返回值data進(jìn)行一次數(shù)據(jù)處理 比如 抽象一個(gè)_formatListData方法對(duì) 返回進(jìn)行二次處理.

 _formatListData(list) {
     return list.map((item) => {
          let date = FormatUtil.getDateTime(item.childBirth);
          item.filterChildBirth = `${date.y}-${date.M}-${date.d}`;
      return item;
    }
}

這種方式會(huì)給原數(shù)據(jù)添加新字段 filterChildBirth (原字段為 childBirth) . 最終展示也是顯示filterChildBirth 到view上面，多個(gè)需要filter的字段都通過這種方式去處理,很明顯 對(duì)一些業(yè)務(wù)型filter倒還好 如果遇到filter需要 共享 就比較坑.

ES6 get

data : {
  time : 1511748300571
}

 get time (){    
  return FormatUtil.getDate(this.data.time);
}

通過get方法來實(shí)現(xiàn)對(duì)字段顯示過濾. 只能操作對(duì)象 對(duì)數(shù)組中的item 比較無力.

WXS

微信小程序的架構(gòu)分為 app-service 和 page-frame，分別運(yùn)行于不同的線程。你在開發(fā)時(shí)寫的所有 JS 都是運(yùn)行在 app-service 線程里的，而每個(gè)頁面各自的 WXML/WXSS 則運(yùn)行在 page-frame 中。app-service 與 page-frame 之間通過橋協(xié)議通信（包括 setData 調(diào)用、canvas指令和各種DOM事件），涉及消息序列化、跨線程通信與evaluateJavascript()。這個(gè)架構(gòu)的好處是：分開了業(yè)務(wù)主線程和顯示界面，即便業(yè)務(wù)主線程非常繁忙，也不會(huì)阻塞用戶在 page-frame 上的交互。一個(gè)小程序可以有多個(gè) page-frame （webview），頁面間切換動(dòng)畫比SPA更流暢。壞處是：在 page-frame 上無法調(diào)用業(yè)務(wù) JS?？缇€程通信的成本很高，不適合需要頻繁通信的場(chǎng)景。業(yè)務(wù) JS 無法直接控制 DOM。
作者：魯小夫
鏈接：https://www.zhihu.com/questio...

了解了wxs 設(shè)計(jì)初衷，我們也就知道能做什么事情了.
wxs 目前主要是增強(qiáng) wxml 標(biāo)簽的表達(dá)能力

ps : 因?yàn)檫\(yùn)行在不同線程所以 js與wxs 不能相互引用的. 這就有可能在js中使用公共方法 在wxs中需要重新寫一份(為了共享filter) 造成代碼冗余.

通過wxs 實(shí)現(xiàn)共享filter:

1. 首先我們建立共享filter文件夾,實(shí)現(xiàn)一個(gè)日期格式化

1. WXS 實(shí)現(xiàn)日期格式化（es6語法不能使用)

      var DateFr = {
   
       getDate: function (time, splitStr) {
   
      if (!time) return '';
   
      var date =getDate(time);
      var M = date.getMonth() + 1;
      var y = date.getFullYear();
      var d = date.getDate();
   
      if (M < 10) M = "0" + M;
      if (d < 10) d = "0" + d;
   
      if (splitStr)
        return y +splitStr + M +splitStr+d;
      else
        return {
          y: y,
          M: M,
          d: d
        };
        }
      }
   
      module.exports = {
        getDate: DateFr.getDate
      }
   
   

2. 在業(yè)務(wù)頁面wxml中引用wxs

   
        <wxs module="dateFr" src=https://www.wxapp-union.com/"../../../../filter/dateFr.wxs"></wxs>
         

   使用filter

         <text >{{dateFr.getTime(item.createdAt,':')}}</text>
      

   結(jié)尾

   wxs 基本滿足filter的場(chǎng)景:

共享filter場(chǎng)景 采用3
業(yè)務(wù)filter很多場(chǎng)景 采用1,3
簡(jiǎn)單業(yè)務(wù)filter 數(shù)據(jù)非數(shù)組型場(chǎng)景 采用2
小程序還有很長(zhǎng)的路要走,仍需繼續(xù)努力.