工作总结

Posted 2020-08-16 星星眨眼

不知不觉，我进入1号店这个大家庭已经将近1年的时间了。

现在，我还记得刚进入公司第一天就开始的实习生百日计划。公司安排各个部门的优秀员工给我们进行培训，从简单的公司使用的聊天工具，如何使用内部网站，如何写邮件，到复杂的开发流程，测试流程，java基础知识和各种框架，前端基础知识等等。

不仅公司会安排各种培训，部门内部也会在这三个月里面对我们进行一个专业的培训。我非常谢谢我的师父在三个月里面对我的帮助，他是一个超级耐心的人，行内元素与块级元素的区别，class的命名规范，盒子模型，代码要对齐，浮动之后别忘了清除浮动，如何查看图层，制作一张雪碧图，各个浏览器的兼容性问题及解决方法，他交给我太多太多的知识。第一次练习页面时，页面的结构比较简单，没有左右浮动的布局，需要注意的点是：1.背景不是纯色，而是由一个小点沿着X轴、Y轴平铺；2.banner图有一个地方是个按钮，需要画热区；3.正文内容部分是大段大段的文字，需要在窗口的正中央。这个页面在现在看来很简单，但我总共做了三个版本。第一个版本很快就做完了，leader看了我写的代码之后，只说了一句话：你的代码没法看。可不是吗？？class的命名及其简单，所有的代码完全没有对齐，极其没有美感，乍一看，视觉稿上有的我全都有，实际上文字颜色、大小和视觉稿对不上号，背景的小点仔细看颜色深浅不一，行高没有写......没有经过正规的训练，以及缺乏实际的经验，页面的各个地方都有问题，坑坑洼洼的需要一点点修改。师父看完我的第一版页面对我的基础有了一个大概的了解后，总结出：我的基础不好。于是，他仔细给我讲解如何测量颜色、大小、行高、切图等PS基本技能，DW如何将代码对齐，怎样画热区，css的命名不能使用拼音或者太过简单，html页面应尽最大能力还原视觉稿，否则就不是一个质量高的页面了。既然第一个页面做的这个的差，到处都是问题，还不如推翻重新构思，重做。在做第二版时，我严格按照视觉稿测量颜色、大小、行高，元素大小、元素与元素之间的边距，不像做第一版那样随意了，第二版出炉了，然而还是做得不尽人意。页面的视觉效果这谷歌浏览器中目测没大的问题，在IE6中乱了，虽说只是一个练习，IE6还是需要兼容的。师父看完我的代码后，发现我在<p>里面套了<div>标签，有的多套了一层标签但没有实际的作用，切得图还是有毛边，页面的视觉稿的宽度是980px，我擅自以为遵循视觉稿谁就是要按照980px来，于是窗口的两边都是白的，只有中间是背景颜色填充，看起来非常奇怪。师父一一说出我这些缺点后，我再次分析页面的结构，按照我作为一个用户的习惯，页面应该怎样才是合理的开始第三版的编写。经过前两次的教训，第三次就顺手多了，虽然最后给师父看的时候还是出现了一写问题，但是没有前两次那样严重了，稍微修改一下就行了。在进入公司实习之前，我都是通过教学视频来学习前端知识的，纸上得来终觉浅，这是我第一次完整的做完一个页面，虽然页面简单，虽然做了三次，遇到了各种各样的问题，但是经过了一年，我还能感受到当时做完页面后的那种成就感。接下来的时间，师父分给我的练习页面越来越复杂，暴露出各种问题，但是这些页面的练习，让我对于WEB前端有了一个更清楚的认识：我要做什么，我将做什么。短短三个月，我的技术得到了一个很大的提升。

是骡子是马拉出来溜溜，终于进入到实战阶段了，前几个月的各种不同结构不同特点的页面的练习终于在实际项目中发挥作用了。后台页面的特点是页面结构相对前台页面来说比较简单，但是交互复杂。最开始分配给我的后台页面没有比较复杂的交互，只有一般的tab选项卡、弹窗等。随着经验的增加，我所负责页面也越来越复杂了，让我印象最深的就是图片空间。

第一次做图片空间时，最难得一个交互是图片的大小能够通过滚动条来放大缩小，鼠标在图片上拖动时能够划分选区并且实时预览选区。刚开始我给的前端排期是一星期，一星期过去了，我仍然没有做完。原因是网上找不到合适的能够同时实现放大缩小和截取图片的插件，只能够通过将两个插件组合完成这个功能。我分别查看了这两个插件的API，尝试各种可能的方法之后，也没有将这两个插件融合起来完成图片空间的项目需求。因此，图片空间我delay了，这也是我第一次delay项目。不过好在开发那边重新找了一个插件，简化了需求，这个问题得到了解决，图片空间上线了。没有多久，图片空间全部改版了，页面的样式、交互与上一版的有很大的不同，相同的是这次的交互也很难。图片、文件夹、回收站的图片或文件夹、多选之后等各种情况，鼠标右键后所出现的内容都不相同。同时信息展示的样式仿照Windows系统，有详细模式和图片模式，文件夹或图片能够通过拖动的形式来多选。详细模式和图片模式的切换我刚开始准备以Tab形式来切换，然而这样是有问题的，重命名、新增、上传之后就需要同时改变这两种情况了，太麻烦了，我想到的解决方法是不用tab形式，而是通过点击时切换最外面的Class来展现不同的样式，这样我就不同考虑不同的情况了。鼠标右键不同区域展现不同的内容我想到的解决方式是写一个function，传递一个object对象，然后通过object是文件夹、图片或空白区域等来判断分别展现哪些内容。拖动多选我是使用的easyUI 插件，但是这个插件没有双击事件的callback，导致开发那边无法继续后面的开发，同时使用了插件后页面运行的非常慢，与PD商量后同意取消了滑动多选。这个页面前前后后改了很多次，以至于那段时间对RTX产生了一种恐惧。但只要结局是好的，过程似乎就没那么艰难了。真个图片空间做完，让我真的学到了很多东西，插件的使用、如何屏蔽浏览器自带的鼠标右键效果而展现自己所写的右键效果、如何在遇到困难时想方法解决问题而不是把它放在一边不去面对它……

工作1年了，这段时间，有困难，有逃避，但更多的是快乐，是成长，更是我未来成长路上的铺垫。非常谢谢leader、mentor在这一年里对我的不抛弃，不放弃，对我职场、生活以过来人的经验对我的教导。