JavaScript wrapping nodes to improve efficiency

Updated: February 20, 2010 10:43:49 Author:

Imitating jQuery and creating several wrapping nodes methods, I found that jQuery's method is very inefficient. Next time he can say that these methods can improve as much.

The principle is basically this: if the strings are passed in, then they become an element node. However, this element node can also have many layers, and the elements to be wrapped in the innermost layer. There are several ways to turn a string into an element node.
1. createElement, IE can create element attributes together, but can only create one layer.
2. innerHTML, but the original string needs to be processed. IE and FF have many unexpected default behaviors, which can add a little more or less for you.
3. createContextualFragment. Since Opera's behavior is a bit weird, you need to select the position of modifying the element. After testing by the Japanese, it is much more efficient to convert strings into nodes than innerHTML and much safer. The stronger the stronger the stronger the weaker the weaker. If it is an incoming element node, it needs to be cloned, otherwise it will all become wrapAll. If it is a function, pass the current element in and use some of its properties to create a wrapping element.
The initial experimental product (wrapOuter here is equivalent to jQuery wrap):

Copy the codeThe code is as follows:

 
var parseHTML = function(str) { 
if(){ 
var range = () 
() 
return (str) 
}else{ 
return (str) 
} 
} 
var wrapOuter = function(target,html){ 
var wrap = parseHTML(html) ; 
(wrap,target); 
(target) 
} 

") }

Target node

[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]

I found out some in Operaquestion, () must be changed to our target element. Furthermore, the method of inserting the wrapping element is changed from insertBefore to replaceChild to improve efficiency.

Copy the codeThe code is as follows:

var wrapOuter = function(target,html){ 
var wrap = html 
if((html) === "[object String]"){ 
if(){ 
var range=(); 
(target); 
wrap = (html).firstChild; 
}else { 
wrap = (str); 
} 
} 
(wrap,target); 
(target) 
}

") }

Target node

[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]

Copy the codeThe code is as follows:

 
//Add a parent element (wrap element) to each matching element.
wrap:function(html){//html can be an element node or an html fragment
var _wrap = function(target,html){ 
var wrap; 
if(is(html,"String")){ 
if(){ 
var range=(); 
(target); 
wrap = (html).firstChild; 
}else { 
wrap = (html); 
} 
}else if(){ 
wrap = (true) 
} 
(wrap,target); 
(target) 
} 
if(is(html,"Function")){ 
return (function(el,index){ 
_wrap(el, (el,index)); 
}); 
} 
return (function(el){ 
_wrap(el,html) 
}); 
}, 

Abstract the method of creating wrapping elements:

Copy the codeThe code is as follows:

 
var _parseHTML = function(el,html){ 
var wrap = html ; 
if(){ 
var range=(); 
(el); 
var wrap = (html).firstChild; 
(); 
return wrap; 
}else { 
return (html); 
} 
} 
//Add a parent element (wrap element) to each matching element.
wrap:function(html){//html can be an element node or an html fragment
var _wrap = function(target,html){ 
var wrap = html ; 
if(!){ 
wrap = dom._parseHTML(target,html); 
}else{ 
wrap = (true) 
} 
(wrap,target); 
(target,null) 
} 
if(is(html,"Function")){ 
return (function(el,index){ 
_wrap(el, (el,index)); 
}); 
} 
return (function(el){ 
_wrap(el,html) 
}); 
}, 
wrapInner:function(html){ 
var _wrap = function(target,html){ 
var wrap = html ; 
if(!){ 
wrap = dom._parseHTML(target,html); 
}else{ 
wrap = (true) 
} 
(wrap,); 
for(var i=1,n=;i<n;i++){ 
([i],null) 
} 
} 
if(is(html,"Function")){ 
return (function(el,index){ 
_wrap(el, (el,index)); 
}); 
} 
return (function(el){ 
_wrap(el,html) 
}); 
}, 
//Package all matching elements with one label
//Practice: add a parent element (wrap) on the first matching element, and then transfer all other matching elements to this parent element.
//wrapAll(html) wrapAll(elem) 
wrapAll:function(html){ 
var wrap = html; 
if(!) 
wrap = dom._parseHTML(this[0],html); 
this[0].(wrap,this[0]); 
return (function(el){ 
(el,null); 
}); 
}, 

