2017年度个人工作总结

2017年行近尾声，现将本人这一年工作与学习情况总结如下。

# 年初

年初的工作重心在于1211项目。这一阶段主要完成了1211项目首长阅报后台管理系统的开发以及首长阅报助手的开发。此外分别简要了解了react、Vue两个新兴MVVM框架。

# 首长阅报后台

主要工作为完善首长阅报后台，配合完成了模拟认证登录、分级部署功能，修正了若干功能性bug，改进了等待动画、进度条等交互效果。

# 首长阅报助手

开发了一个为首长阅报App和阅报后台离线导入、导出报文的基于Java SWT的本地运行程序，并将其打包成了可安装文件。安装成功后，可从浏览器唤起，根据参数执行从阅报后台导出报文到E本阅报App或从阅报App导出报文上传到阅报后台的功能。根据需求，离线导入／导出时E本不可联网，只允许通过USB连接PC，且交互最好可以实现一键完成，因此在技术实现上选择了URL Protocol实现一键唤起助手，使用adb指令实现PC和E本间的文件操作。最后使用Install4j将运行环境及可执行包打入安装文件，设置好安装时写入注册表以备唤起。

# 年中

年中的工作重点在移动办公系统标准化。这一阶段主要完成了从1211项目中分离出移动办公系统标准化代码的工作，并优化了若干交互。此外选择了Vue作为主要学习方向，尝试制作了一个简单的管理后台Demo。

# 移动办公系统标准化

将1211项目中总结出的可复用代码进行标准化重构，使代码可读性、易用性提高，同时改进了如表单验证、页面加载等交互效果。

# Vue学习尝试

关于本年度的学习方向，我在Vue和React之间曾十分犹豫。React作为Facebook的开源项目，其开发规模、生态环境、应用范围均大过个人开发的Vue.js，首创的虚拟dom、组件化开发等思想我认为也是推动前端发展的利器，而其缺点主要在于学习成本过高，为了完成一个完整的React项目需要掌握JSX、路由库、执行单向流库、web API调用库、测试库以及其他依赖库，知识体系十分庞杂。而我认为学习这两个框架在于其次，了解其思想为主，且Vue同样拥有虚拟dom、组件化开发等思想，相较于React的量级更轻，非常适合开发轻量级SPA（单页应用）。

关于SPA，我认为这是信息型和轻量级功能型Web站点的首选方案。一般来说打包后的SPA结构非常简单，index.html作为入口，引入的主js文件作为整个SPA的控制中心，其余资源文件完全按需加载，路由跳转也并非传统意义上的页面跳转（传统浏览器跳转会重新加载所有资源文件并重绘DOM），只需替换相应的DOM模块，避免了浏览器资源加载和绘制重复DOM的操作，大幅提升了渲染性能。除此之外，SPA独特的浏览器渲染（这也得力于浏览器和客户端硬件的快速发展，现代浏览器的性能提升为这种渲染模式提供了条件）也为其增色不少，相较于传统的服务端渲染，浏览器渲染一定程度上降低了服务器负载，服务器只需传输浏览器请求的资源即可。

# 后台管理Demo

本项目是使用基于Vue的Element-ui前端UI库开发一个后台管理系统Demo。此系统目前包含PDF图书在线阅读、分类管理功能，人员分组工具，以及Web前端设计、研发规范文档。制作目的在于利用开发了解基于Vue.js的开发模式和思想。

界面开发我采用了Element-ui这套前端框架，此框架由饿了么前端团队开发，其包含的各种基础组件已可满足大部分开发需求，且目前仍在不断优化中。路由管理采用了Vue官方提供的vue-router（2.0版），可实现路由的嵌套、编程式导航，前端路由管理是将前端项目独立出来的必要工具，Vue官方的router项目正好免去了开发者对前端路由开发工具库的选择困难。此外用到了vue-resource作为与后端restful接口的请求管理工具，对于在线阅读PDF文档，采用了vueshowpdf组件。逻辑代码部分使用了新版javascript标准ES6开发（趋势），由于现代浏览器还未完全支持，使用Babel编译工具在打包时将代码编译成ES5以解决兼容性问题。项目打包使用了模块化打包工具webpack，它可以根据配置将各种复杂的依赖库、资源文件打包成模块化的js文件，使用时自动调用合适的依赖，无需开发者额外处理。包管理工具使用通用的npm，学习与使用均十分简单。Vue.js官方提供了名为vue-cli的项目搭建脚手架工具，集成了Babel、webpack等一系列构建项目所需的基本依赖库，这就使得开发者可以非常便捷的使用它构建自己的项目，只需几行简单的命令即可。最后我将这个项目放在了GitHub上，跟随趋势使用Git，不单为了保存项目，顺便也可以了解Git的简单使用方法。

