Home > Developer > Web Develop
Front-end person = artwork + Design + code + Test
--Preface
Featured Articles:
First, from the avalonjs of the template talk about
Second, the huge Angularjs
Third, don't want to touch DOM again
Iv. Modular? Is there a back-end thing?
V. Look at the miniature rendering engine I designed a year ago
Six, the browser standard on the fuss
Seven, throw away the browser, build application container
Eight, why flash, Silver and Java are on the web end of the
This article belongs to the West Wind getaway original, reproduced please indicate the source: West Wind World http://blog.csdn.net/xfxyy_sxfancy
Third, don't want to touch DOM againI can only say that DOM operations are dangerous in complex applications.
If you are writing a website, you write down a section of HTML:
<! DOCTYPE html><html><head> <title>Test</title></head><body> <H1>Welcome</H1> <div class="Left"> <ul> <li><a href="#">Login</a></li>...</ul> </div> <div class="Content">...</div></body></html>You thought the code would work well, but that's not the case, because your colleague added such a part to the code:
$(‘.left a‘).click(...)
The reason is because he also wants to give him the responsibility of the page, the following code adds special processing:
<! DOCTYPE html><html><head> <title>Test2</title></head><body> <div class="Left"> <a href="#">Ajax Updates</a> </div></body></html>Oh, enough, you'll find that DOM operations must always be aware, first, to correctly select the corresponding element, and second, to be careful not to affect the work of others.
In addition, you will find the more tragic things, if your code is all written by yourself, so good, but if the introduction of the third-party library, you do not know, this library will change the DOM tree into what it looks like.
Dom is slow, we should try our best to reduce bad DOM operations, such as rebuilding the DOM in large batches, or when updating the DOM, and rebuilding the invariant nodes.
Avoid the trouble of DomThe simplest way to avoid manual dom manipulation is to use the front-end templates as much as possible, which often makes DOM operations change into templates or components. You will find that the corresponding DOM operation is automatically implemented and is effectively scoped to the specified scope.
So we went to see, rarely found that Angularjs will appear several people or libraries to modify the same DOM, because the DOM operation is inline, not directly exposed to the user. The model modification and reference library are well encapsulated and do not affect other parts.
But the front-end template is not omnipotent, for a number of reasons, such as the introduction of a jquery library, you can hardly find the same role as his ANGULARJS version, then you can only consider using.
Using Virtual DOM TechnologyReactjs is a very innovative technology that has made the front-end view display a new height.
First react is not a frame, he is just a view layer, but the function of this view layer is really bad. When you use react, you don't have to worry about the way you implement the interface effect, but you only need to focus on each picture.
So what you need to do is tell react what the effect you are going to render:
render: function() { <header> <div>this.state.name</div> : null } </header>;}
If you've used innerHTML before, you should be aware that when you update HTML, all of the DOM nodes are rebuilt, and then all the event bindings disappear and the experience is very poor. And Reactjs, precisely provides a smart version of the innerHTML, intelligent analysis of the part you change.
Another benefit of react is that you can render it on the server, because react only focuses on the interface and the data, and on the server, you can get the same output, which avoids a lot of problems with the search engine optimization.
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Gossip JS front-end FRAME (3)-Don't want to touch DOM again
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
