Indispensable knowledge for Advanced Front-end development

Single-page applications are very popular nowadays, especially for Mobile front-end development. Applications made from web pages can achieve the same effect as Java, C ++, and other development applications. Web-based systems have inherent cross-platform advantages, making front-end development more and more important. A single-page application bears the brunt of making native applications on the mobile end. However, a single-page application has an important knowledge point, that is, the asynchronous process is too obvious. You think, a lot of style operations, the event state can only be performed after the DOM node is drawn. How can we determine that when we operate a DOM node, it already exists on the page. In the past, we used a timer to set a time. For example:

VaR element = document. createelement ('svg '); // a large amount of document data //..... document. body. appendchild (element); setTimeout (function () {element. style. background = ''; // other operations on the element}, 1000 );

In this way, there is usually no problem, especially on the PC, even if you set a lower latency, you may not see the problem, but once on a mobile phone or tablet, you will find that, if the delay you set is relatively small, the subsequent node operations may report errors such as undefined without the style attribute. If it is set to a large value, the operation response will become very late. Is there a way to notify us of the next step after the node is drawn? Of course, there are some changes in some advanced versions of modern browsers. In addition, some advanced browser versions also implement mutationobserver. So we can solve the problem above. The following is a plug-in I wrote:

/*** When the content of the monitored node changes, the specified callback * @ Param opts {* container: parent container, DOM object or jquery object * content: the content of the parent container to be added. The string or jquery object * position: the position where the content is inserted into the parent container. 'first' indicates that the content is added before. The default value is * Delay: latency, default 0 *} * @ version 1.02 * @ author [author] bjtqti * @ return {[type]} [description] */xut. nexttick = new function () {var Doc = Document, mutationobserver = Window. mutationobserver | window. webkitmutationobserver | window. mozmutationobserv Er; function nexttick (OPTs, callback) {var Container = opts. container, content = opts. content, delay = opts. delay | 0, position = opts. position, animatid = 'T' + (math. random () * 10000 <1), tick = Doc. createelement ('input'), observer = NULL; If (! Container |! Content) {return;} // check the container --- $ (container) to convert the DOM object if (typeof container === 'object' & container. selector! = Undefined) {Container = container [0];} If (container. nodetype! = 1) {console. log ('iner iner must be htmllielement'); return;} // mark the task tick. setattribute ('value', animatid); // check the content if (typeof content = 'string') {var temp = $ (content); If (! Temp [0]) {// plain text content temp = Doc. createtextnode (content); temp = $ (temp);} content = temp;} // assemble the content to the temporary part function _ createfragment () {var frag = Doc. createdocumentfragment (), Len = content. length; For (VAR I = 0; I <Len; I ++) {frag. appendchild (content [I]);} return frag;} // Add the content to the parent container function _ appendchild () {// splice content = _ createfragment (); content. appendchild (tick); // determine the insert position if (position = 'first ') {container. insertbefore (content, container. firstchild);} else {container. appendchild (content);} // trigger change event tick. setattribute ('value', animatid);} // After the task is processed, & event function _ finishtask (event) {if(event.tar get. value === animatid) {container. removeeventlistener ('domnoderemoved', _ finishtask, false); callback () ;}// post-processing of completed tasks & observer function _ completetask () {iner. removechild (tick); callback ();} If (mutationobserver) {observer = new mutationobserver (function (mutations) {mutations. foreach (function (record) {If (record. oldvalue === animatid) {_ completetask (); Observer = NULL ;}}) ;}; // you can specify the listener attribute observer. observe (tick, {attributes: True, // childlist: True, attributeoldvalue: True, attributefilter: ["value"] // only listen on the Value Attribute to improve performance }); _ appendchild ();} else {// checks whether Dom change events are supported if (Doc. implementation. hasfeature ("mutationevents", "2.0") {container. addeventlistener ('domnoderemoved', _ finishtask, false); _ appendchild (); container. removechild (tick);} else {// sorry for android2.xx processing _ appendchild (); setTimeout (function () {_ completetask () ;}, delay );}}} return nexttick ;}

Are all functions that have been practiced in the project. Take it away if it is useful. The explanation of these advanced events has already been written in detail by our predecessors in the blog Park. If you have any idea about it, You must rely on your own Baidu or Google.