2017 年工作记录

最后更新于 2018-01-18 14:47:00

现在已经 2018 年了，回过头去看看刚参加工作第一年也就是 2017 年的工作历程以及参与的项目，总结一下遇到的问题，解决方法以及自己的成果，做个简单的总结。

2017 年

今年，7 月份从学校毕业了，找到了自己还算满意并且喜欢的工作。自从 9 月 7 号入职以来，一直负责的是 Web 前端方面的工作，这也是当初自己选择并专攻的一个方向，四个多月的时间里断断续续参与了多个项目，回过头来从每个项目中都能感受到自己的成长。

项目总结

接下来总结一下自己在这几个月内参与的各个项目的细节，并分析遇到的问题，解决方式，以及自己的收获。

保护区巡护

刚进公司，第一个接触的就是这个项目。

• 任务

  起初是做一些界面优化的工作，随后参与了部分前端业务逻辑的实现。

• 过程

  刚开始主要是花时间去看源码和文档，了解项目情况。本身是个小项目，因此很快的了解了项目的大概业务情况和开发情况。因为是新人，所以主要任务是界面优化工作，这个过程中发现公司由于缺少专门的前端工程师，所以响应式设计这块做的并不好，那么我的工作针对的优化方向也在此。后面的话，也写了一部分的业务逻辑。

  在这个过程中，由于自己当时也学习了部分 Java Web 的知识，所以尝试独立实现了警报业务的前后端代码，后台代码参考已有的框架和代码来实现，最后也算完成了。

• 收获

  作为新人，还算是一个好的开头。其次的话，这是我接触的第一个商业项目，对于从来没有接触过商业项目的我来说还是收获不少的。

  • CSS、HTML 基础知识
  • 前后端交互 Ajax、json
  • Web GIS 类库 OpenLayers

第一个问题就是 CSS、HTML 的基础知识，这里之所以没有 JS 是因为涉及的业务逻辑并不多，而且也不复杂。同时，因为使用了新的 Web API 技术 Canvas，基本不用再考虑 IE8 以下的兼容性，事实上抛开兼容性的话页面实现要简单一些，考虑的因素会少一些，只需要专注于快速实现。

以往，在学校自己学习前端知识的时候很少写过一个很大的系统或者多个完整的页面，大多时候都是写一些 HTML 代码片段，去使用 CSS 实现一个组件（下拉列表，复选框，导航）进行美化。面对这样一个大的系统，多个完整页面，并之间有一定的逻辑关系，理清这些还是耗费了不短的时间。从这里面认识到了，页面的设计架构特别的重要，尤其对于后期维护来说是很关键的。一个页面内部的架构设计，需要对基础的 CSS 布局定位知识有很深的理解才会做到很好，这时也领会到了当初学习 CSS 时强调的重点的重要性。这个项目实际上是一个 Web 应用，而非单纯的页面，以前了解过单页面应用（SPA）的知识，但还没有完整地应用过，不过此时能感受到如果这个项目设计成 SPA 架构用户体检会好很多。

第二个问题就是前后端的交互问题。实际上在自己学习前端知识的时候，基本上是没有和后台交互的，所以这方面的经验非常的欠缺；在这个项目中参与了一部分的前端业务逻辑实现，根据别人的示例以及自己查找资料，也算是对于前后端的交互有了基本的了解。现在的 Web 实现依赖于 Ajax 异步请求技术通过 Http 协议与后台服务器进行数据传送，并使用标准的统一数据格式 JSON。由于学习过一些基础的后端知识，和后台开发配合起来能相对容易一些，在后期独立实现了警报的前后端业务，不过感觉对于自己所学习的技术应用起来还是不那么的熟练。

第三个问题就是 Web GIS，接触一个新的行业领域。由于公司的业务主要是 GIS 领域的，参与的第一个项目就接触到了 Web GIS 的技术，这个项目使用的是 Openlayers 类库，刚开始接触时还是比较难的，尤其是一些 GIS 行业的术语不是很好理解，不过走的是技术先行的路，首要解决的是项目中要实现的业务，后面还会对 GIS 行业的知识进一步的学习。

甘肃林校

这个项目基本上是从无到有的一个过程，而且也是公司的一个战略级大型项目，更重要的是时间也非常的紧，所以通过这个项目收获颇丰。

• 任务

  主导前端开发工作，对已有的代码进行优化。

