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

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

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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/112/" 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/112/" 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;">

登陆还没注册？