數據過濾器使用法則

相信很多企業版用戶已經發現編輯器出現了一個新功能「數據過濾器」，然而打開這個功能之後，又不知道怎麼用。今天我們就來簡單入門一下這個新功能。

「數據過濾器」可以算是「字段映射」的升級版。一定有很多人已經用了「字段映射」這個功能用來滿足不同組件之間的數據源複用。

映射前：

[
    {
        "sk": 1
    }
]

映射後：

[
    {
        "sk": 1,
        "value": 1
    }
]

那麼問題來了，如果是下麵這種數據格式，我該如何接入到組件上呢？

{
  "data": {
    "sk": 1
  }
}

這種情況下，就輪到「數據過濾器」出手了。

首先過濾器使用的語法是 javascript，一種非常簡單易上手的語言，可以參考 https://www.w3school.com.cn/js/pro_js_syntax.asp 學習。如果實在學不會，請求教公司裏的前端哥哥、前端弟弟、前端姐姐、前端妹妹們。

回到「數據過濾器」的功能上。假設你已經學會了javascript語言，我們的每個過濾器是一個 function，接口定義如下，框架隻傳入一個變量 data，過濾器需要返回經過處理後的 data：

function (data) {
  // do something...
  return data;
}

你隻需要書寫函數體即可，比如我現在要把上一段的問題解決，我隻需將 data 的數據格式由 Object 轉換為 Array ，並且將 sk 字段的數值放到 value 字段上即可：

data.data.value = data.data.sk;
return [data.data];

或者

return [{
  "value": data.data.sk
}]

上麵這兩種寫法，均可以達到同樣的效果。

注意點：（敲黑板）

「數據過濾器」中限製了全局變量的訪問，目前僅支持 Date, String, Array, Math, Object, RegExp, Boolean, parseInt, parseFloat, JSON。

當我們將過濾器的場景標準化之後，就可以建立多個通用的過濾器，通過多個疊加方式，變成數據該有的樣子。

比如我要實現一個隨機數效果，並且所有數據放大100倍。

原始數據為

[
  {
    "name": "",
    "value": 232425,
    "y": 0.891111
  }
]

我先新建一個名稱為隨機數的過濾器

data[0].value = Math.random(0, 1) * 100;
return data;

再新建一個名稱為*100的過濾器：

data.forEach(function(val,index){
  val.y=val.y * 100
})
;
return data;

添加完成之後的效果如下圖：

注意點：（敲黑板）

多個過濾器疊加時，數據流動方向為從左到右，即先經過隨機數處理之後的數據再傳到*100進行處理。

數據過濾器的功能就先介紹到這裏了，下期再見

最後更新：2017-08-21 22:02:17