javascript 一段代碼引發(fā)的思考第2/2頁(yè)
更新時(shí)間:2009年01月01日 15:30:50 作者:
寫在前面:這是一個(gè)關(guān)于Ext, Prototype, JavaScript方面的問(wèn)題,其實(shí)下面遇到的問(wèn)題本不是問(wèn)題,都是因?yàn)殄e(cuò)誤的理解造成的,本文的宗旨是希望讀者朋友避免我犯的同類錯(cuò)誤,遇事三思而后行,同時(shí)也體會(huì)下發(fā)現(xiàn)問(wèn)題,解決問(wèn)題,反思問(wèn)題這種精神活動(dòng)所帶來(lái)的快樂(lè)!
從做項(xiàng)目的角度來(lái)看,最好別改,因?yàn)槟悴磺宄髡叩南敕?容易把問(wèn)題擴(kuò)大化.
改源碼不是不行,但那是沒(méi)有辦法的辦法,如果能找到其它好的解決方案, 最好別改
(實(shí)際上Ext這塊沒(méi)有問(wèn)題,只是我在參照API使用時(shí),混淆了一些概念)
不改源碼,只能找到其它好的解決方案了,用prototype.js看看:
var tpl = new Ext.Template('<div id="div{id}">this is div{id}</div>');
//tpl.append('div1',{id:'2'});
//tpl.insertAfter('div2',{id:'3'});
Insertion.After($('div1'),tpl.applyTemplate({id:'2'}));
Insertion.After($('div1'),tpl.applyTemplate({id:'3'}));
結(jié)果:
<div id="div88">this is div88</div>
<div id="div2">this is div2</div>
<div id="div3">this is div3</div>
問(wèn)題解決了......................................
反思:為什么呢?
看代碼 (旁白:問(wèn)題越引越深)
Prototype.js line:4042 (ver 1.6.0.2)
var Insertion = {
Before: function(element, content) {
return Element.insert(element, {before:content});
},
Top: function(element, content) {
return Element.insert(element, {top:content});
},
Bottom: function(element, content) {
return Element.insert(element, {bottom:content});
},
After: function(element, content) {
return Element.insert(element, {after:content});
}
};
接著看:line:1616
insert: function(element, insertions) {
element = $(element);
...............................
for (var position in insertions) {
content = insertions[position];
position = position.toLowerCase();
insert = Element._insertionTranslations[position];
..............................
return element;
}
在接著看:line:2490
Element._insertionTranslations = {
before: function(element, node) {
element.parentNode.insertBefore(node, element);
},
top: function(element, node) {
element.insertBefore(node, element.firstChild);
},
bottom: function(element, node) {
element.appendChild(node);
},
after: function(element, node) {
element.parentNode.insertBefore(node, element.nextSibling);
},
.............
};
看出區(qū)別了吧:
Ext:
El. insertAdjacentHTML
Prototype:
El.parentNode.insertBefore
Protoype用El.parentNode.insertBefore是考慮兼容性問(wèn)題, Mozilla不支持El. insertAdjacentHTML,難到Ext沒(méi)考慮?( 旁白:思路已經(jīng)完全亂了,逐漸走向迷途的深淵)
在回顧下代碼:DomHelper.js line:267
insertHtml : function(where, el, html){
......
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 + '"';
}
var range = el.ownerDocument.createRange();
var frag;
switch(where){
case "beforebegin":
range.setStartBefore(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el);
return el.previousSibling;
case "afterbegin":
if(el.firstChild){
range.setStartBefore(el.firstChild);
frag = range.createContextualFragment(html);
el.insertBefore(frag, el.firstChild);
return el.firstChild;
}else{
el.innerHTML = html;
return el.firstChild;
}
case "beforeend":
if(el.lastChild){
range.setStartAfter(el.lastChild);
frag = range.createContextualFragment(html);
el.appendChild(frag);
return el.lastChild;
}else{
el.innerHTML = html;
return el.lastChild;
}
case "afterend":
range.setStartAfter(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el.nextSibling);
return el.nextSibling;
}
throw 'Illegal insertion point -> "' + where + '"';
}
從第二部分(第二個(gè)switch塊)看的出來(lái),Ext也考慮了,只是如果是ie的話,代碼走不到第二部分.
現(xiàn)在列出case分支與前面方法名的對(duì)應(yīng)關(guān)系:
insertFirst:' afterBegin'
insertBefore:' beforeBegin'
insertAfter:' afterEnd'
append:' beforeEnd'
對(duì)照上面的代碼,現(xiàn)在看來(lái),歸根到底問(wèn)題就是我混淆了append,insertAfter.以為append是指在當(dāng)前節(jié)點(diǎn)后面直接追加一個(gè)節(jié)點(diǎn), insertAfter是指把節(jié)點(diǎn)插到當(dāng)前節(jié)點(diǎn)后面.實(shí)際上如果是這樣理解的話append,insertAfter不就功能一樣了,那Ext作者寫兩個(gè)方法干嘛?.,唉,自己腦殘了,沒(méi)仔細(xì)分析代碼就亂用,結(jié)果引出這大長(zhǎng)串事.
摘錄:Ext.Template中關(guān)于append,insertAfter方法的說(shuō)明
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
提示:對(duì)于沒(méi)看懂的朋友請(qǐng)把第一句的 to 理解成 in 是不是就清晰多了呢.另外,如果對(duì)頁(yè)面元素操做的話請(qǐng)用Element,上面的insert,append功能它都有.
在多的努力用在了錯(cuò)誤的方向上,最終的結(jié)果都是零!
唉,
世間本無(wú)事, 庸人自擾之.
相關(guān)文章
微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02Bootstrap在線電子商務(wù)網(wǎng)站實(shí)戰(zhàn)項(xiàng)目5
這篇文章主要為大家分享了Bootstrap在線電子商務(wù)網(wǎng)站實(shí)戰(zhàn)項(xiàng)目,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10JavaScript實(shí)現(xiàn)的多個(gè)圖片廣告交替顯示效果代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的多個(gè)圖片廣告交替顯示效果代碼,涉及javascript數(shù)組遍歷及頁(yè)面元素動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JavaScript Array.flat()函數(shù)用法解析
這篇文章主要介紹了JavaScript Array.flat()函數(shù)用法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09javascript異步編程代碼書寫規(guī)范Promise學(xué)習(xí)筆記
這篇文章主要介紹了javascript異步編程代碼書寫規(guī)范Promise學(xué)習(xí)筆記,需要的朋友可以參考下2015-02-02詳解JavaScript的數(shù)據(jù)類型以及數(shù)據(jù)類型的轉(zhuǎn)換
這篇文章主要介紹了JavaScript的數(shù)據(jù)類型以及數(shù)據(jù)類型的轉(zhuǎn)換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04