Liaoct / blog

在这里记录一些个人经验与思考
22 stars 2 forks source link

架构师应该手把手教吗? #22

Open ghost opened 5 years ago

ghost commented 5 years ago

今天发生了一件事,让我有深深的挫败感。

先说一下背景,我带了一个初级开发,女生,跟着我有10个月了吧。非本专业(测控还是啥专业,大学也学过C、汇编等编程,由UI转向前端开发),进项目组前有将近一年的开发经验。

进项目组时,由于时间紧,就没有系统的给她讲Vue基础(她之前接触过vue,所以我就放心的认为应该没问题,毕竟vue也比较简单),所以我只是介绍了主体架构,以及一些关键技术。

在开发之初,她就表现出了一些问题,比如弄不明白数据流,不知道数据从哪里来,又该传到哪里去(使用了Vuex);代码的逻辑性很差,代码不规范,没有一点复用或者封装概念;项目中有异步发起请求,然后把返回值作为prop传递给子组件这种情形,她不知道在子组件怎么监听这个异步返回的数据,等等问题。

这些问题,在开始我都认为这不是问题,经验不够,能够理解。因此,我一个点一个点,一段代码一段代码的带着她写。跟她讲原理,讲流程,讲规范,讲实现方法。她也会认真的听,还会做笔记。

但是,给她安排的任务,她基本不能独立完成。我一天有将近一半的时间,都是在她座位上,一个组件一个组件,一个方法一个方法的教她写。终于,她能够自己做一些简单的页面了。

总算可以上路了哈。

后来,我发现她暴露出的问题越来越多。有时候要对后端返回的数据进行处理,比如一些list的结构要进行转换,她不会;在发起请求之前,要对数据进行拼接,她不会;项目中使用了Promise,她不会;甚至,怎么使用回调,怎么封装参数,她都不会。

我意识到,是她的基础太差。好吧,讲基础。我给她专题讲了数组,讲了数组常见使用方法,比如mapfilterfind等等;专题讲了函数,比如函数的形式、参数、返回值、作用域、闭包,call和apply等等;再专题讲了异步处理和promise,讲了promise的一些常见用法和原理。

Vue基础也随着开发周期一并给她讲了。Vue的生命周期,rops与data.sync与v-modelcomputed与watchmixins等;Vuex的数据流以及它的辅助方法;Vue-router的用法;axios的用法;包括我在项目中封装的一些模块的实现,等等所有内容。

期间我们也沟通过一次(实际上我们很多时候下班都一起走的,这次是比较正式的沟通,具体几月份不记得了),她对我说,她很浮躁,自己什么都不会,感觉不适合做程序员。我鼓励她,“没事的,有我呢,我带着你做”,“总有一天你也会很厉害的”。

一些复杂的业务逻辑,或者一些复杂的页面,我都会帮她分析,怎么才能更好的拆分业务,怎么才能合理的划分组件,如何进行设计才能方便维护等等。

她也算学习态度比较端正,所有的东西都做了笔记。这也是我比较欣赏的点。

但是,在我把这些都讲过之后,情形并没有什么好转。需求稍微一变化,或者场景稍微变化,有些甚至一模一样的问题,她都不能自己完成;同样的用法,讲过好几次的东西,换个地方就不会写;出了问题,不知道怎么定位,不知道怎么解决。

她的脑袋是空白的。

我终于也开始变得毛躁,有一次我甚至发了脾气,你这写的什么玩意。估计我当时也火挺大的,她一个人偷偷的哭,还给我发消息说,她也想好好写,但是真的不知道怎么写。作为前端负责人,我找她谈了话,沟通了下我想要的结果,想要的状态,现在表现出来的问题,怎么解决,等等。当然,我不能放弃她,也少不了鼓励。

我分析,她是缺乏逻辑思维以及全局空间概念。作为非科班出身,本身就缺乏编程的基础思维,对于我们来说是常识性的问题,她可能就理解不了;然后缺乏逻辑思维,不够严谨,不能举一反三,也不能自己做总结;当然也不能对整个项目或者程序,建立起一个完整的空间概念,理解不了各部分是如何工作的,如何联系的。

因此,我主要从几个方面来改善这个问题。

一,完完整整的,从头开始讲一遍。先讲了前端的发展,为什么会出现vue,什么是mvvm,什么是单页面应用,vue是怎么启动的,怎么和页面互动的,什么是组件,组件怎么加载的,怎么把模板渲染到页面的,生命周期都做了哪些事,在生命周期的钩子函数中可以做哪些事,怎么解析子组件的,怎么响应路由的,如何请求后端数据,组件之间怎么传递数据。然后是项目中各部分模块的作用,这些模块是怎么协作的,一些关键模块是怎么实现的,等等。

二,基础不能丢。我给她安排了去学习红宝书基础,包括ES6promise基础;给她出了一些练习题;给她找了一些博客文章;然后根据情况进行了一些主题讲解。

三,也是最主要的部分,让她做归纳总结,并形成分享文档。因为,只有自己决定去写文档,并把自己的思维正确的书写出来,才是真正的理解了一个问题。

