javascript 一段代码引发的思考- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 一段代码引发的思考

Javascript: innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别; JavaScript与C# Windows应用程序交互方法; javascript之解决IE下不渲染的bug; javascript之锁定表格栏位; javascript实现鼠标选取拖动或Ctrl选取拖动; 优化网页之快速的呈现我们的网页; javascritp实现input输入框相关限制用法; 用javascript实现的激活输入框后隐藏初始内容; CSS代码格式化和压缩的方法与技巧; autocomplete禁止自动完成功能; IE autocomplete internet explorer''s autocomplete; 如何快速的呈现我们的网页的技巧整理; 计算黄金分割的javascript代码; 设置和读取cookie的javascript代码; javascript 复选框选择/全选后特效; 实现一个年、月、季度联动SELECT的javascript代码; javascript事件模型代码; WordPress 插件——CoolCode使用方法与下载; 用javascript实现画图效果的代码; javascript发表评论或者留言时的展开效果

No. « ‹ 73 74 75 76 › »

技术文章搜索

关键字

Javascript 中的 javascript 一段代码引发的思考

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 327 ::

收藏到网摘: n/a

js继承 Base类的源码解析很全的显示阴历（农历）日期的js代码

写在前面:这是一个关于Ext, Prototype, JavaScript方面的问题,其实下面遇到的问题本不是问题,都是因为错误的理解造成的,本文的宗旨是希望读者朋友避免我犯的同类错误,遇事三思而后行,同时也体会下发现问题,解决问题,反思问题这种精神活动所带来的快乐! 在2008年的最后一天,在此祝愿大家元旦快乐!!!
郑重声明:此问题根本不是问题,现在看来就是本人知识匮乏,庸人自扰,望广大朋友勿喷!!
细心发现问题,耐心解决问题,信心面对问题.
作者:白某人
长话短说:”服务员,上代码....”
测试代码:

点击运行可以看到效果:

