What the page building and js front-end have to say

　　

 

As a Weibo page construction engineer, he is mainly responsible for making static pages with html and css with high quality, ensuring that the project is completed on time. The js effect required by the page is handed over to the downstream js front-end engineers. In Weibo, the two posts are separated. However, in our mindset, we may feel that the two positions should be completed by one person. After all, the html structure written by PAGE building engineers is not necessarily what js engineers want, js engineers may have a more efficient way. Therefore, it is best to communicate with js engineers before page construction to determine the implementation scheme.

However, in the actual project process, when the page is built, the product manager may not have arranged js resources yet, at this time, we can only write the html structure according to the product requirements and our own ideas, not only taking into account the restoration degree of the design draft, browser compatibility, but also the foreseeable position of new functions that may be added in the future, we also need to consider how to write the html structure so that js can easily complete product interaction. As a responsible page builder, Alexander! Therefore, when we often look at the page source code, we will find such a comment to tell js engineers how to operate the dom structure.

　　

 

Sometimes we have to think about it for a long time to make it easier. For the London Olympics a while ago, a module on the right side of the Weibo homepage needs to be added to the Olympic gold medal list, and a button to collapse and expand is required, used to display different contents.

　　

 

This is a common Interaction Effect for websites. The specific html implementation may come up with two divs, each containing the expanded content and collapsed content. When you click the expand button, one is displayed and the other is hidden. When you click collapse, the opposite is done. This kind of thing itself is not right or wrong, it is good to achieve the effect. However, as a module that appears on the Weibo homepage and appears on the first screen, performance optimization is required. We should try our best to do it on the css layer and never put it on the js side. My solution is to write all the collapsed and expanded styles together, so that js will display turn_olympus m_on by default or click expand, and change it to turn_olympus m_off when click collapse, in this way, js only replaces the amount of code with a class name. For the expanded two buttons, I also display and hide the changed class name.

Specific html code:

　　

 

Put all the code used here together to hide a status that does not need to be displayed, for example, when the status is expanded, class = "show_less W_linecolor" div and expanded button class = "W_moredown" can be written on the outermost div without display:

　　

 

Css temporarily hides these two elements:

　　

 

When it is collapsed, the div of the outermost layer becomes:

　　

 

Css displays the hidden two elements, and hide the tr tag of four or five class = "no_45" in the ranking list, the class of the competition key = "show_more", and the collapsed button class = "W_moreup:

　　

 

In this way, you only need js to replace turn_olympus m_on with turn_olympus m_off when you click to collapse, and change turn_olympus m_off to turn_olympus m_on when you click to expand. The rest of the hidden display is done with css.

Summary:

It is our common goal to learn about upstream and downstream work, make upstream and downstream communication smoother, and improve work efficiency.

There are many challenges in page construction. Currently, html5 new tags, Apis supported by advanced browsers, and new and interesting attributes of css3... We need to learn, not to fully grasp, but to be familiar with and know what is going on. Applying new knowledge to actual projects is beneficial to the company and to the team ~

Yuan Fang, what do you think?

(For Original Weibo UDC blog posts, please indicate the source)