前端排坑指南(一)

前端排坑指南(一)

前后端-数据转接：

问题描述：

​ 现在开发模式 主要为前后端分离。前端开发的痛点，就是页面画完后，调试接口，发现接口数据里的字段和自己写的不一样。

• 后端不愿意逆向开发，先写接口定义，在写接口实现。
• 没有提前出接口文档，接口字段不明确，后期改动巨大。
• 前端只能等后端接口完成后开发，或着，代码大改。
• 就是前端使用mockJs，但字段还是不一样，还是需要大改。

问题解决：

• 本方案也只能尽可能的规避问题，减少前端开发工作者的负担
• 方案思路是参考 TypeScript的menu类型，结构赋值
• 原理：将获取到的数据进行简单处理，然后结构赋值
• 单次使用不建议，解决的痛点为 出现大面积 数据转换
• 只能处理对象，不能直接处理数组集合，数组集合 子元素 太复杂
• 不要以此提高效率后 内卷
• 拒绝内卷！拒绝内卷！拒绝内卷！！！

参考代码：

const _ = require("lodash");

/**
 * 对象按需枚举
 *
 * @param { Object } data // 需要枚举的数据对象
 * @param { Object } menu // 按需提取的控制对象
 * @param { function } callback // 值处理函数
 * @return { Object } // 返回枚举后的对象
*/

function menuNeedObj (data, menu = {}, callback) {
  let obj = {}
  // 按需枚举值
  _.forIn(menu, function(value, key) {
    let dataV = _.get(data, value)
    if (_.isFunction(callback)) dataV = callback(dataV)
    _.set(obj, key, dataV)
  })
  return obj
}

// 使用案例一：
function fn1() {
    // 枚举数据
    const obj = { name: 'admin', pass: '123456', des: { age: "12" } }

    // 枚举操作对象
    // 枚举操作对象建议加Object.freeze保护起来
    const menu = { username: 'name', password: 'pass', age: "des.age" }

    const needObj = menuNeedObj(obj, menu)
}


// 使用案例二：
function fn2() {
    const data = [
        { id: '1', name: 'a', type: '1' },
        { id: '2', name: 'b', type: '2' },
    ]
    const menu = {
        id: 'id',
        label: 'name',
        value: 'type'
    }
    
  	const needObj = data.map((item) => {
    	 return menuNeedObj(item, menu)
  	})
}