JS簡碼轉換

Jason(楊)發表於2017-07-11

  APP開發中免不了與伺服器互動,而有些專案為了節省流量等原因,會要求不用全碼而用簡碼(比如使用者id不用uid,而用a)來互動。可這樣的欄位名稱不易懂,不利於開發。在原生iOS中我們有第三方的YYModel可以輕鬆實現全碼與簡碼的轉換,但像RN等是使用JS來寫的,似乎還沒有類似的工具。於是我自己寫了一個簡易的轉換工具。
  老規矩,不Bibi,直接上程式碼:

/**初始化專用返回物件簡->全碼對映表*/
const loginResp = {
    'a': 'update',
    'b': 'user',
    'c': 'readInfo'
};

const user = {
    'a': 'uid',
    'b': 'userName'
};

const readInfo = {
    'a': 'time',
    'b': 'readers'
};

const readers = {
    'a': 'readerId',
    'b': 'readerName',
    'c': 'status'
};

/**專用返回物件對映表*/
const respMap = {
    'loginResp': loginResp,
    'user': user,
    'readInfo': readInfo,
    'readers': readers
};

/**
 * 簡碼轉全碼
 * 
 * 引數說明:
 *  > resp 專用返回物件名稱
 *  > json 返回的json
 * 返回說明:
 *  若欄位在對映表中,則轉為全碼;
 *  若欄位不在對映表中,則原樣返回;
 *  資料結構與值不變
 */
export function changeToFull(resp, json) {
  if (respMap.hasOwnProperty(resp)) {
    let full = {};
    let keyMap = respMap[resp];

    for(var key in json){
      let fullKey = keyMap.hasOwnProperty(key) ? keyMap[key] : key;
      //在我們的專案中是Object需要轉換的比陣列要多得多,所以作為if的第一判斷
      if (json[key] instanceof Object && !(json[key] instanceof Array)) { 
          //如果是Object則遞迴呼叫
        full[fullKey] = changeToFull(fullKey, json[key]);
      } else if (json[key] instanceof Array && json[key].length > 0 && json[key][0] instanceof Object && respMap.hasOwnProperty(fullKey)) {
        let tempArray = json[key];
        let tempFullArray = [];
        for (var i = 0; i < tempArray.length; i++) {
          let tempObj = changeToFull(fullKey, tempArray[i]);
          tempFullArray.push(tempObj);
        };
        full[fullKey] = tempFullArray;
      } else {
        full[fullKey] = json[key];
      };
    }
    return full;
  } else{ //對映表中沒有,原樣返回
    return json;
  };

}

  這時候,您可能一臉懵逼——最開始那幾個奇怪的常量是幹嘛的?其實就是一些返回物件的簡->全碼對應關係,具體如下表: enter image description here
  而respMap則是專用返回物件對映表,我們需要去維護這個對映表,下面的方法changeToFull(resp, json)才能正常使用。
  通常伺服器返回的內容,無非就是普通資料型別、物件型別與陣列三種,上面方法的三個分支也正是針對這三種型別做處理。為了驗證該方法對複雜資料結構同樣適用,我們模擬一個多種資料型別相互巢狀的返回物件,具體如下:

  "loginResp": {
    "a": false,
    "b":{
      "a": 9527,
      "b": "大聖遛碼",
    },
    "c":[{
      "a": "2017-07-07",
      "b":[{
        "a": 666,
        "b": "reader1",
        "c": 0
      }]
    },{
      "a": "2017-07-08",
      "b":[{
        "a": 666,
        "b": "reader1",
        "c": 1
      },{
        "a": 888,
        "b": "reader2",
        "c": 1 
      }]
    }],
  }

  這樣的資料結構夠複雜了吧~陣列字典各種巢狀,並且是用簡碼返回,非常不利於開發理解,於是我們把資料丟到我們的方法裡,拿到返回物件再來看看:

{
  "update": false,
  "user":{
    "uid": 9527,
    "userName": "大聖遛碼",
  },
  "readInfo":[{
    "time": "2017-07-07",
    "readers":[{
      "readerId": 666,
      "readerName": "reader1",
      "status": 0
    }]
  },{
    "time": "2017-07-08",
    "readers":[{
      "readerId": 666,
      "readerName": "reader1",
      "status": 1
    },{
      "readerId": 888,
      "readerName": "reader2",
      "status": 1 
    }]
  }],

}

  這樣來看就非常清晰明瞭了~
  (全碼轉簡碼也是類似的,就留給讀者朋友們自行發揮啦~)

相關文章