前端解决业务的一点点方法!!!

ChenXi
2,766 阅读6分钟

「时光不负，创作不停，本文正在参加2021年终总结征文大赛」

QQ20211207-102059@2x.png

有这么一个功能 需要点击切换 然后展示不一样的功能组件,如果是你 你会怎么做?

可以先看一下我接手的代码 请忍住不要笑!!!

业务代码.png

好家伙,给我整蒙了,还能这样玩????不多废话,直接给我的解决方法,如果有更好的请联系我!!!

  1. Vue2 jsx
export default {
  name: "juejin",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  render(h) {
    return (
      //这里就是识别一个组件命  然后把attrs全部都当做参数传给组件  然后业务组件遵循一个内部处理 内部消化的原则
      //事件啥的最好都是业务组件内部处理,父组件只负责传值 这个是比较好的状态
      <div class="juejin">{(h(this.value), { props: { ...this.$attrs } })}</div>
    );
  },
};

2.Vue2 vue

 我上面的jsx其实实现的也是这个功能 这个是vue的内置组件 可以看看官方文档就好

image.png

3.vue3 jsx or tsx

import { defineComponent, resolveComponent, h } from "vue";
import { Vue } from "vue-class-component";
interface Itest extends Vue {
  func1: void;
}
const test = defineComponent({
  name: "Test",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  setup(pros,con) {
    return () => {
        //resolveComponent这个方法是用来寻找组件 你传入一个名字他会帮你寻找一个已经注册的组件
        //然后vue3 没有this 所以从上下文里面拿到attrs
        //js的话直接拿去赋值 别复制类型就行 其他是一样的
       h(resolveComponent(pros.value), { ...con.attrs });
    };
  },
});
export default test;

如果针对这个情况在看的各位还有更好的方法,请留言告诉我,谢谢!!!共同学习 共同成长

下面来看一下利用对象或map做转发

export default {
  name: "juejin",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  methods: {
    //组件a
    renderA() {
      return <div>我是组件A</div>;
    },
    //组件a
    renderB() {
      return <div>我是组件B</div>;
    },
    //组件a
    renderC() {
      return <div>我是组件C</div>;
    },
    //通过对象来分发
    isRenderComponents(key) {
      const componentsObj = {
        a: this.renderA,
        b: this.renderB,
        c: this.renderC,
      };
      if (componentsObj[key]) {
        //这样去执行就好
        return componentsObj[key]();
      }
      //如果你需要默认展示的组件
      return this.renderA();
    },
  },
  render() {
    const juejinArr = [
      {
        key: "a",
      },
      {
        key: "b",
      },
      {
        key: "c",
      },
      {
        key: "d", //a
      },
      {
        key: "e", //a
      },
      {
        key: "f", //a
      },
    ];
    return (
      <div class="juejin">
      //这个就利用的对象的key->value 结构来做映射 用map也是一样 
        {juejinArr.map((i) => {
          return this.isRenderComponents(i.key);
        })}
      </div>
    );
  },
};

image.png

//用一个业务系统的同一个页面 这个页面恐怖的到了5200行(加上css)
//但凡你在if里面写出了return我也不说啥...  
//解决方案
 const currentServiceNameObj = {
     a:"1",
     b:"2",
     c:"3",
     d:"4",
     e:"5",
     f:"6",
     g:"7",
     h:"8",
     i:"9",
 }
 //严谨的小伙伴可以在else里面写出一个提示
  if (currentServiceNameObj[this.currentService.name]) {
        params.serviceId = currentServiceNameObj[this.currentService.name]
      }

同理可证 如果你有一个特别复杂的页面 你可以通过多个组件来拼接 然后通过对象来进行转发(利用jsx)

下面来看下面这种情况---如果利用函数这个一等公民来简化业务

