这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

1 前言

非常有幸能参加字节跳动青训营, 先跟负责联系的小姐姐说声对不起, 没有第一时间接起电话, 后续的沟通也麻烦了不少, 感谢一直有耐心的解答和帮助!

笔者其实是一名各项都不精通的全栈工程师, 任职于三线城市的小公司, 技术部领导正在努力实现传统外包团队的升级转型

徒有几年的开发经验, 但代码写的越多越觉得需要学习的东西无穷无尽, 以至于时长迷茫不知从何学起

还是非常感谢字节组织这种活动, 能让一个微不足道的程序员分享到大厂的经验

言归正传, 在培训的第一天, 聆听了月影大大的课程, 简直如雷贯耳

正好结合当下自己研究的东西, 来写一篇学习笔记, 文笔和内容可能都比较简朴, 望大佬们批评指正

2 各司其职

各司其职, 顾名思义, 就是每个人干自己职责内的事情

在月影大大的讲述中, 是从html/css/js等进行说明的, 三者有各自的分工, 理论上不应相互干预

基于现在很多小伙伴使用的是Vue/React, 拿Vue举例, 我们还会使用Elmentui/AntDesignVue等组件库

在看它们源码的时候会遇到不符合"各司其职"原则的情况, 例如AntDesignVue中的Button组件:

export default {
  name: 'AButton',
  data() {
    return {
      sizeMap: {
        large: 'lg',
        small: 'sm',
      },
      sLoading: !!this.loading,
      hasTwoCNChar: false,
    };
  },
  methods: {
    // 组件方法...
  },
  render() {
    // 渲染代码...
    return <Wave>{buttonNode}</Wave>;
  }
}

其中的组件方法methods和渲染函数render可以理解为在同一对象内, 那这个所谓的对象貌似没有各司其职?

各司其职是一种设计理念不是形式主义, 如果一个函数内部的逻辑为生成html或css代码, 那我们可以第一时间确认它存在的意义, 这个函数就是各司其职中的一员

与之相反的例子便是使用JQuery过程中的不严谨, 有JSP经验的小伙伴体会可能会更深, 数据的变化与dom元素的变化同时同地进行, 笔者认为这是极度危险的

肯定有人会说, 无论代码怎么写, 能运行能满足需求不就可以了吗?在外包公司中这种言论甚至会成为真理

但我希望各位小伙伴记住, 代码是写给人看的, 计算机或许会理解你, 但计算机永远不会给你发工资, 它甚至还得让你去打白条

今天的笔记就先写到这里, 下篇会针对方法相关和组件规范进行总结(开始写干货啦)