由于(yú)微信小程序 技術生态比較閉合，導緻很多 現代前端框架很多積累出(chū)的(de)成果都沒有實現(可能未來(lái)會逐一實現). 用慣了(le／liǎo)現代 再耍小程序 總感覺很不(bù)順手.

需要(yào / yāo)結果的(de)請直接看最後的(de)WXS

### View Filter
filter 理解爲(wéi / wèi)管道(dào)加工處理, 你扔給我一組數據 經過各種不(bù)同類型的(de)管道(dào)加工 産出(chū)新的(de)數據 但是(shì)又不(bù)會影響修改原數據, 最終展示給用戶.

現有前端框架filter一般:

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

使用 | 作爲(wéi / wèi)管道(dào)符 傳遞參數進行序列化

缺陷:

截止目前,小程序官方并沒有管道(dào)實現方式,以(yǐ)下列出(chū)了(le／liǎo)替代幾種方案，供大(dà)家選擇使用.

直接修改原數據

在(zài)請求完成之(zhī)後 對返回值data進行一次數據處理 比如 抽象一個(gè)_formatListData方法對 返回進行二次處理.

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

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

ES6 get

data : {
  time : 1511748300571
}

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

通過get方法來(lái)實現對字段顯示過濾. 隻能操作對象 對數組中的(de)item 比較無力.

WXS

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

了(le／liǎo)解了(le／liǎo)wxs 設計初衷，我們也(yě)就(jiù)知道(dào)能做什麽事情了(le／liǎo).
wxs 目前主要(yào / yāo)是(shì)增強 wxml 标簽的(de)表達能力

ps : 因爲(wéi / wèi)運行在(zài)不(bù)同線程所以(yǐ) js與wxs 不(bù)能相互引用的(de). 這(zhè)就(jiù)有可能在(zài)js中使用公共方法 在(zài)wxs中需要(yào / yāo)重新寫一份(爲(wéi / wèi)了(le／liǎo)共享filter) 造成代碼冗餘.

通過wxs 實現共享filter:

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

1. WXS 實現日期格式化（es6語法不(bù)能使用)

      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. 在(zài)業務頁面wxml中引用wxs

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

   使用filter

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

   結尾

   wxs 基本滿足filter的(de)場景:

共享filter場景 采用3
業務filter很多場景 采用1,3
簡單業務filter 數據非數組型場景 采用2
小程序還有很長的(de)路要(yào / yāo)走,仍需繼續努力.