Clover weekly module-Development Summary

July 8, 2014 00:16:05

I. Cut the Graph

This development took a lot of time to cut the graph, and the style was usedscssI wrote it for the first time, but I found it powerful when I used it. Its level, scope, reuse, and so on are very convenient. Also, it's cool to use the koalas! However, it hurts to change the style. In the browser, we can see the CSS style, and then find the lines in CSS that are the first line of SCSs, with an extra turning point, the style of SCSs cannot be seen directly in the browser, which is slightly troublesome.

Ii. Layout

The entire weekly report page is implemented on an HTML page. Ajax is used to request various data and then displayed to different locations on the page. Because of God's FrameworkAvalonData processing becomes simple and intuitive, so I only need to deploy a simple and intuitive environment. I have considered using table layout, but it was rejected by the boss (the reason is: Old, low efficiency). Because of the layout, there are always small changes on the page, and one more column and one row are missing, so we didn't use percentages to calculate its width (including using calc), and we didn't want to set several Div sets to make the hierarchy extremely complex.-webkit-boxThis style is covered. However,-WebKit-box is also an unreliable style. The pitfall lies in that if there is content or other content, the content will be independent of itself, then all the tags with the-WebKit-box-Flex style are used to divide the space. This is a pitfall: A picture (the webpage is in the company, and a picture is taken back) then we will discard-WebKit-box and usedisplay:flex;This style is hard and won't be affected by the content!

Iii. Mode

UsedMVVMThis design mode completely simplifies Dom operations and facilitates interaction.

Iv. Modules

JSMVVMFrameworkAvalonIn addition to the left-side menu module that has always been included (my predecessor, JS, mainly used to navigate to each module, but does not have the "collapse menu" function such as WordPress ), all other content is done by myself. The main functions are "Weekly Report Writing" and "weekly report reading". The whole body is used as a VM object, and all data and methods are bound to this object (after writing, I felt that this was a little bad. A bloated object would put more pressure on the browser, but it was not good at communicating with different VM objects at the time, therefore, all the content is piled up together, and the coupling degree is high, which is not conducive to maintenance. You should pay attention to splitting the content for future development.) You can use the vro system to communicate with each other.canvasCharts.

V. Routing

Routing (router) The system is my divisionMVVMAnother new touch is that it is very powerful and practical to determine the content display by controlling the hash of the browser. The vro system allows you to access the correct content more conveniently, instead of finding the project location step by step on the home page, and does not need to be like PHP? The next step is to add a bunch of things to determine whether it is completely controlled by the front-end. If it is used, it cannot be so cool. However, there are also some small problems encountered in the development of practical routing, will summarize and write a blog post.

Vi. Data

The data here mainly involves various operations on the database in the background. I feel that the main problem is that this week and last week's weekly reports are stored separately. Originally, a weekly report should include the last week's completion and this week's plan, however, neither of the two can be written, but the content uploaded to the background is separate. Therefore, when we get to the "Weekly Report", there is often only half a weekly report (either this week or last week, or even last week. Next, let's talk about the data structure Problem in "view Weekly Report". The number of weeks obtained by the router and the ID of the current browser department are used to request the background, but the returned data is very large (nearly KB) it is very complex (7-to 8-dimensional arrays), and only takes it to a table such as time-department-project-Weekly Report-details. When the data structure is not simplified, sometimes the page loading speed (mainlyAvalonThe framework uses cyclic data to create DOM). It takes an astonishing 2 minutes to create a Dom. This makes the boss of us very uncomfortable. The background is busy with other tasks and can only be optimized by ourselves. We mainly use the new method foreach of the array in ecma5.0 (no longer need to write the for loop), first extract the time sheet, the large array is then simplified to a 3-dimensional array like Department-project-detail (only three-week weekly reports are displayed, and these three weeks are used as the properties of the Project week0, week1, and week2 ), remove the unused attributes in the original large array. In an instant, page loading can be completed within 10 seconds. The data structure is really a powerful tool. No wonder you have said that, algorithms and data structures are superior to everything. After nearly five weeks of development, I worked overtime for a month and finally went online before Monday. (The boss also took us to a teppon dinner. It was really nice ), in addition, the company submitted the weekly report in good condition, and the bosses also received high praise, and some pride came into being. However, I only made some key functions for writing and reading, but the statistics are still incomplete. I need to use Baidu's echart to display the chart, and there are bugs to be changed. The details should be optimized, some development gains also need to be sorted out, and the days to come will be full and full of challenges. But the happiest thing is that we don't have to work overtime, ouye!