wl-mapper:一個js對象映射類,嘗試解決先後端分離大量字段名不對應問題

wl-mapper

在先後端分離的開發環境下,先後端並行開始時勢必會產生雙方定義字段徹底不統一的問題。
比較規範的公司會在代碼開發前先進行先後端詳細設計文檔的編寫和評審,可是一方面實行此流程的公司很少又繁瑣,一方面後端也不保證寫好文檔後在後續的開發中就必定再也不更改字段名。
在筆者的開發過程當中此問題尤其突出:前端

1. 編寫文檔耗時耗力,且不爲開發重視,敷衍了事   
2. 開發週期實在過短,測試的時間都被優化掉何談文檔   
3. 文檔評審完畢入庫以後,在實際開發中後臺仍會根據需求更換字段     
4. 接口繁多,字段量着實巨大

筆者大多時候只能在後臺接口開發完畢後,手動去對應後臺字段與前端變量的映射,可是問題明顯,一個是數據量大,一個是後臺修改以後若是不通知前端,則前端邏輯將沒法運行得出正確結果。webpack

wl-mapper是一個js映射類,即嘗試解決先後臺接口大量字段的對應關係

目前支持簡單的單變量映射、對象字段映射、數組字段映射web

1. 簡單映射   
    映射對象中的一個字段    
2.  對象字段映射    
    映射對象中傳入的指定字段集    
3. 數組字段映射       
    數組的狀況大可能是獲取列表時,此時前端一般使用空數組接收所以沒法創建常規意義上的映射,所以是對返回數據進行處理而後造成新的數組內容    
注意:函數並不返回某個處理後的數據而是返回當前類

文檔

constructor(src, source, merge_keys, is_arr) 實例化時接收四個參數,分別是:
1. src: Object 前端聲明的變量對象  
2. source: [Object, Array] 後臺返回的實體  
3. merge_keys: Array 指定將source中的key直接複製到src對象,來映射前端不太會提早聲明的各類數據庫ids  
4. is_arr: Boolean 表示source是否爲數組
mapper(src_key, source_key)
1. src_key: String 要創建映射關係的對象數據key    
2. src_key: String 要創建映射關係的源數據key
objMapper(mapper, deep, deep_src, deep_source)
1. mapper: Object 映射關係對象,其中單個成員的key爲src的key,value爲source的key   
2. deep: Boolean 是否遞歸處理,如爲真,則將屬性值爲對象或數組的元素根據src_key、source_key再映射一遍  
3. deep_src: Object 遞歸時,下一輪對象數據    
4. deep_source: Object 遞歸時,下一輪源數據
arrMapper(mapper, deep_src)
1. mapper: Object 映射關係對象,其中單個成員的key爲src的key,value爲source的key  
2. deep_src: Object 遞歸時,下一輪對象數據    
3. deep_source: Object 遞歸時,下一輪源數據
merge(keys, deep_src, deep_source)
1. keys: Array 指定將source中的key直接複製到src對象,來映射前端不太會提早聲明的各類數據庫ids   
2. deep_src: Object 遞歸時,下一輪對象數據    
3. deep_source: Object 遞歸時,下一輪源數據

簡單的小例子

// 操做一下試試
  import WlMapper from "wl-mapper";

  let aa = { x: { h: 8 }, y: 1 };
  let bb = { y: { e: 12, ff: "0001" }, f: 4, id: "0000" };

  let mapper1 = new WlMapper(aa, bb, ["id"]);
  let mapper2 = new WlMapper(aa, bb, ["id"]);
  let mapper3 = new WlMapper(aa, bb);

  // 簡單映射,單個字段
  console.log(mapper1.mapper("x", "y"));

  // 複雜映射,多個字段,可遞歸
  console.log(mapper2.objMapper({ x: "y", y: "f", h: "e" }, true));

  // 調用指定字段的映射後,合併其餘字段
  console.log(
    mapper3.objMapper({ x: "y", y: "f", h: "e" }, true).merge(["id"])
  );

小坑

webpack打包後的類調用報錯,啊!可惡的面向百度webpack工程師數據庫

wl_mapper__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor"

先發布未打包的源碼吧後端

相關文章
相關標籤/搜索