实习小记

年初至今，实习了2.5个月，留下一些文字，review一下这段宝贵的经历。

教训

1. “熟悉项目”是干什么？

从结果上讲，基础要了解项目技术栈，src下各目录放的东西和页面的对应关系，尝试扩展页面，尝试理解业务代码；合格上要熟悉项目各种交互、数据传递方式，探究陌生写法的代码。从过程上讲，要由宏观到微观，先充分熟悉交互、目录、业务代码，再关注数据传递、共用代码，最后构建方式、部署流程。熟悉的过程要按部就班、不要在不合适的时候被『迷人的细节』吸引。

2. 写可读的代码

之前拜读过Clean Code，知道命名、写必要的注释、拆分模块、层级不过深。“纸上得来终觉浅”，还写不出好代码。命名上，需要大家都明白的名字，词典搜索的也不要用长的生僻的。命名除了达意还要简短。（还是要多看公共库的代码，以场景扩充词汇。）缩进、空格、代码格式要遵守规范、贴合前人代码。自己实现组件/主题样式之前先看是否有写好的，场景可以复用不。也忌刻意抽公共状态，尺度以读起来不需要理解成本为宜，通俗说不需要笔者额外交代一句话。

3. 不要想当然，实践说话

工作中会问求助于前辈“XXX可以吗”，或者在抉择两个方案的时候，发现其一不能满足需求，看两个实现的方式是趋同的就觉得另一个不行。一定要自己试，感觉是会糊弄人的，求助于人别人也要试，起码带着试过的“半成品”请教，会有一个良性的沟通。而且自己尝试会形成深刻的印象，试错并总结才能成长。

挑战

1. 从0入手新技术的体验

计划了一周时间入门WebAssembly。跟着官网教程搭环境、写helloworld，看一些有内容的文字，并在实践中沉淀自己的文字。过程中收获最大的是“泡脑子”的过程，就是发现问题、查找解决方案、试错、记录，也给了我信心。但是还没有测试的方案，只能根据已有的测试自己验证，需要对熟悉的事物了解深入吧，这样才能评估新事物。

2. 升级老sdk项目的打包

把webpack3实现的本地开发、整体打包、公共库打包、sdk打包用webpack4实现，我开始是把配置直接搬过来然后fix不兼容的地方，大版本改动过多，我对webpack也不够熟悉，没有走通。（容易想到的方法，不会也容易做到）。用VueCli配置上简化了不少，但是Cli对公共库、多入口的打包难以实现。最后还是在师父的Cli和webpack4兼用的环境下，我调出了sdk产出和本地测试。webpack的配置还要多用多记。

3. 迁移树组件

将react下的异步加载树组件用vue实现。无独有偶，我又是先实践了朴素的想法。react和vue有相通的生命周期、render函数、JSX，在语法上更改应该能实现。弊端就是会容易陷入原有逻辑中，对比上下文，对整个组件会不够熟悉。后来转了template实现、拆分了组件，也在API上用vue组件的形式。就迁移组件说，应该在新的场景下从0实现功能，这样对组件会更熟悉，语法迁移让我花费了更多时间。就设计组件说，首先要区分slot 事件 props，然后要起一个简短的名字，最后组件的API在理念上要一致。（如果是数据驱动的模型，暴露钩子用户读写数据；如果是从使用快捷出发，定制模式，在组件内更改数据。）多看公共库，设计出与社区体验一致的组件。

4. 技术分享

将初步实现的树组件和组内同学分享，收集大家的看法和建议。第一次准备分享很怕紧张，遗漏自己想表达的东西。我的办法是预先写稿子，然后熟悉，因为如实的分主次的传达准备的内容比较重要。分享的时候比自己预想的要轻松，大家的讨论给我开了很多脑洞，带我很快投入到内容本身。我对组件设计上的一些感悟也多源于此。

经验

1. 单页应用路由跳转至有权限页面

维护权限路由集合，入口组件内控制跳往第一个有权限页面，各级入口都如此（包含在router-view内的可以用路由钩子），防止跳入无权限页面。注意刷新、手写路径特殊情况。

2. 加水印

MutationObserver提供监听dom修改的能力（用于防止用户覆盖水印），从页面到各个模块，有数据的地方都需要加水印。用less的取色值函数可以实现十六进制稀释为透明度可控的白底同效果透明色（JS实现也可以）。

3. 拖拽排序

需要拖影和预览占位样式不一致，分别尝试了vuedragging和vuedraggable，vuedraggable有对应的接口。vuedragging体验上是注册全局命令，比较易用，vuedraggable是组件形式，功能更丰富。

感悟

公司技术氛围挺浓厚的，我第一次听分享会全程目瞪口呆，也使我想提升自己的专业性。在沟通的过程中，我说起“觉得”和“应该（may）”会有羞耻感和无奈，需要弄明白的还有很多。做需求的时候会因为想法过于简单而出问题，要是有方法就好了，需要总结和定期review沉淀出方法。

有师父带着工作的机会是珍贵的，多暴露自己的问题，多关注“为什么”。