半载小记

2017-06-04 | 21:23 | 周日

---

最近半年都没有写博客、总结之类的东西，一方面是因为工作比较忙，另一方面也是因为生活中杂事缠身，不像实习和刚毕业那会儿可以什么都不想，拼命的加班和学习。

一晃半载，又接触了很多新的东西，也熟练巩固了很多旧的知识，再过一个月就毕业一年了，从最开始的什么都不会，也渐渐的开始能独当一面，汗水和收获总是并存着。

梳理一下最近半年的学习与积累，继续加油。

chrome extension

时光回溯半年，一份月左右的时候，大概是chrome插件项目刚刚告一段落的时候，其实具体哪些时间在忙着做插件已经不太记得了，但是看了下github的提交记录就知道了。。。

插件项目其实是个非常坑爹的项目，导致了11、12、01三个月空荡荡的提交记录，虽说我的github上其实大都放的是自己学习所做的demo。。。

一个人独立开发，菜到不行的PM，坑爹的后端，被坑了三个月。

虽说项目很坑，但还是学到了不少东西。

严格来说这里“插件”是指的业务上的“插件”，但是对于chrome浏览器来说，应该称为chrome extension，也就是chrome浏览器扩展。

从最初接到开发任务时一脸懵逼（chrome插件是个啥？），到第一版上线，只给了两个周的时间。。。还把开会的时间都给算进去了，不得不吐槽一下坑爹的PM。

花两天时间把chrome的文档、《chrome扩展及应用开发》给刷了一遍，做了几个小demo，算是整明白了chrome extension的结构：

• manifest.json作为配置文件（类似于npm包中的package.json文件？）。
• popup 部分是点击右上角的插件小图标的时候弹出层部分的代码，在弹出层显示时才初始化，弹出层消失时即被销毁。
• background部分是后台运行的脚本，从浏览器打开的一刻就在后台初始化了，只到浏览器关闭时才被销毁。
• content部分则是真正被注入进页面的脚步，用来完成操作页面上的DOM等等的一系列操作。

chrome extension 的开发其实并没有什么特别的难度，就是对于不熟悉的人来说会有很多坑，展开了估计可以写几千上万字的心得，这里就不多写了，等有空了整理一下，以免以后遗忘。

killbox

本来名字啥的都属于公司的内部机密，但是这只是一个绰号（杀死盒子？），应该没啥问题。。。

chrome 扩展项目告一段落之后好像轻松了一段时间？貌似也没轻松几天。。。

看了下周报，2月底左右正式结束了扩展的开发，开始学习react，本来其他人早就切到react去了，但是我还在用ng1写扩展，拼命补的节奏，刚学几天react，又被派去学rxjs然后做分享，顺便接手killbox的后续开发和维护。。。嗯，学得多进步也越多，这里要感谢领导。

killbox项目的技术栈大概包括 react + redux + rxjs，好像顺便也升级到了webpack2，当时对于react纯属小白，rxjs小白都算不上，连概念都不明白，redux也还是去年的ng1项目里用过一些，于是又进入了拼命加班学习的阶段。

这个项目里大概就是 react作为前端框架存在，rxjs用来管理数据流（向后端请求得来的数据），redux貌似也就提供了一下store。。。

rxjs -> redux/store -> react/props，rxjs 触发订阅之后，store.dispatch同步到redux的store上，然后store同步到react组件的props上，至于操作数据流，就是各种next（Subject.next())了。。。

这个项目接手的时候已经完成了大部分，主要是负责后续的新需求和维护，所以对于项目的构建其实学到的并不多，更多是对react和rxjs的使用有了更深的理解。

cnpm 私有仓库部署

其实之前刚刚毕业那会儿就部署过一次，不过那会儿连js都不怎么懂，其实就是赶鸭子上架，对很多东西都理解的不是很透彻，这次正好部署的架构需要调整，所以重新学习了一遍。

之前的私有仓库直接部署在我自己的开发服务器上，依赖包的各种信息直接存在本地的mysql里面，包文件也直接存在本地。

以前整这个玩意纯粹是因为采用外网的源太慢了，弄个内网的提提速爽一爽，所以也没啥稳定性要求，挂了就重启呗。

这次希望能在公司内网中管理内部的私有包，这就得保证稳定性了。。。。于是数据库找运维申请，包的存储采用minio自建对象存储服务，真正跑在自己的开发服务器上的只有个server而已，没有任何数据，可靠性大幅提升。

