as micro-blog’s page construction engineer, the main responsibility is to use html&, CSS, high-quality completion of the production of static pages, to ensure that the project completed on time. The JS effect required by the page is given to the downstream JS front-end engineer. At micro-blog, the two posts are separate. But in everyone’s thinking may think this two jobs should be a person to complete the best, after all, the page HTML construction engineers to write is not the JS engineers want JS engineers may have a more efficient way. So, before you build a page, you’d better communicate with the JS engineer and determine the implementation plan.
but in the actual project process, when to build the page, the product manager may not arrange to JS resources, then we can according to the demand for products and their ideas to write HTML structure, should not only consider the predicted position of the new function of the reduction degree, browser compatibility, the design may be added the structure also considers how to write HTML to make JS the most convenient to complete the interactive effect of products. As a responsible page building engineer, says Alexander, so when we check the page source regularly, we’ll find such annotations that tell the JS engineer how to operate the DOM structure.
sometimes in order to achieve the most simple, we have to take a long time, a while ago, the London Olympic Games, micro-blog home page on the right to add a gold medal list module, has stowed and deployed the button to display different content.
on the web site for this is a very sloppy ordinary interaction effect. Specific HTML implementation, there may be students will think of, do two div, each contains the content of the expansion and the contents of the collection. When you click the "expand" button, one appears and the other is hidden. Instead, you do the opposite when you click. This kind of thing itself is neither right nor wrong, can achieve effect is good. But as a module that appears on micro-blog’s home page and appears in the first screen location, the optimization of performance must be sufficient. Try to do it on our CSS layer and never put it on the JS side. My way is to start up style are written, together, let JS show turn_olym_on in default or click start, click away when the replacement for turn_olym_off, the amount of code so that JS is just replacing a class name, and for the two button start up, I’m through replace the class name to show and hide.
specific HTML code:
put all of them here