这是自了解新的Web前端开发模式后我的第一个成型项目，这种前后端分离的开发模式，无论对于前端开发还是后端开发都有很大帮助。将路由管理移到前端可以让前端开发人员更加专注于界面展现（不再受到后端数据模版的侵入式开发模式影响），而后端开发人员也只需要关注业务逻辑及数据，提供restful接口即可。运行时，前端项目独立运行于服务器，也避免了由于后台服务器错误导致整体崩溃的问题。这种模式不仅仅是一种新兴的技术架构，它作为模块化开发的思想对前端开发行业带来的可以说是一种变革。前端开发者的工作内容已经从传统的切页面加动效逐步发展为独立构建Web项目，这种架构上的自由也必然是通向未来的重要一步。

代码：https://github.com/musheng66/vue-ebenwms

# 年末

下半年的重点在于对Vue的进阶学习。这几个月我使用Vue重构了E本官网，将其构建成了一个响应式的、轻量级的SPA，并以此为基础逐渐总结出Vue开发快速构建项目的原型。

# Vue进阶学习-快速构建原型

相对于理论研究我更喜欢开发实践，因此下半年我以重构官网项目为契机，进行了Vue的进阶开发实践。官网本身作为一个信息型网站，使用Vue可以为用户带来更好的浏览体验。虽然我们并没有官网的管理权，但我依然选择了这个项目进行重构，作为对Vue学习的最佳实践。有人说前端开发者在层出不穷的框架和技术中不该过分关注细枝末节，而我认为在没能真正建立起完整的前端体系之前，格物致知未必不是一种方式，在这样的过程中逐步成长也是一种合适的选择。

项目使用vue-cli脚手架搭建，使用Element-ui进行交互开发，vue-router进行路由管理。此外，使用基于CSS3的Sass框架进行样式开发，使用mixin实现样式参数化（可实现主题更换）、模块化（Vue的模块化开发本身也对CSS代码实现了模块化，原因在于开发时样式代码写入每个模块而非整体引入，这种开发模式天然地将代码模块化了）；整个项目力求符合响应式设计，然而由于资源限制，只好在原有资源基础上进行了响应式开发（flex布局）；使用LocalStorage及SessionStorage保存需要持久化的数据，如导航信息、用户登录信息等，优化了存储结构；对于icon图，我使用了svg（矢量图）格式，避免因为页面缩放造成的小图标出现锯齿问题；对于导航，我将其设计成了可配置模式，通过json就可以轻松的修改。另外，我进行了一些优化交互设计，加载页面时会显示等待动画，切换时加入了淡出效果，使路由跳转表现更加平滑等。

在此项目的开发中，我对于Vue的运行生命周期，组件通信，导航拦截等有了一定了解，对Sass和flex布局也进行了初步尝试，运用这些实现了界面功能和交互优化。通过这个项目，我总结出了使用Vue快速构建SPA项目的原型，再进行类似的功能型网站开发时我即可使用此原型实现快速构建与开发了。

代码：https://github.com/musheng66/vue-nexus-interface

# T10项目测试

参与了T10项目协助测试，共参与一轮完整测试，两轮功能测试，一轮冒烟测试。

# 移动办公平台部署工具（搁置）

参与移动办公标准化平台的部署工具开发。

# 总结

2017年对我而言是学习的一年，年初的JavaSE开发、React初探，年中的Vue尝试、深入学习，个人感觉不但对于前端开发的理解有所提升，技术水平也有了一定的进步。明年我计划多了解一些服务端技术，学习基于Node.js的服务端开发，同时准备逐步总结工作经验，用以提升工作效率和质量。

# 小小的回顾

这是我工作的第五年，也是在E本的第五年了，不妨也小小的回顾一下吧。