我是一名研究生，目前刚研二。研一的时候，课题组有一个网站项目，我负责前端部分。项目中需要用到富文本编辑器，于是我找到了wangEditor的群，最后很方便的引入了wangEditor。
在此过程中，以及另外在我的网站的其他部分，群里的成员都给了我很大的帮助。所以虽然项目做完了，但是我一直没有退群，就想着以后我学前端过程中要是遇到了问题，我可以和大家交流。
今年6月份吧，决定毕业以后还是要吃前端开发这碗饭。但是在家时候嘛，玩的太多，前端课程这里一直没有开始看。偶然间，看见老大在群里发招募新版本的开发组成员。我瞬间心动了，一来这是一个宝贵的项目经验，我可以了解很多团队开发的细节；二来这段经历对找实习找工作都很有用。所以，就是没有理由拒绝吧。只要不嫌我菜就行哈哈哈。
然后联系了老大。给我出了一个考核题，然后考核题做完之后问了几个问题，有一半我都没答上来吧。确实挺菜的，毕竟首先不是很懂typescript嘛，所以刚开始看到一堆ts文件，还有类似Java的类，继承，我还是很懵的。类，继承的原理我是都懂的，但是缺使用经验。
但是老大还是让我进组了，我很感谢他。
但是我做的不好，刚开始的一个半月，进度是缓慢的。
说下进组后基本要做什么事吧
首先要看文档，包括项目代码结构，开发规范等。文档我好像看了一周。
然后里面对我来说的难点有：
- git流程。从git clone 然后拉分支，开发，到git push。我没用过git,都不懂。
- pretitter和es-lint。我一开始以为这俩是文档类型的规范，就像开发手册一样，写代码要按照这个来，然后我就被吓到了，感觉要学很多，心里怕了。（其实我现在都不懂，插件帮我做了。）
- jsdoc。注释规范，仔细了解了下发现内容挺多的，以为要学很多，心里怕了。
- 其实平常用的不太多，完全可以看项目里别人写的注释，找到常用的，记住就行。
- pr。因为老大一直强调，很重要很重要很重要。于是我又怕了，以为是很难学的东西。
现在回看当时，我的感想：
- git流程。是必须要实践的。然而其他不懂的，我应该是要先了解，再判断，不应该直接觉得很难。了解之后可能就发现有的很简单，有的目前不用学。没必要害怕。
- 然后看语雀的团队纪律，看组员分享的经验，注意teambetion的操作。这些我看的还是比较快的，就是组员经验那里有点没看懂。主要因为一开始不明白项目架构，后来明白了，我就懂了很多。
- 总结：先了解，再判断，再行动。
然后是第一个任务，校验链接/网络图片
首先要说下我当时的状态，因为要干课题组里的活，无法投入大量的时间做开发组的工作，所以前两周每周只工作4小时。就很慢。
这个任务分为4个步骤
-
需求文档
-
要站在产品经理的角度写需求文档。基本写法是，当用户做出xx操作，将会获得yy反馈，这样子。（当然我一开始也不知道这么写，算是现在才总结出来的吧）
-
需求，顾名思义就是用户需求，人的需求。这里存在一个二八原则,就是80%的用户只会产生20%的需求。我刚开始考虑需求就考虑的太多，想要全面的覆盖，但是按照我那样开发的话成本太高，那不是好的需求。
-
所以说，第一版的代码。满足这80%的用户就行。比如我做一个编辑器的“待办”功能，我们都知道正常人的需求就那么点。但是我总担心有人要在诸如标题，列表，图片，代码这些域内插入待办。我考虑的不是要满足这样“奇怪”的癖好。我是想要确保这些人这样操作的时候，编辑器不出bug。这样考虑就会比较繁琐，至少代码量会比较多。
-
其实最简单的思路就是，回归到用户需求，想想，几乎没人会想这么操作，所以直接屏蔽这些域内的待办插入就好了。
-
或者另一种思路是，我记下来测试的时候要测试这些域，写的时候不要考虑，总之要学会尽快先构建一个产品。
-
技术文档
-
先要了解项目的整体架构
-
再看自己的任务应该写在什么目录下，什么位置。
-
创建函数，插入代码。
-
写代码，自测。
-
函数具体该怎么实现？ 这个在技术文档里应该考虑的差不多了
-
实现之后就可以自测了 不过要注意复杂的功能肯定需要拆解为许多小的函数。
-
这里我学到一点，就是regex和polyfill要单独创建文件存放，就像工具函数那样。
-
PR，改代码，直到merge。
然后终于几经波折，我的代码加入了编辑器中，开心了好几天。
但是很快我收到了第二个任务，写一个demo：编辑器在ts中的使用。
这里我有以下疑问：
- 我不懂在ts中使用是什么意思。在vue，或者react里使用很好理解。因为我知道vue等是框架，是项目，但是我不知道原来ts也可以是项目。
- 编辑器的使用，需要我实现什么？除了最基本的引入编辑器，还要干嘛？
主要收获：
-
工程化的ts
-
即需要多分类的文件夹，如：asserts,build,dist,src,config.
-
需要webpack，热编译。
-
npm包管理。对package-lock.json有了更清晰的认识。
-
问题2比较简单，因为已经有人写过vue和react的demo，我几乎copy就好了。
第三个任务：解决ie浏览器的bug
这里有三个bug，但都是同一类型，就是ES的有些新特性，ie不支持，比如Object.assign()。
思考方式：
-
因为是别人报的bug，所以先复现bug，这很简单。
-
把bug复制查百度。这里我要对自己说一句，以后抛弃百度了。查bug的顺序应该是stackoverflow->掘金/思否/博客园->百度。
-
这个不支持问题很常见，百度方法很多。我大概看了几篇帖子，然后复制了一段polyfill代码，就解决了，但这只是一个函数，这关过掉又报错说不支持另一个函数。
-
要多看几篇帖子再动手修改。其实修复问题的套路就是这样。如果是为了学习，那么就要明白这个问题出现的原因，要求掌握透彻，那么一般必须多看几篇。如果仅仅要解决问题，那么多看几篇，看看大多数人怎么说，你会更能选择出好的解决方案。因为偏听则暗，有的人自己都不懂，甚至搬运过来写的都是错的，如果用他的方法就是浪费时间。这是我的一个经验。
-
其实一开始我不知道什么是polyfill。其实好的习惯是，遇到新的名词先记录下来，后面查一下是什么意思。
-
这里我怂了，没有自信说这两个不支持问题是同一个问题，开始胡思乱想（就是我不知道自己在想什么）。原因有2：
-
我有点害怕改bug，因为我没有经验，大工程的bug，总觉得自己很难解决。
-
这里老大最后跟我说去搜polyfill解决，我听了这句话像吃了定心丸，就解决了。
-
第二，百度没搜到这个函数的polyfill。
-
最后我是看懂了那个函数的原理，然后找了个差不多的函数，自己改的。
总结：多看，懂了原理再行动。
不知道的词要了解，比如polyfill，比如工程化的ts
我的其他收获
- .trim()去掉字符串首尾的空格
- teambition要随时更新语雀，和github的进度。
- git push会自动更新pr里的file changes和检测提的意见。
- 写文档。代码细节。代码结构。
- 要学会拆解复杂的问题，分多个方面写，需求和设计都一样。
- export es6报错——改type=module解决
- 访问js文件跨域——安装anywhere解决
