在先后端分离的开发环境下,先后端并行开始时势必会产生双方定义字段彻底不统一的问题。
比较规范的公司会在代码开发前先进行先后端详细设计文档的编写和评审,可是一方面实行此流程的公司很少又繁琐,一方面后端也不保证写好文档后在后续的开发中就必定再也不更改字段名。
在笔者的开发过程当中此问题尤其突出:前端
1. 编写文档耗时耗力,且不为开发重视,敷衍了事 2. 开发周期实在过短,测试的时间都被优化掉何谈文档 3. 文档评审完毕入库以后,在实际开发中后台仍会根据需求更换字段 4. 接口繁多,字段量着实巨大
笔者大多时候只能在后台接口开发完毕后,手动去对应后台字段与前端变量的映射,可是问题明显,一个是数据量大,一个是后台修改以后若是不通知前端,则前端逻辑将没法运行得出正确结果。webpack
目前支持简单的单变量映射、对象字段映射、数组字段映射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"
先发布未打包的源码吧后端