javascript 一段代碼引發(fā)的思考第1/2頁

2019-11-21 01:29:46

字體：大中小

供稿：網(wǎng)友

在2008年的最后一天,在此祝愿大家元旦快樂!!!
鄭重聲明:此問題根本不是問題,現(xiàn)在看來就是本人知識匱乏,庸人自擾,望廣大朋友勿噴!!
細(xì)心發(fā)現(xiàn)問題,耐心解決問題,信心面對問題.
作者:白某人
長話短說:”服務(wù)員,上代碼....”
測試代碼:

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

以下是在IE下的測試.我所期望的結(jié)果是(旁白:我已經(jīng)開始犯錯了):
<div id="div88">this is div88</div>
<div id="div2">this is div2</div>
<div id="div3">this is div3</div>
實際結(jié)果:
<div id="div88">this is div88</div>
問題:
Div2,div3 丟了?
發(fā)現(xiàn)問題怎么辦?看代碼.
Template.js line:197 (Extjs ver 2.2)
append : function(el, values, returnElement){
return this.doInsert('beforeEnd', el, values, returnElement);
}
在看 line201:
doInsert : function(where, el, values, returnEl){
el = Ext.getDom(el);
var newNode = Ext.DomHelper.insertHtml(where, el, this.applyTemplate(values));
return returnEl ? Ext.get(newNode, true) : newNode;
}
在在看:DomHelper.js line:267
insertHtml : function(where, el, html){
where = where.toLowerCase();
if(el.insertAdjacentHTML){
if(tableRe.test(el.tagName)){
var rs;
if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
return rs;
}
}
switch(where){
case "beforebegin":
el.insertAdjacentHTML('BeforeBegin', html);
return el.previousSibling;
case "afterbegin":
el.insertAdjacentHTML('AfterBegin', html);
return el.firstChild;
case "beforeend":
el.insertAdjacentHTML('BeforeEnd', html);
return el.lastChild;
case "afterend":
el.insertAdjacentHTML('AfterEnd', html);
return el.nextSibling;
}
throw 'Illegal insertion point -> "' + where + '"';
}
//////后面省略
}
原來還是用的insertAdjacentHTML方法,為什么會有問題呢?
輸出中間代碼:
var tpl = new Ext.Template('<div id="div{id}">this is div{id}</div>');
tpl.append('div1',{id:'2'});
tpl.insertAfter('div2',{id:'3'});
$("result-area").innerText = Ext.getDom("div1").innerHTML;
//.........
結(jié)果如下:
this is div1
<DIV id=div2>this is div2</DIV>
<DIV id=div3>this is div3</DIV>
?????? 為什么會這樣? “this is div1”兩邊的<div>標(biāo)簽?zāi)?
在測試:
var tpl = new Ext.Template('<div id="div{id}">this is div{id}</div>');
tpl.append('div1',{id:'2'});
tpl.insertAfter('div2',{id:'3'});
$("result-area").innerText = Ext.getDom("div1").outerHTML;
//.........
結(jié)果如下:
<DIV id=div1>
this is div1
<DIV id=div2>this is div2</DIV>
<DIV id=div3>this is div3</DIV>
</DIV>
(旁白:本來到這就已經(jīng)能發(fā)現(xiàn)問題所在了,但執(zhí)迷不悟,繼續(xù)犯錯)
原來它把div2,div3插到div1的value/text 后邊了.所以運行tpl.overwrite('div1',{id:'88'});后div2,div3沒了.
在此附上tpl.overwrite源碼(innerHTML直接賦值):
overwrite : function(el, values, returnElement){
el = Ext.getDom(el);
el.innerHTML = this.applyTemplate(values);
return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
}
問題知道了,可怎么辦呢,改Ext源碼?

12 下一頁閱讀全文

上一篇：很全的顯示陰歷（農(nóng)歷）日期的js代碼

下一篇：js繼承 Base類的源碼解析