• 过程

  其实，现在也仅仅是进公司一个月的试用期，没想到接到这么重和相对来说比较难的任务，但是反过来想想这真是个绝佳的锻炼自己的机会。公司之前有一个女孩子做的前端工作，技术一般，所以这次项目由我来主导，并对她之前完成的一些代码做优化。

  这个项目业务内容为一个门户网站和多个应用子系统。门户网站基本成型，只需要做一些优化，我的计划是采取 SPA 方案并做一定 SEO 优化，最终来看优化效果是相当明显的。应用子系统的话，当时也采取了 SPA 方案，毕竟开发一个应用的话这是前端目前主流的解决方案；但因为当时还没有学习过 React、Vue 这些框架，就利用组件化的思想自己简单实现了一个简陋的组件系统，所有的业务逻辑代码都是纯手写实现。

  说到前端的开发，没有专门的 IDE，其实各种繁琐的流程还是比较复杂的和耗费时间的，但是因为时间紧迫以及技术欠缺的原因，就没有使用 grunt、gulp、webpack 这些自动化构建和模块打包工具。

  最终，进度还算顺利，离预期的效果也比较接近。

• 收获

  能在刚开始工作接到这么一个项目，还能自己主导前端的开发工作，虽然做的可能不够专业，但是收获真的是相当丰硕。

  • 项目文件层次结构
  • 技术选型
  • 优化方案

首先，一个项目的文件层次结构很重要，因为软件是需要不断的进行维护升级的，项目文件的层次结构不清晰的话，会导致后期维护升级时回过头来看代码时消耗大量时间去读懂代码。而且，前端没有专门的 IDE （集成开发环境），所以代码量一旦变大就很难维护；目前有一些自动化的构建工具以及模块化打包工具，不过上手难度还是挺高的，由于时间问题，所以选择手动编码，也算是练一练基本功。前端的项目文件层级结构通常有两种，一种是以文件类型进行分类，比如 CSS、JS、插件、库、字体文件等等，这种适合生产环境，以及没有自动化构建工具的环境；第二种则是以组件或者模块为划分依据，将同一个组件或者模块的 CSS、JS 等文件放在一块，这种适合使用了自动化构建工具的开发环境。因此，我选择了前者，事实上在这个过程中，文件结构的架构变动了三次，在这个过程中去感受文件结构层次的不合理是比提前选好要深刻的。

其次，技术选型也是很重要的，这个项目及涉及了门户网站，又涉及了应用系统，总结一下就是及有内容性网站，又有 Web 应用。为了增强用户的体验，门户网站采用了 SPA （单页面应用）架构，但是门户网站作为一个内容性的网站是需要对 SEO 进行优化的，最终采用了目前普遍的做法，将静态内容全部写到 html 文件中。其次还有个很重要的问题，由于这个项目使用了三维地图的类库 Cesium，技术选型与优化关系密切，三维地图太耗费性能，影响应用的使用体验，而且页面之间的数据管理传递问题也难以解决，在常规独立页面与 SPA 架构中最终决定先用 SPA 架构，最后发现三维的容器元素在 display 设置为 none 之后，页面明显不再卡顿，于是才知道 DOM 元素隐藏之后，浏览器就暂停了渲染；这是个令人高兴的事情，而且采用了 SPA 架构之后，页面之间的数据管理传递问题也随之解决。

在项目第一阶段完成上线后，其实发现了很多待优化的问题，一是因为当时时间紧迫没有做太多优化，二是确实当时在开发环境下没有预料到一些需要优化的问题。图片其实是个很奢侈的在线资源，尤其是一些首页的轮播大图当时没有进行压缩，有的单张图片竟达到了几个MB的大小，在对图片压缩后，整个门户网站的资源量达到了 30MB 多，而压缩后仅仅不到 10MB ，加载速度明显加快，效果还是很明显；这个过程中也学会了使用 Chrome 的开发工具进行网络模拟。对于 SPA 架构来说，是一次性将整个网站的资源加载完的，之后又采用了 LazyLoad （延迟加载）的技术将单次的资源加载量进一步缩减，基本只有 2MB 左右，网站浏览明显流畅了。由于这个项目需要的资源文件量特别大，其实有考虑过给静态资源专门弄一个服务器，但因为现在是第一阶段，所以就将整个计划延后了。

总结

3 个月的试用期，在第 2 个月的时候就提前转正了，这真是个意外之喜。虽然在毕业季没有找自己专业对口的工作，在找工作中也遭遇了很多挫折，但一切的付出总算有了还算满意的回报，坚持了自己喜欢的事情，以后只需要朝着自己的方向努力就好，未来可期！