以下记录的是今年4月笔者在公司进行web前端工作的每周工作总结，其中隐去了项目的具体名称、人名、公司名等。

 

 

2019.4.1-2019.4.3

本周工作内容： 本周主要完成了训练场（Training）页面的静态显示；实现了其拖拽用户元素的效果

不足之处：本周笔者在工作上的不足之处主要是css布局和vuex方面上 首先是css的布局问题，虽然笔者在编写页面时发现了使用纯比例宽度布局外层div时在页面进行缩放和放大是效果都不佳，但是却没有解决这个问题，之后成哥提出来才明白问题的严重性，但是在css布局方面我仍然有疑问，比如使用百分比的大小是参考了之前bootstrap的栅格化的一些思想，bootstrap的栅格化在源码实现方面也使用到了百分比大小，不过忽略了它其实还有媒体查询以及这个指定视口的问题…还是有很多疑问需要解决 再一个就是vuex的不熟悉了，笔者在本周接触到了使用vuex在兄弟组件之间进行通信的问题，但是使用的不够熟练而且风格和之前的代码有差别==|

下一阶段的工作：研究css布局的技巧，学会如何进行响应式布局，加强对flex布局的理解和学习 加强对vuex的学习，在下一阶段将自己写的veux数据传递风格和之前的代码风格保持一致（如图）

 

 

 

 

2019.4.8-2019.4.12

本周工作内容：本周笔者基本了解了vuedraggable库的一些常用API，完成了一个交易积木项目中的Training（训练场）页面的初始拖拽交易员的版本，同事开始研究野牛期货客户端的背景主题改变设置

学习到的内容：本周笔者学习到了许多内容，同事在和新同事夜景的讨论中，也发现了一些对编程十分有利的新网站。 1.首先便是对vuex的理解加深，之前笔者书写vuex的数据传递过程的写法还是过于基础生硬，不利于调试和协作开发，在本周笔者借鉴了之前项目中书写vuex的代码，统一了vuex的写作风格。 2.认识了vuedraggable这个非常有名的vue拖拽组件库，同事熟悉了其一些常用API的使用 3.初识React和TypeScript，查看了React的官方中文文档，理解了其一些与vue不同和相似的地方，同时对JavaScript的兄弟语言TypeScript有了初步认识 4.学习了SASS，SASS是目前最流行的CSS扩展语言，笔者如今已可以使用SASS在vue组件中进行CSS样式编写 5.发现了一些新的有帮助的网站，如http://www.ruanyifeng.com/blog/2019/04/oauth-grant-types.html 阮一峰的个人网站，https://codepen.io/前端领域非常实用的一个在线调试和作品分享网站

不足之处：在本周笔者的工作之中也有一些不足之处，比如，编码还是不够规范，如上文所述的在编写vuex数据传递过程和store类型的js文件时，编码风格与项目之前的编码风格不一致，导致协同开发和调试都较为困难。在之后的开发当中应该更加注意编码风格的一致性，同时在实现项目 需求的基础之上，应该更多的考虑代码可读性的问题，比如变量命名的规范，函数编写的规范等等。

下一阶段的工作：由于交易积木项目将发布一个基础版本出来，笔者下一阶段的工作重心将移回野牛期货客户端，在下一阶段将要实现野牛期货客户端的背景主题修改功能和快捷键设置功能

 

 

 

2019.4.15-2019.4.19

本周工作内容：本周主要完成了野牛期货客户端的light主题显示

学习到的内容：本周笔者绝大数时间都是在该CSS样式，从中也学习到了不少CSS和SASS相关的知识，从之前项目代码中的CSS代码知道了一些CSS的书写规范和技巧。首先是利用SASS进行样式的变量定义，以$开头的变量，这样做的好处是可以使得整个样式的更新变化更加的灵活，同事也使得整体的样式风格更加统一。其次是伪类和伪元素的使用，在笔者之前的开发中更多的是用到了hover之类的伪类，对于伪元素的使用还是比较少的，但是通过学习野牛期货客户端的前端代码，笔者发现在一些合适的地方使用诸如::after, ::before之类的伪类可以起到事半功倍的效果。然后是关于vue的生命周期和vue中watch函数的一些细节问题的学习

不足之处：本周笔者的工作有一些不足之处，主要体现在使用控制台调试代码经验不足上，实际上控制台是可以很方便的调试样式代码的，另外也需要经常使用vuex来调试vue代码，这也是十分重要的。还有一点就是要提高编码效率。

下一阶段的工作：为野牛期货客户端添加蓝色主题背景

 

 

2019.4.22-2019.4.26

本周工作内容：本周主要完成了野牛期货客户端的蓝色主题显示，同时开始准备其快捷键设置

学习到的内容：本周笔者的主要工作内容和上周类似，主要是在修改CSS样式表，将野牛期货桌面端的蓝色主题从设计图上还原过来，由于上周做了类似的工作已经有了经验所以本周的主题还原工作没两天就做好了。之后就是着手解决快捷键的问题了，然后还有一些空闲的时间笔者主要阅读了《JavaScript高级程序设计》（红宝书），然后也是因为快要毕设答辩了，填写了一些毕设相关的资料。通过对红宝书的学习，笔者了解了JavaScript之前的发展简史及其与网景公司和ECMAScript的联系。另外也深入的学习了DOM和BOM。另外初步学习了Canvas和客户端检测的一些内容。另外也尝试搭建了React native的开发运行环境。最后笔者也是通过下载老虎期货和富途牛牛的客户端了解到了目前同行竞争产品的一些细节。

不足之处：学习效率有待提高，尤其是学习新知识的效率。

下一阶段的工作：开始研究设计野牛期货客户端的快捷键绑定工作

 

 

 

2019.4.28-2019.4.30

本周工作内容：本周主要完成了野牛期货客户端的快捷键设置的页面显示部分，同时了解了具体的实现方案

学习到的内容：主要是学习到了Electron中得一些特性，比如快捷键属性https://electronjs.org/docs/api/accelerator, 可以通过globalShortcut来实现快捷键功能。另外笔者通过构建页面加深了CSS HTML的一些编写技巧的理解，比如页面的滚动条功能，CSS伪类伪元素等等。另外也学习到了JS的键盘输入监听事件onkeydown onkeypress onkeyup

不足之处：对HTML和一些CSS基础以及实际页面编写经验不足，效率不高

下一阶段的工作：完善野牛期货客户端的快捷键绑定工作，学习Electron相关文档