Clover周报模块 -- 开发总结

2014年7月8日 00:16:05

一、切图

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

Clover周报模块 -- 开发总结_第1张图片

二、布局

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

Clover周报模块 -- 开发总结_第2张图片

三、模式

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

Clover周报模块 -- 开发总结_第3张图片

四、模块

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

Clover周报模块 -- 开发总结_第4张图片

五、路由

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

Clover周报模块 -- 开发总结_第5张图片

六、数据

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

Clover周报模块 -- 开发总结_第6张图片

七、客户端

客户端使用node-webkit开发,详见使用node-webkit开发Clover桌面客户端的一些记录(一)

Clover周报模块 -- 开发总结_第7张图片

你可能感兴趣的:(over)