寒假比赛总结(八) - 比赛总结

前言

到今天(2018-03-01)20点,为期一个多月的寒假比赛就结束了。按照惯例,每次比赛结束都写一些总结,把比赛过程中学到了什么、有哪些地方做得好的、哪些地方没做好的都记录一下。也可以当作反思。在比赛中吸取经验,这样会成长得更快。

学到了什么

  • 规范的操作

无论做什么事情,规范是必需遵守的。在比赛时,为了更好地与后端进行合作,我从前端页面的角度制定了一篇文档,在上面详细描述了每个页面所需接口的字段名、方法等等。(这篇文档目前还在:http://docs.lenconda.top/petlog/)

在实际的操作中,我前端这边是严格按照文档规定的格式编写调用后端接口的逻辑。然而,后端似乎并没有认真按照这篇文档的规范进行编写:很多接口都是规定GET方法,后端却只允许POST方法;有很多接口的字段存在拼写错误(avatar拼成avater、字段名中少了s或多了s、follow漏了ed(原本是followed)等等),给前后端对接交互造成很大的麻烦,也浪费了很多时间(我们从2月26日开始对接,到2月28日修改完Bug进入预备阶段,前后花了两天的时间),而且后端接口初次测试十有八九都是500,这些500中肯定有很多是没有遵守规范造成的。这件事给我很深的感触,我认为前后端分离的开发模式下,规范一定是要严格遵守的东西。但是就我这次和两位后端的合作过程来看,家园的研发培训时并没有强调规范的重要性,或者说家园研发的新生并没有很强的规范意识,这种现象导致的后果就是严重拉低合作的效率。希望家园的学长们能够重视起这个问题。

  • 善于利用他人造的轮子,以及自己造轮子

这个项目有几个比较麻烦的组件:滑动组件和图片双击放大预览组件和日历组件。因为时间有限,自己造轮子真的很费时,而且网上有现成的成熟的轮子,稍加改动就能使用了,所以我能使用别人的轮子尽量使用,尽管在开发的时候我也有过把多个别人的轮子拼起来造出一个新轮子的骚操作。

但是自己也要尝试造一些轮子,毕竟自己动手丰衣足食嘛。

做得好的地方

  • 使用CSS预编译器

以往的项目编写中,无论是组件内的CSS还是全局CSS,我都没有使用任何CSS预编译器,完全是纯CSS编写。这就会导致CSS结构混乱、可读性差、维护困难、容易出错等缺点。顺便贴一张上次Hackweek时的一段CSS代码:

http://lenconda.top/images/18030101.png

按理来说编写CSS是一级一级选择下去的,我以前为了省事,就只从父级开始选择,要么就直接选择。这样的代码很不美观,而且经常弄混,效率不高。所以这次我使用了Less作为CSS预编译器。效果如下图:

http://lenconda.top/images/18030102.png

这样一来CSS的结构和HTML的结构契合,十分清晰,也很美观,不容易弄混。唯一遗憾的地方是没有将Less的强大发挥得淋漓尽致,因为我没有使用Mixins和变量定义。因为设计那边给的稿子中颜色太多,光灰色就会有5、6种,我认为这种情况下再定义变量会适得其反。

  • 合理使用Flexbox布局

Flexbox是一种非常优秀的布局方式,而且目前主流的浏览器都已经能很完美支持这种布局,所以在比赛中我可以放心使用Flexbox布局。

之所以要采用这种方式进行布局,是因为设计稿中有很多一字排列的类似于inlline-block的元素,我刚开始确实是采用inline-block,但是发现这种方式很难控制,而且在不同的移动端分辨率大小下的比表现也十分不出色;Float布局对DOM的影响又非常大,而Absolute的Position定位布局又很死板,所以我想到Flexbox布局。于是就十分轻松地解决了垂直居中、奇数等分的问题。

  • 使用转场动画

利用Vuejs的transition组件实现转场动画,但是由于第一次使用,对其中某些特性了解的不是很全面,所以做出来的最终效果困难不尽如人意。但是有一个好的开端总是很棒的。

做得不好的地方

  • 标签没有语义化

标签语义化越来越受重视。这个趋势我也有注意到,但是在写项目的时候就是忍不住地上div、span,在这次比赛项目的代码中又出现了div、span滥用的现象,很多页面只有少数举个button、i等标签,甚至个别页面只存在div和span。所以我希望以后我能注意一点,尽量使用有语义的标签。

  • 首屏优化不到位

Vue项目首屏慢的问题确实困扰了我好久,这次我稍微做了一些优化,还是不到位。因为我在下面中引入了一个UI组件库,库比较大,所以加载CSS和JS都很慢。后续优化我打算按需引入组件,这样可以稍微减少JS和CSS的体积。还有图片的压缩处理也要注意。

emmmmm能想到的暂时就是这些,如果还有的话就慢慢补充吧。

将最新的文章发送到你的邮箱

展示评论