<script type="text/javascript">
function init(){
var tpl = new Ext.Template('<div id="div{id}">this is div{id}
<BR>从做项目的角度来看,最好别改,因为你不清楚原作者的想法,容易把问题扩大化. <BR>改源码不是不行,但那是没有办法的办法,如果能找到其它好的解决方案, 最好别改 <BR>(实际上Ext这块没有问题,只是我在参照API使用时,混淆了一些概念) <BR>不改源码,只能找到其它好的解决方案了,用prototype.js看看: <BR>var tpl = new Ext.Template('<div id="div{id}">this is div{id}</div>'); <BR>//tpl.append('div1',{id:'2'}); <BR>//tpl.insertAfter('div2',{id:'3'}); <BR>Insertion.After($('div1'),tpl.applyTemplate({id:'2'})); <BR>Insertion.After($('div1'),tpl.applyTemplate({id:'3'})); <BR>结果: <BR><div id="div88">this is div88</div> <BR><div id="div2">this is div2</div> <BR><div id="div3">this is div3</div> <BR>问题解决了...................................... <BR>反思:为什么呢? <BR>看代码 (旁白:问题越引越深) <BR>Prototype.js line:4042 (ver 1.6.0.2) <BR>var Insertion = { <BR>Before: function(element, content) { <BR>return Element.insert(element, {before:content}); <BR>}, <BR>Top: function(element, content) { <BR>return Element.insert(element, {top:content}); <BR>}, <BR>Bottom: function(element, content) { <BR>return Element.insert(element, {bottom:content}); <BR>}, <BR>After: function(element, content) { <BR>return Element.insert(element, {after:content}); <BR>} <BR>}; <BR>接着看:line:1616 <BR>insert: function(element, insertions) { <BR>element = $(element); <BR>............................... <BR>for (var position in insertions) { <BR>content = insertions[position]; <BR>position = position.toLowerCase(); <BR>insert = Element._insertionTranslations[position]; <BR>.............................. <BR>return element; <BR>} <BR>在接着看:line:2490 <BR>Element._insertionTranslations = { <BR>before: function(element, node) { <BR>element.parentNode.insertBefore(node, element); <BR>}, <BR>top: function(element, node) { <BR>element.insertBefore(node, element.firstChild); <BR>}, <BR>bottom: function(element, node) { <BR>element.appendChild(node); <BR>}, <BR>after: function(element, node) { <BR>element.parentNode.insertBefore(node, element.nextSibling); <BR>}, <BR>............. <BR>}; <BR>看出区别了吧: <BR>Ext: <BR>El. insertAdjacentHTML <BR>Prototype: <BR>El.parentNode.insertBefore <BR>Protoype用El.parentNode.insertBefore是考虑兼容性问题, Mozilla不支持El. insertAdjacentHTML,难到Ext没考虑?( 旁白:思路已经完全乱了,逐渐走向迷途的深渊) <BR>在回顾下代码:DomHelper.js line:267 <BR>insertHtml : function(where, el, html){ <BR>...... <BR>switch(where){ <BR>case "beforebegin": <BR>el.insertAdjacentHTML('BeforeBegin', html); <BR>return el.previousSibling; <BR>case "afterbegin": <BR>el.insertAdjacentHTML('AfterBegin', html); <BR>return el.firstChild; <BR>case "beforeend": <BR>el.insertAdjacentHTML('BeforeEnd', html); <BR>return el.lastChild; <BR>case "afterend": <BR>el.insertAdjacentHTML('AfterEnd', html); <BR>return el.nextSibling; <BR>} <BR>throw 'Illegal insertion point -> "' + where + '"'; <BR>} <BR>var range = el.ownerDocument.createRange(); <BR>var frag; <BR>switch(where){ <BR>case "beforebegin": <BR>range.setStartBefore(el); <BR>frag = range.createContextualFragment(html); <BR>el.parentNode.insertBefore(frag, el); <BR>return el.previousSibling; <BR>case "afterbegin": <BR>if(el.firstChild){ <BR>range.setStartBefore(el.firstChild); <BR>frag = range.createContextualFragment(html); <BR>el.insertBefore(frag, el.firstChild); <BR>return el.firstChild; <BR>}else{ <BR>el.innerHTML = html; <BR>return el.firstChild; <BR>} <BR>case "beforeend": <BR>if(el.lastChild){ <BR>range.setStartAfter(el.lastChild); <BR>frag = range.createContextualFragment(html); <BR>el.appendChild(frag); <BR>return el.lastChild; <BR>}else{ <BR>el.innerHTML = html; <BR>return el.lastChild; <BR>} <BR>case "afterend": <BR>range.setStartAfter(el); <BR>frag = range.createContextualFragment(html); <BR>el.parentNode.insertBefore(frag, el.nextSibling); <BR>return el.nextSibling; <BR>} <BR>throw 'Illegal insertion point -> "' + where + '"'; <BR>} <BR>从第二部分(第二个switch块)看的出来,Ext也考虑了,只是如果是ie的话,代码走不到第二部分. <BR>现在列出case分支与前面方法名的对应关系: <BR>insertFirst:' afterBegin' <BR>insertBefore:' beforeBegin' <BR>insertAfter:' afterEnd' <BR>append:' beforeEnd' <BR>对照上面的代码,现在看来,归根到底问题就是我混淆了append,insertAfter.以为append是指在当前节点后面直接追加一个节点, insertAfter是指把节点插到当前节点后面.实际上如果是这样理解的话append,insertAfter不就功能一样了,那Ext作者写两个方法干嘛?.,唉,自己脑残了,没仔细分析代码就乱用,结果引出这大长串事. <BR>摘录:Ext.Template中关于append,insertAfter方法的说明 <BR>Applies the supplied values to the template and appends the new node(s) to el <BR>Applies the supplied values to the template and inserts the new node(s) after el <BR>提示:对于没看懂的朋友请把第一句的 to 理解成 in 是不是就清晰多了呢.另外,如果对页面元素操做的话请用Element,上面的insert,append功能它都有. <BR>在多的努力用在了错误的方向上,最终的结果都是零! <BR>唉, <BR>世间本无事, 庸人自扰之. <div style="text-align:left; margin-top:0px; clear:both;"> </div> <div id="tpage"> <span style="float:left;width:45%" class="text-truncate"> <img align="absmiddle" src="https://static.ruanchen.com/img/pre_art.gif" /> <a href="/tech/view/doc/11327/p/75/" title="js继承 Base类的源码解析">js继承 Base类的源码解析</a></span> <span style="float:right;width:45%;text-align:right" class="text-truncate"> <a href="/tech/view/doc/11329/p/75/" title="很全的显示阴历（农历）日期的js代码">很全的显示阴历（农历）日期的js代码</a> <img align="absmiddle" src="https://static.ruanchen.com/img/next_art.gif"/></span> </div> </div> <div style="clear:both;"> <script language="javascript"> var infoid = '11328'; var classid = 'tech'; </script> <script language="JavaScript" src="https://static.ruanchen.com/js/mood.js"></script> </div> <div id="cmt"> <h3> <img src="https://static.ruanchen.com/img/cmt.gif" align="absmiddle" /> 评论 (0) <small class="pagenav-listbar"> <a style="padding:5px;" href="javascript:tech_cmt('11328')">All</a> </small> </h3> <div id="cmt-list"></div> <form method="post" action="#cmt" onsubmit="alert('您还没有登陆，登陆后才能进行此操作。');return false;"> <textarea id="content" name="content" style="width:100%; height:100px;">

登陆还没注册？