四,有意识的培养她独立解决问题的能力,对于一些常见问题或者曾经出现过的问题,拒绝直接回答,而是进行引导,让她自己去寻求方法解决问题。只有自己解决的问题,经验才是自己的。

五,建立职业信心。帮助她认识前端的整体形态,生态环境,技术发展;帮助她在工作中寻找自己的成就感,比如在同事、领导面前去分享她的文档,她的成果,甚至不止一次在领导面前表示她是我们的主要成员;让她承担一些较重要模块的开发,让她能在工作中接触更多的学习机会。

这期间,我还有感而发的写了另外一篇文章《如何对待那些有点“笨”的员工》。大致也是讲述了上面的提到的一些方法,这篇文章也让我平静了一些。

我给她讲解了现有项目的架构。怎么做路由分发的,路由结构是如何组织的,权限是如何处理的,数据状态是怎么处理的,请求是怎么处理的,拦截器是怎么用的,封装的Vuex是如何工作的;以及webpackbabelpostcsseslint等工具如何工作,怎么使用脚手架,怎么使用git仓库,前后端怎么分离开发,如何打包构建,如何进行部署等等。

另外,我还给她做了一些软实力的辅导。比如常见问题有哪些,怎么排查这类问题,怎么使用调试工具,到哪里去寻找答案,怎么有条理的清楚的描述自己的问题,在请教问题之前自己要做哪些工作;介绍了前端社区圈子,优秀的博客与文章,github的使用方法,程序员礼仪等等;介绍了技术文档的写作方法,结构规范,条理逻辑性,如何使用常用文档工具;之后也介绍了如何与后端进行沟通,怎么对待和处理需求,等等内容。

情况向着好的方向发展,她已经能够独立的完成一些功能的开发。这期间她也给我使过几次性子,可能是我太恨铁不成钢了吧,但我是把工作和生活分的分开的人,所以这些问题都很快的解决了。后来,在教师节那天,她专门给我发消息,感谢我的指导,称我是人生中重要的老师,总能在她不同的阶段,教给她不同的知识和技能。

总体来说,她是一个好员工,我经常看到她在加班,会主动的来问问题,也会自己去看官方文档,也会自己去做总结,写文档。她人缘很好,刚来公司没多久,到处都是她的伙伴,跟同事关系非常好。她自己也在做微商,偶尔会被我碰到在刷微信,但是这个都无关紧要。项目接近尾声,我们已经修改了一段时间的BUG,因此也就有了更多的时间可以自己来安排。

今天,她修改BUG遇到一个问题,关于组件之间怎么传递数据的问题。有如下的组件结构,其中D是一个表单组件,其中包括表单的字段验证等内容。C是个弹窗,在点击确定时,根据D的输入值做一些逻辑操作,然后关闭弹窗。在关闭弹窗后,B组件接下来的一些逻辑,也会使用到这个输入值。

她一开始的做法是,在A组件通过props传递一个空值,然后通过.sync来层层取得变化后的值。其实,这种方式也能实现功能,但是容易出现循环。

// A.vue
<A>
  <B></B>
  <C></C>
</A>

// C.vue
<C>
  <D></D>
</C>

这里的关键点有两个:1. D实际上不需要C传递进来的默认值,只有C在事件触发时,获得D的输入值即可;2. 可以通过A做中转,把值从C传递到B,A与C可以是.sync双向的,但A与B是单向的,不需要.sync

给她画了一个类似上面的一个图示,然后分析了上面的关键点,告诉她在C与D之间,可以通过事件机制拿到数据,或者主动调用D的方法拿到数据。

“C与D之间,不需要`.sync`,直接使用事件机制获取数据,或者调用它的方法拿到数据”
“我只知道`.sync`和`$emit`可以传递数据,不知道啥是事件机制”
“`$eimt`不就是事件机制吗”
“`$eimt`不是更新`.sync`的值的吗?”
“...”“我记得我给你讲过吧,`.sync`只是一个语法糖,它也是基于事件机制的”
“...”
“你这个地方只需要监听一个的自定义事件就行”
“...”(一脸懵比)

然后,我隐隐感到自己要暴走了,我曾经至少讲过两遍.sync的实现原理了,而且也专门总结过props与事件机制父子组件通信的方法,项目中也有很多处用到这这种方式。

我给她找了官方文档,给她重新解释了一边自定义事件以及.sync的实现原理。实际上,她告诉我,她自己也看过很多次这段内容。

然后,我看着她,一个步骤一个步骤的终于纠正正确了。

“另外,`v-model`与`.sync`的实现方式基本一样,只不过绑定的属性是`value`,抛出的事件是`input`”
“...”又一脸懵比

我想静静。

“现在,你试试直接调用它的方法,通过方法返回数据吧。”
“怎么调用啊?”

这次,我真的快要发飙了。整整十个月,已经写了四十几个Vue页面,自己看文档也不下三遍,项目中到处都是类似的例子代码,我讲了至少不下三遍。但是,她完全没有一点概念,完全没有自己的一点理解,甚至完全没有一点印象。

