萝三画室

201709月记

这里是2017年09月的月季(记。本月收获不小:工作上完成了商品房签约平台的雏形,作为演示DEMO。虽然是没有具体需求都是凭着自己的理解去做,但是给业内人士演示的时候他们表示基本的功能和思路是正确的。从项目中总结的经验技巧已经开了一个系列在写,现在还没写完。然后还帮同事大哥解决了一些JS的问题,虽然问题不难,但是也是很有成就感的呀T^T。学习上,系统的看了webpack和chrome调试大全,开始开node…毕竟有了JS和ES6的基础,理解起来不是很困难,但是对后端不了解,整体上的有些概念还是不清楚。生活上,将近一个月没有系统的运动,每周只运动一天导致体能下降,下个月不能这样了,然后解锁了手工土豆泥、蜂蜜鸡翅、饺子、慕斯蛋糕和月饼,麻麻表示她很有口福,我表示很羡慕她有个心灵手巧又美丽的女儿hiahiahia

工作

这个月的主要任务是把商品房网签系统的雏形做完。

这个小项目是四个人来做的,一个做后端小姐姐,一个做安卓的小哥,我和另一个小姐姐负责前端。项目要求PC端和APP都要有。

本来开始的时候,他们是打算用MVC写PC端,然后原生开发一个安卓APP出来。因为在我之前,没有专职做JS、做前端的程序猿,以前的B/S项目都是后端大哥用MVC来写的,没有做过前后端分离的尝试。

因为这个项目需要多端的产品形式,并且尽量快速的搭建一个雏形出来,我便提议用MVVM的vue,做前后端分离,这样可以让我们两组人专注于自己的部分分开来做,并且无需另外开发原生APP,减少很多工作量。刚开始的时候他们是有些怀疑的,因为他们习惯了MVC,并没有听说过VUE。后来我把自己做的网易云音乐给他们看,并且将发布、打包APP的流程都走了一遍,才说服了他们。

于是我们就明确了分工,安卓小哥和后端姐姐写服务,剩下的我俩做前端。我们前端这边在开始的时候,确定了采用vue-cli、vue-router、element UI、less的技术路线。这样组件式的开发,可以让目标更清晰,调试和集成起来也更方便。再后来遇到多个组件共享状态的问题,通过props或router传参都显得麻烦且乱时,我才启用了vuex(在这之前我并没有用过它。

然后一路coding下去,基本上没遇见过大的问题。
掌握:

  • 因为涉及到移动端适配,所以学到了一些移动端的小知识,如媒体查询、viewport等
  • 掌握了路由懒加载、vuex的用法
  • 使用less,使用到了一些基础的语法,但还有很多没有尝试
  • 尽量用ES6的语法,形成习惯
  • 从代码角度考虑了更多的问题,包括解耦、易复用、可维护等

不足:

  • 后端服务没写完,因此前端很多功能用的是自己的”假数据”
  • 没有考虑安全性的问题
  • 只针对演示机做了移动端适配,并没有考虑到所有移动端。

心得:

  • 官方文档真的很重要,可能你遇见的80%的问题,在文档中都有说明。但其实在没有实践直接看文档的情况下,是很难将文档吃透并且知道问题的解决办法的。所以希望的只是养成个条件反射,遇到问题先查回去查查文档。
  • 采用一个技术路线做过一遍,下一次再做的时候就会通畅很多。因为我之前自己用vue cli做过网易云音乐的仿站,过程中进度并不快,而且会遇见千奇百怪的问题。在这之后做第二个完整是vue cli项目时,思路就特别清晰,进度也很快,遇见问题一般也知道如何解决。所以经验真是个好东西呀。然而所谓的经验,其实也就是不断踩坑的过程。所以不要害怕出现问题
    ,出现问题就解决它,并且明白为什么出现问题,于是下一次就有经验辣。

最后私心放个产品DEMO图:
demo

学习

这个月系统的看了webpack和chrome调试大全,并开始看node.js。

  1. webpack官方文档确实不大友好,我是找了看一些博客包括阮一峰的,对webpack有个大致的概念。然后对着vue-cli的项目结构,看了下它的用法。目前大概可以简单的使用webpack了!
  2. 之前我用chrome还是停留在断点、审查元素、console等一些很基础的工具上面。这次关注的是页面性能,去看了performance和Memory的使用方法(老版本叫做timeline和profiles)。简单的说,performance可以绘制关于FPS、CPU、网络、内存的时序图,可以大致定位需要优化的地方。如果说performance是大致定位,那Memory就可以实现精确打击了。它可以获取某个时间点上的内存快照,通过单个快照的查看以及多个快照见对比,我们可以直接分析问题所在。这两个工具具体使用方法这里就不展开了。
    在商品房网签平台使用performance我发现了一个奇怪的现象:执行完全相同的操作,用公司电脑纪录和调试,发现Performance是这样婶儿的:
    per
    看那一条条红色的FPS,我开始怀疑人生了。红色说明那段时间的FPS低于正常水平,很可能是哪里需要优化。问题是,这需要优化的地方也太多了吧!看起来似乎需要优化的地方比不需要优化的地方都多!此刻我是泪流满面的。but擦干泪(并没有,我的直觉告诉我事实不应该是这样。于是我用自己的笔记本测了一下发型:通篇只有两个很小的地方出现了红色标记。于是我想起来,公司的电脑是没有独显的(对你没看错,我的笔记本是游戏本,显卡是比较不错的。于是这个故事告诉我们,performance中单一通过FPS红色标识判断优化点是不科学的,它可能受电脑显卡、CPU影响很大,需要结合其他要素一起分析。
  3. node.js是才开始看的,学习它的原因嘛,一个是因为JS可以用在后端,那就想看看是怎么个用法;再一个是因为学会了的话自己搭服务器发服务,自己前端的研发进度不必受制于后端(这也算是做商品房网签平台的心得之一吧。因为是次啊开始看,进度有些慢,所以没有什么可以总结分享的东西。期待以后也写个node系列!

生活

首先是,运动减少导致体能下降,可预见还会带来体重增加维度增加等一些列连锁反应。十一结束要开始恢复规律运动了!现在的天气挺适合跑步的,可能以后会变成一天HIT一天5公里,emmm总之加油!运动使我快乐!

然后是解锁了一些烹饪技能kekeke

  • 香煎蜂蜜鸡胸/烤鸡翅
    鸡胸可是健身好伙伴呀,只是很容易变柴。后来看微博推荐说,腌制的时候加些蜂蜜可以改善,我就试了下,果然不柴!有时候鸡胸吃腻了就会烤个鸡翅来吃,不放油,鸡翅本身就有很多油,香滋滋。
  • 青椒猪肉馅饺子
    其实饺子馅并不难调,只是用没开刃的刀把青椒切成小丁真的是一件苦差事T^T。面也是好和的,随时注意手感就好。后来面多了,就用多出来的面做了两张葱油饼,美中不足是饼里忘了放盐……
  • 土豆泥
    自己做了才发现土豆泥做起来如此简单,就蒸熟,加黄油,加牛奶,加沙拉,加盐,加黑胡椒,然后搅匀。over。夹在切片中当早餐中不能更美味了,吸溜。
  • 牛奶慕斯蛋糕
    也是巨简单的蛋糕,饼干碎+黄油做底,奶油打发,鱼胶片+黄油+牛奶加热至液体,冷却后与打发的奶油混合就是糕体了。然后冷藏就好。这次有些失败的,鱼胶片加少了,并且因为带出去给基友,糕体在公交车上的暖风中融化了,后来又冷藏,但是质感已经步入从前了T^T
  • 月饼
    月饼好简单…买了三种月饼材料,一种是现成的广式皮和馅,按客数分好分量,包起来—磨具压平就好。另一种冰皮月饼,用各种粉自己做皮,馅可以买现成的或者自己蒸紫薯红薯。最后一种老式还没尝试。

放图时间到:
food

突然发现自己前面居然讲起了菜谱,美食的力量真是emmm。

2017年的9月份就是这样啦,希望下个月也有很多进步~

好好工作,好好学习,好好生活

——愿你也是——