arrivejQuery official websiteAfter a look, I found that the method of wrapping nodes has been upgraded. I can wrap many layers at a time, but mine can only wrap one layer at a time. So I decided to call my original parseHTML method, seehere。

Copy the codeThe code is as follows:

 
var wrap = function(html){//html can be an element node or an html fragment
var _wrap = function(target,html){ 
var wrap = html ; 
if(!){ 
if(){ 
var range=(); 
(target); 
wrap = (html).firstChild; 
}else{ 
wrap = (html,null,true).firstChild 
} 
}else{ 
wrap = (true) 
} 
(wrap,target); 
while (  &&  === 1 ) { 
wrap = ; 
} 
(target,null) 
} 
if(is(html,"Function")){ 
return (function(el,index){ 
_wrap(el, (el,index)); 
}); 
} 
return (function(el){ 
_wrap(el,html) 
}); 
} 
//Wrap each child node of the matching element with something
var wrapInner = function(html){ 
var _wrap = function(target,html){ 
var wrap = html ; 
if(!){ 
wrap = (html,null,true).firstChild 
}else{ 
wrap = (true) 
} 
(wrap,); 
while (  &&  === 1 ) { 
wrap = ; 
} 
for(var i=1,n=;i<n;i++){ 
([i],null) 
} 
} 
if(is(html,"Function")){ 
return (function(el,index){ 
_wrap(el, (el,index)); 
}); 
} 
return (function(el){ 
_wrap(el,html) 
}); 
} 
//Package all matching elements with one label
//Practice: add a parent element (wrap) on the first matching element, and then transfer all other matching elements to this parent element.
//wrapAll(html) wrapAll(elem) 
var wrapAll = function(html){ 
var wrap = html; 
if(!){ 
if(){ 
var range = (); 
(this[0]); 
wrap = (html).firstChild; 
}else{ 
wrap = (html,null,true).firstChild 
} 
} else{ 
wrap = (true) 
} 
this[0].(wrap,this[0]); 
while (  &&  === 1 ) { 
wrap = ; 
} 
return (function(el){ 
(el,null); 
}); 
} 

I found that there were many duplicate codes, and then abstract them. For outsiders, they were completely confused. I believe that jQuery was also obscure and difficult to understand step by step.

Copy the codeThe code is as follows:

 
(dom[fn],(function(){ 
var wrapHelper = function(target,html ){ 
var wrap = html ; 
if(!){ 
if(){ 
var range=(); 
(target); 
wrap = (html).firstChild; 
} else{ 
wrap = (html,null,true).firstChild 
} 
}else{ 
wrap = (true) 
} 
var insertor = wrap; 
while (  &&  === 1 ) { 
insertor = ; 
} 
return [wrap,insertor] 
} 
//Package all matching elements with one label
//Practice: add a parent element (wrap) on the first matching element, and then transfer all other matching elements to this parent element.
//wrapAll(html) wrapAll(elem) 
var wrapAll = function(html){ 
if ( ( html ) ) { 
return (function(el,index) { 
dom(this).wrapAll( (this, index)); 
}); 
} 
var arr = wrapHelper(this[0],html); 
var wrap = arr[0],insertor =arr[1]; 
this[0].(wrap,this[0]); 
return (function(el){ 
(el,null); 
}); 
} 
//Add a parent element (wrap element) to each matching element.
var wrap= function( html ) { 
return (function() { 
dom( this ).wrapAll( html ); 
}); 
} 
//Wrap each child node of the matching element with something
var wrapInner = function(html){ 
var _wrap = function(target,html){ 
var arr = wrapHelper(target,html); 
var wrap = arr[0],insertor =arr[1]; 
(wrap,); 
for(var i=1,n=;i<n;i++){ 
([i],null) 
} 
} 
if(is(html,"Function")){ 
return (function(el,index){ 
_wrap(el, (el,index)); 
}); 
} 
return (function(el){ 
_wrap(el,html) 
}); 
} 
return { 
wrapAll:wrapAll, 
wrap:wrap, 
wrapInner:wrapInner 
} 
})()); 

Let’s talk about the unwrap method later!