【工作周报】2019年7月 前端开发工作周报汇总

【工作周报】2019年7月 前端开发工作周报汇总

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

2019.7.1-2019.7.5

本周工作内容：更新了一些后台管理系统和经纪商系统的页面

学习到的内容：本周笔者主要还是通过对上述静态页面的开发，巩固和强化了html和css的相关知识，提高了页面开发的熟练度。另外，也对vue  element ui的开发模式更加的熟悉。同时本周笔者也开始每天利用一些空闲的时间通过观看react开发视频教程来逐步学习React的相关知识，笔者计划在两个月后开始使用React写一套组件库用以加深对React的学习和理解。然后主要阅读了《js设计模式与开发实践》，其中的关于原型和闭包的描述使笔者受益颇深。

不足之处：css代码开发方面出现了一些冗余的情况，还是可以把一些公共的样式代码抽离出来成为一个单独的文件运用会更好很多。另外是vue组件方面某些较繁杂的页面可以考虑拆分

下一阶段的工作：开始对接管理后台的相关接口

2019.7.8-2019.7.1

本周工作内容：对接了Fondante后台管理系统钱包模块的大部分接口

学习到的内容：本周笔者主要学习到了es6的新语法promise和es7的async和await。虽然在之前一直有阅读过关于promise的一些写法和资料，但是总是对其总体印象还是很模糊的，而本周笔者在对接钱包接口时，在实现一些业务逻辑时，由于需要控制多个同步和异步（ajax请求）代码的执行顺序，所以就必须要用到promise写法或者是async await，这也是因为在fondante中使用的http/ajax请求利用的是axios插件，而通过axios发起的ajax请求本身就是返回promise对象的，然后在其后可以接上resolve函数进行下一步的处理，也就是.then之中执行的方法，而如果ajax请求失败，也就是promise对象最终变成了rejected状态之后，应该执行reject函数，一般用.catch这样的写法去处理reject之后的逻辑。通过链式调用.then方法便可以实现同步般的执行异步、同步混合的语句了。

另外也可以考虑使用async和await这样的写法，async和await和es7中的新特性，其本质是封装generator函数的语法糖，使用async和await会更加优雅，从代码美观的角度来说，promise then这样的写法还是语句很长的链式调用代码，而async和await的写法则是彻底将异步执行的代码用同步的方法书写了出来。

不足之处：对element中的部分组件及其属性还不够熟悉，另外就是es6和es7的新特性学习不够，除了promise和async外，es6还要许多需要笔者进一步学习的内容。

下一阶段的工作：完善管理后台的钱包对接接口，发现、修复问题

2019.7.15-2019.7.20

本周工作内容：完善了Fondate后台管理系统钱包模块的一些接口对接细节，修改了交易记录和操作日志的分页逻辑和数据筛选逻辑（前端分页/筛选 -> 后端分页/筛选）

学习到的内容：本周笔者巩固了自己对js中Promise和setTimeout setInterval函数的理解，虽然最终的项目代码中没有使用到Promise结合setTimeout进行轮询的写法，但是本着试验的目的最终还是实现了这样的逻辑：利用setTimeout模拟setInterval的实现会更加稳定，定时向服务端请求获取相关数据，利用Promise实现异步获取到相关数据之后再同步执行接下来的逻辑代码。  另外还新学习到了ES6中的of循环和set map数据结构。在之前笔者一直使用传统的for循环来实现数组的遍历，实际上那种写法的性能更好，但是在一般的较小数量级的数组中这种优势体现不出来，而且会使代码更加臃肿，而of循环的出现则可以作为数组遍历中的一个很好的替代品。set和map数据结构有点类似于Java中的集合框架，在很多场合都会有较多的运用，比如获取去重之后的数组等。

不足之处：对部分逻辑的理解有偏差，比如笔者在上周认为的筛选分页逻辑，事实上正常的筛选不管分页与否都会带上筛选条件，这样做不会出现笔者预想的那种筛选结果为未加入筛选条件的那种结果。

下一阶段的工作：继续Fondante项目的开发

2019.7.22-2019.7.26

本周工作内容：本周笔者主要修改了所负责的风信子管理后台的钱包的一些接口对接细节，修复了一些已知的问题。另外对接了一些新的接口到钱包模块中，对接了汇出模块

学习到的内容：本周笔者通过对钱包归集和汇出的两个操作进一步了解了后台管理中的交易功能，同时对比特币和USDT之间的关系和交易过程有了新的认识和体会。交易比特币所产生的手续费和每次交易的金额大小无关，和输入、输出个数及实时的交易费率有关。 在技术上，笔者对于处理异步代码和同步代码的执行更加的熟练了，对promise和async await的特性及使用有了新的体会。另外是var和let的用法区别上，实际上在我们大部分书写代码的情况下都可以只使用let，因为用let来定义变量会使js代码更容易让人理解，也和其他编程语言的定义变量效果更接近一些，相比之下如果使用var来定义变量的话则会产生很多需要额外考虑的问题，比如说var定义变量没有块级作用域，存在定义变量提升的问题，但是有时候也可以考虑巧妙的利用var的变量提升特性来使得代码书写更加的简洁，当然这样写的话会降低js代码的可读性，如下图：在这里我们特意将for循环中的参数j用var关键字来定义（原本使用let更合适些），这是因为var关键字定义变量存在变量提升的问题，也就是说实际上此时j变量在编译器里编译执行时声明会提升到最外层（也就是函数作用域下的第一层），这时候就可以在for循环之外使用j来处理其他的逻辑了————这是一种巧用var特性的手法。 在算法层面，笔者复习了利用动态规划算法来解决求最长回文串问题：这是动态规划算法的一个经典应用：/ 需要好好研究一番

不足之处：某些API的运用还不够熟练

下一阶段的工作：继续Fondante项目的开发

2019.7.29-2019.8.2

本周工作内容：本周笔者配合其他同事继续进行Fondante管理后台的开发及相关bug的修复工作

学习到的内容：本周，笔者主要通过掘金这个对开发者十分友好的论坛学习到了一些前端开发方面的内容。首先是JS的编程风格方面，之前笔者在开发的时候一直引入了ESlint进行开发，这样也能帮助笔者养成更好的编程习惯，另外就是本周新发现的 这个github项目，是关于JS的风格指南的一个开源项目，从这里笔者学习到了很多更加良好的代码编写风格，比如说定义变量时不要一概的使用let，在合适的时候也要使用ct，要多利用展开运算符对对象和数组进行赋值等操作，当然此时要注意其浅拷贝后拷贝之后的变量对原变量的一些影响…… 还有就是对ES6新知识的继续学习，比如set和map数据结构，这让笔者想起了Java中的集合框架，有了set和map，在我们日常的开发中很多操作将会变得更加简单，比如利用set进行数组的去重，利用map可以实现去存储js原来所无法表达的键值对型的数据……

不足之处：对React等框架新知识的学习强度还不够，进度较慢，要加快对React的学习

下一阶段的工作：继续Fondante项目的开发