cnpm 官方提供了针对阿里云oss，七牛云等的插件，然而并没有提供针对minio的。。。所以需要自己写一个，一开始有点懵，仔细看了看，其实也就是针对minio提供的sdk进行二次开发，包装成符合cnpm要求的规范的方法就行了，不过单测看着有点麻烦，偷个懒没有写。。。官方的几个插件都是用generator模式写的，但是我对promise比较熟，所以。。。

https://github.com/xuxusheng/minio-cnpm

webpack

这个算自己的学习内容，webpack从实习那会儿被赶鸭子上架自己写loader来实现基于自定义属性的css-module功能，就一直在不断地学习，但是总感觉对有些东西，比如 publicPath，contentBase之类的东西还是理解的不够透彻，继续学习吧。

每次一个新项目，我都是重新手写一遍webpack的配置文件，貌似被领导吐槽过好几遍，这种简单东西还这么浪费时间干嘛。。。。不过我觉得多写几遍能加深理解。。。。

将项目中的 webpack 升级到了 2， 最让我眼前一亮的其实是2的文档，比起1的晦涩难懂不知道好了多少倍。。。

之前搞懂commonChunks就花了不时间，最近发现dll貌似更好，成功引入，有空写个心得~

redux

之前对redux的理解仅限于使用，最近通过几个项目的实践， 理解更透彻啦。

最近琢磨琢磨并引入了redux-devtools-extension，感觉吊炸天，比在控制台里面调试方便多了，不过唯一的遗憾是目前项目中actionType使用的是ts中的枚举类型，也就是说实际上是一个一个的数字，在logger中间件中使用actionTransformer经过了一次转换，最终打印输出的才是带含义的字符串，不知道redux-devtools-extension是否有类似的方法，抽空再看看文档。

rxjs

知乎上扣下来的截图，看来我已经荣升第四梯队了。。。。感谢领导栽培~

后端知识学习

后端相关的知识一直都是一个弱项，毕竟之前是搞硬件和网络出身的，相关知识有所欠缺，去年订的计划也是今年需要恶补一下后端方面的知识。

自己摸索加上请教后端同事，linux 用的比之前熟多了，一开始觉得ubuntu比centos好用，因为apt-get和ppa装软件爽的不行，后来发现还是centos比ubuntu好用，目前也还仅限于使用一些常用的命令啥的，高级点的功能还是不够熟悉，概念也还需要恶补，继续加油。

数据库也比较薄弱，恶补了一下sql语句，部署cnpm的时候反复敲了几十遍的命令，算是熟悉点了，还需要加强。

nginx 算是前端打交道比较多的东西了，最近也是恶补了一下：《nginx开发从入门到精通》http://tengine.taobao.org/book/，淘宝出品，这个还不错。

docker 又重新应用到了项目中，虽然仅仅是run了一个带nginx的容器做转发，感觉对于docker的使用还是停留在只能敲敲命令的地步，实际应用有所欠缺。

毕竟工作的主要内容还是前端，以上这些比较缺少实际项目的学习机会，需要自己平时多多积累。、

XXX 2.0

某某2.0正式开始开发， 领导要求狂拽酷炫吊炸天的动画和界面，于是前端就苦逼了，最令人无语的是，1.0做了一年，2.0 就给一个月。。。。

分到我手上的有两个页面模块，独立负责这两个页面的开发，于是又要开始自己架构干了，最后选定的还是采用react + redux + rxjs + antd的技术栈，图表啥的就用echarts，设计搞的各种不规则边框就用border-image来搞了，要说难度其实也没啥难度，就是一个熟练和堆代码。。。

感觉之前react + redux + rxjs配合的模式有点怪怪的，这次尝试了各种方法，期望能找个最佳实践出来，不过不管怎么写都感觉怪怪的。。。。

继续摸索吧。

---

说了一些大的知识点，其实零散的一些知识点也学到了很多，比如antd、d3、typescript、es6,7,8以及英文阅读能力等等，就不一一赘诉了。

看到刚毕业就会一大堆东西的人表示很羡慕，起步早就是好啊，之前学的硬件和网络方面的知识，现在在前端方面能起点作用的也就是锻炼出来的学习能力了。。。看到树莓派这种可以将硬件、网络和软件结合起来的东西瞬间感觉无比亲切。。。

到七月份就离开校园一年了，工资离过万都还差了一大截，估摸着可能赶上好点的应届生都有点够呛，想涨点工资比跳槽还难，无奈，继续加油吧。

与君共勉。