Clover周报模块 -- 开发总结

2014年7月8日 00:16:05

一、切图

这次开发，切图花了不少时间，样式是用scss写的，第一次用，不过用着用着就发现它的强大，层级、作用域、重用等都非常的方便，还有考拉神器，用着真是爽！不过，改起样式来就蛋疼了，通过浏览器看到的是css样式，然后从css里找到它是scss的第几行，多了一层转折，不能通过浏览器直接看到scss的样式，略感麻烦。

二、布局

整个周报页面是在一张HTML页面上实现的，用Ajax请求各种数据，然后展现到页面的不同位置。因为神框架Avalon的存在，数据的处理变得简单、直观，所以我只需要布一个简单、直观的局就行了。曾考虑过用表格布局，不过直接被老大否掉了（原因：古老，效率低）；因为布局时，页面总有小改动，多一列少一行的，所以就没有去用百分比计算它的宽度（包括用calc），也不想套好几个div把层级弄的无比复杂，最后采用的-webkit-box这个样式来布的局。但，-webkit-box也是一个不靠谱的样式，坑爹之处在于如果一个有内容，其他没内容，内容会自己独立出来，然后所有有-webkit-box-flex样式的标签来瓜分空间，如图这种坑爹的情况：一张图（网页在公司，回头截个图）然后就果断抛弃-webkit-box，用display:flex;来布的局，这个样式硬，不会受内容影响，就它了！

三、模式

使用的MVVM这种设计模式，完全简化DOM操作，交互更加便利。

四、模块

js用的MVVM框架Avalon，除了一直都带的左侧菜单模块（我的前任JS做的，主要用来导航到各个模块，但是没有WordPress这种“收起菜单”的功能），其他内容都由我一个人完成。主要功能分为“写周报”和“看周报”，将整个body作为一个vm对象，所有数据和方法都绑定在这个对象上（写完之后，感觉这么做有些不太好，一个臃肿的对象，会给浏览器带来更大的处理压力，但当时对于不同vm对象间的通信掌握并不好，所以所有内容全堆在一起了，耦合度高，不利于维护，之后的开发要注意拆分），利用路由器系统进行通信，后期还会加入canvas图表。

五、路由

路由（router）系统是我除MVVM外又一个新接触的东西，通过控制浏览器hash来判断内容的展示，灰常强大与实用。利用路由器系统可以更加便利的进入到正确的内容中，而不是只能从主页面一步一步找到项目所在的位置，也不用像PHP一样？后面加一堆东西来判断，完全由前端控制，用得能不能不要这么爽，不过也有一些开发中实用路由遇到的小问题，会总结一下写一篇博文出来。

六、数据

数据这里，主要由后台进行数据库的各种操作，感觉主要问题在于本周和上周周报的分开存储，本来一个周报需要包含上周完成和本周计划，但这两者都可以不写东西，而传到后台的内容都是分开的，所以到了“看周报”那里经常出现一个周报只有半份（有本周没上周，或有上周没本周）这种状态，非常蛋疼。然后说一下“看周报”这里的数据结构问题，通过路由器获取的周数和当前浏览部门的id来请求后台，但返回的数据很大（将近200kb）很复杂（7维到8维数组），而只将其到一个时间-部门-项目-周报-细节这样的表格里，在没有简化数据结构时，有时页面的加载的速度（主要是Avalon框架循环数据来创建DOM）会打到惊人的2分钟，让我们老大的老大感到灰常不爽，而后台奈落大汉在忙别的，只能自己优化了。主要通过ECMA5.0中数组的新方法forEach（再也不用写for循环了），首先将时间单摘出来，然后将大数组简化为部门-项目-细节这样的3维数组（只展示3周周报，将这三周作为项目的属性week0，week1，week2），去除原先大数组中那一堆个用不到的属性，瞬间，页面的加载10秒内就能完成，数据结构真是利器啊，难怪大牛们都说，算法、数据结构优于一切，终于切身的体会到了。经过将近5周的开发，一个月的辛苦加班，终于在这周一之前上线了（老大还带我们去吃了铁板烧大餐，真是爽啊），而且公司提交周报的情况不错，大佬们也都发出好评，一些自豪感油然而生。不过只把写和看的一些关键功能做出来了，还差统计这里没有完成，需要用到百度的Echart来展示图表，而且还有bug要改，细节要优化，一些开发中的收获也需要整理，未来的日子依旧充实，充满挑战，不过最开心的还是终于不用加班了，欧耶！

七、客户端

客户端使用node-webkit开发，详见使用node-webkit开发Clover桌面客户端的一些记录（一）。