SoFunction
Updated on 2025-04-13

Thoughts caused by a piece of code in javascript


From the perspective of project work, it is best not to change it, because you don’t know the original author’s idea and it is easy to expand the problem.
It's not impossible to change the source code, but there is no way. If you can find other good solutions, it's best not to change it.
(In fact, there is no problem with Ext, but I was confused about some concepts when using it in reference to the API)
If you don’t change the source code, you can only find other good solutions. Use it to see:
var tpl = new ('<div >this is div{id}</div>');
//('div1',{id:'2'});
//('div2',{id:'3'});
($('div1'),({id:'2'}));
($('div1'),({id:'3'}));
result:
<div >this is div88</div>
<div >this is div2</div>
<div >this is div3</div>
The problem was solved............
Reflection: Why?
Look at the code (Narration: The problem becomes deeper and deeper)
line:4042 (ver 1.6.0.2)
var Insertion = {
Before: function(element, content) {
return (element, {before:content});
},
Top: function(element, content) {
return (element, {top:content});
},
Bottom: function(element, content) {
return (element, {bottom:content});
},
After: function(element, content) {
return (element, {after:content});
}
};
Let's watch:line:1616
insert: function(element, insertions) {
element = $(element);
...............................
for (var position in insertions) {
content = insertions[position];
position = ();
insert = Element._insertionTranslations[position];
..............................
return element;
}
Let's watch:line:2490
Element._insertionTranslations = {
before: function(element, node) {
(node, element);
},
top: function(element, node) {
(node, );
},
bottom: function(element, node) {
(node);
},
after: function(element, node) {
(node, );
},
.............
};
I can see the difference:
Ext:
El. insertAdjacentHTML
Prototype:

Protoype is used to consider compatibility issues. Mozilla does not support El. insertAdjacentHTML, so difficult to Ext do not consider it? (Narrator: The idea is completely confused, and I gradually move towards the abyss of lost paths)
Recalling the code: line:267
insertHtml : function(where, el, html){
......
switch(where){
case "beforebegin":
('BeforeBegin', html);
return ;
case "afterbegin":
('AfterBegin', html);
return ;
case "beforeend":
('BeforeEnd', html);
return ;
case "afterend":
('AfterEnd', html);
return ;
}
throw 'Illegal insertion point -> "' + where + '"';
}
var range = ();
var frag;
switch(where){
case "beforebegin":
(el);
frag = (html);
(frag, el);
return ;
case "afterbegin":
if(){
();
frag = (html);
(frag, );
return ;
}else{
= html;
return ;
}
case "beforeend":
if(){
();
frag = (html);
(frag);
return ;
}else{
= html;
return ;
}
case "afterend":
(el);
frag = (html);
(frag, );
return ;
}
throw 'Illegal insertion point -> "' + where + '"';
}
It can be seen from the second part (the second switch block), Ext also considered it, but if it is ie, the code will not go to the second part.
Now list the correspondence between the case branch and the previous method name:
insertFirst:' afterBegin'
insertBefore:' beforeBegin'
insertAfter:' afterEnd'
append:' beforeEnd'
Compared with the above code, it seems that the problem is that I am confusing append and insertAfter. I think append means adding a node directly behind the current node, and insertAfter means inserting the node behind the current node. In fact, if this is understood, append and insertAfter have the same function. So why do Ext author write two methods? Oh, I am crazy and use it randomly without carefully analyzing the code, which leads to this long list of things.
Excerpt: Instructions on append and insertAfter methods
Applies the supplied values to the template and appends the new node(s) to el
Applies the supplied values to the template and inserts the new node(s) after el
Tip: For those who don’t understand, please understand the first sentence to in. Is it much clearer to understand it? In addition, if you operate on page elements, please use Element, and the insert and append functions above have them.
If you put a lot of effort into the wrong direction, the final result will be zero!
well,
There is nothing wrong in the world, and mediocre people disturb them.