我感受到深深的挫败感,整整十个月,她连Vue基础都没弄懂。

我像一个妈妈一样,手把手的教,最后她仍然跟我的预期相差甚远。

这让我再一次回想起之前的出现过的几次情况。有一次出现一个问题,弹窗在点击确定时,会发起几个请求,当请求成功之后,需要做一些业务处理,还需要弹出一个消息提示,提示的文字内容通过国际化加载,因此要调用this.$t。控制台信息在报错$t找不到,她自己排查了很久都解决不了这个问题,然后来问我。

她跑过来给我说,“你这个$t有问题”。

因为我之前,给她讲过国际化的使用方式。比如:

// test.vue
import i18n from  "./i18n";

export default {
    name: 'test',
    props: {
        name: {
            type: String,
            default: i18n.t("") // 当实例还没开始初始化时,直接使用`t`方法
        }
    },
    data() {
        return {
            label: this.$t() // 实例已经初始化之后,使用`this.$t`
        };
    }
};

当这里出现$t找不到之后,她就一直在尝试直接使用t方法,然后怎么弄都不对。实际上,我曾经给她讲过两次这个问题,第一次是介绍使用国际化方案时,介绍了直接使用t方法和使用this.$t的区别;第二次跟这个很相似,也是找不到$t,因为this不存在,但是出现的位置是在props。并且还有一次,因为弹窗被关闭,导致this找不到,从而出现过一次BUG。

但是,她只记得要么使用t,要么使用this.$t。因此,她就一直在纠结,最后跑过来给我说:“你这个$tt方法都不好使”。呵,什么叫我的东西不好使,明明是自己没有去理解,从一开始解决问题的方向就出现了问题。

最后,我在她笔记本上找到了她之前记的笔记,就是我曾经给她讲国际化方案使用场景时的笔记。但是,她完全没有印象,她不知道这两种方式的使用区别,只知道要么使用t,要么使用this.$t,当然也就考虑不到this的问题。

还有很多次例子,这里不一一列举,综合起来其实就是,缺乏钻研精神

她只限于我给她讲过的东西,然后只限于当时理解和记住的东西,最后就只限于许久之后还有模糊印象的东西。她不会自己去钻研,不会自己去理解,不会自己去尝试。记笔记只是一个态度,但是没起实际效果;看文档,看博客,有没有理解懂不懂都不重要,重要的是看过

拿上面的国际化那个举例,作为一个有钻研精神的人,在我讲过用法之后,他下来之后会干什么事:首先去搜索一下i18n这个库,看看它的官方文档,看看这个库是做什么用的,它提供了哪些功能,有哪些Api,我们应该怎么使用,然后我们自己项目中是怎么去包装使用的,它与element-ui是如何配合使用的,为什么能使用this.$t,那么t方法又是干什么用的,讲过的例子自己也会去尝试敲一遍,最后再形成自己的理解。

但是,这些她都没有做过。导致,进项目组10个月,她还没有完全理清楚项目的结构,不知道发起一个请求要经过哪些步骤,不知道我们的页面与平台项目的关系,不知道项目是怎么部署的;甚至不知道vue-router有哪些守卫钩子函数,他们分别在什么时候执行,不知道权限怎么控制的,不知道菜单与导航是怎么操作的,等等等等。更别说,webpack要怎么使用,babel是干什么用的,postcss使用到了哪些插件,怎么发布和更新一个npm包。

一个有钻研精神的人,应该是什么样的状态:看到一句自己没见过的代码,我要去把它弄懂;看到使用了一个新工具,我去把它弄懂;看到引用了一个依赖库,我去把它弄懂。总体来说,要做到每一段代码,每一个流程都要心中有数。

有人会说,你应该教她方法,而不是教她死知识。我想说两点,第一,我们是成年人,这是在工作,不是在学校,工作要求的是效率,要求的是结果,要求的是质量,学校才会给你时间,慢慢的去培养习惯;第二,我真的是在教她方法,我平时给她讲问题,都是用笔在纸上,给她举例,列重点,教她怎么整理自己的思维,教她怎么把自己的思维用图、用流程来转化,教她怎么一步步的搜索排查问题,教她怎么学习、到哪里去学习,怎么才能把东西转化为自己的,怎么才能快速提高自己。

人各有异,我带的另外一个应届实习生,我只带了三个月,而且我很少管他,基本都是他自己根据我安排的去学习,他三个月时间就表现非常优秀。因为,他会思考,他会质疑。比如他曾经就问过我几个问题,“为什么我们项目的CSS不用一个单独的文件和文件夹进行管理,然后有些页面里面的样式基本一样,为什么不直接复用呢”,“通过一个props传一个对象,然后在子组件用props来初始化一个data变量,为什么要进行一次深拷贝呢”,诸如此类问题。

但是,这些问题她从来没有想过。

一份好奇,一份探索,会影响一个人最终的成就。

本文没有结尾,需要结尾的童鞋,请自己总结。