//这个是我从template标签里面抽出来的 已经做了优化了
  /**
   * v-if="item.trackStatus === 1 
   && (item.Code === 'CHECK_END' 
   || item.Code === 'GROUP_REVIEW' 
   || item.Code === 'PROJECT_REVIEW' 
   || item.Code === 'CHECK_MODIFY' 
   || item.Code === 'PRE_CHECK' 
   || item.Code === 'PRE_CHECK2' 
   || item.Code === 'PRE_CHECK3' 
   || item.Code === 'CHECK' 
   || item.Code === 'CHECK2' 
   || item.Code === 'CHECK3' 
   || item.Code === 'CHECK_1' 
   || item.Code === 'ENGINE_CHECK1' 
   || item.Code === 'ENGINE_CHECK2' 
   || item.Code === 'ENGINE_CHECK3' 
   || item.Code === 'ENGINE_CHECK4' 
   || item.Code === 'ENGINE_CHECK5' 
   || item.Code === 'ENGINE_CHECK_1' 
   || item.Code === 'SAFE_CHECK'
*/
//本来我是不知道这里的,直到有一天测试小姐姐和我说 新增了几条数据,但是之前的都是好的,新增的全部用不了,
//让我看看 我就看到了这里 真的 当时血压一下就起来,吃了五片降压药才缓过来,目前这个地方就是 只要超过5就炸
//项目里面有几十个地方全部用的这个,给你们看看修改之后的样子 如果有更好的条件请联系我
function setBtnShowStatus (nodeCode) {
      if (nodeCode) {
        const nodeCodeArr = [
          'CHECK_END',
          'GROUP_REVIEW', 
          'PROJECT_REVIEW',
          'CHECK_MODIFY',
          'CONFIRM',
          'SAFE_CHECK']
        const engineStatus = nodeCode.includes('ENGINE_CHECK')
        const nodeCodeStatus = nodeCodeArr.includes(nodeCode)
        const preStatus = nodeCode.includes('PRE_CHECK')
        const checkStatus = nodeCode.includes('CHECK')
        if (engineStatus || nodeCodeStatus || preStatus || checkStatus) {
          return true
        } else {
          return false
        }
      }
      return false
    }
//修改完成后 只需要调用这个方法就可以 举例:<div v-if=setBtnShowStatus('CHECK_END')>1</div> 
//大概就是这样 只需要把这里改了 这些个一样的地方就全部生效 也不需要到处找,也不至于页面全是1000,2000行
//接手到这种代码,我的内心是拒绝的.

总结

不想把有限的职业生涯浪费在无尽的业务中,需要不断的去学习和反思自己的工作内容和善于记笔记(我用的语雀网页版).一点点个人心得.

1.学习源码要学习思想,有哪些是写的很好的方法,可以借鉴的,关联到自己的工作,技术是为人服务的!

2.多记笔记,你的大脑再厉害,总会有忘记的时候,不如记下来,然后遇到问题,感觉解决过就去翻一下笔记.

3.放松自己的头脑,不要给自己太多的压力,人只要活着总会遇到好事.

4.多学习,有目的的学习,然后一定一定一定要实践,要把你学到的东西在工作上用起来,哪怕就你一个人,你也要用,这样才能不断的巩固加深,报错就去解决就好了. 解决报错也是学习进步的一个很好的方法.

5.每天都会写很多业务,尝试用不同的方法去解决问题,不懂就看mdn,不懂就去搜索一下,解决完了回头在看看能不能继续写的更好,静下心来不断的去优化自己写的内容,多要求自己一些.

6.做好技术积累,人家干的又好又快可能只是人家写的多,技术积累的够(我自己会把自己写过的组件都放在一个文件夹里面,然后上传到git,不断去更新,不断去优化,周六日想起来也会继续去优化.),你存个两年,你就发现,大部分的功能你都已经实现过了,剩下就不断的优化过程.

7.开发时间多要几天,鬼知道有啥疑难杂症等着你,多一些时间也可以多一些思考的时间,人的精力是有限的,除了工作还有大好的世界等着你看呢!!

8.学一段时间(学的时候一定要记笔记,存笔记,别光靠脑子),玩一段时间,天天学,天天加班,人容易丧失生气,对啥都提不起劲儿,这个状态是很差的,要好好调节.

9.健身,锻炼身体,有时候说话不一定好使,该揍就揍,该骂就骂,如果身体不好可能会被反杀,得不偿失!!!

10.工作只是你生活的一部分,不是全部,老板也是人,正常对待就好.讲个笑话:我没有工作了,但是老板多的是.

如果你有啥别的问题,请留言告诉我,我们一起学习

avatar
文章
阅读
粉丝