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

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

Javascript: js支持158、159开头的手机号的验证; javascript学习网址备忘; JScript的条件编译; [原创]站长必须要知道的javascript广告代码; js实现的点击超链显示隐藏层; JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子; JavaScript 不只是脚本; 把JS与CSS写在同一个文件里的书写方法; Javascript & DHTML 实例编程（教程）基础知识; Javascript & DHTML 实例编程（教程）DOM基础和基本API; javascript实现的一个图片转移效果; 用js实现键盘方向键翻页功能的代码; js实现DIV的一些简单控制; 用CSS+JS实现的进度条效果效果; 爱恋千雪-US-AscII加密解密工具（网页加密）下载; 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口; 非常不错的页面特效建议大家看下; javascript Zifa FormValid 0.1表单验证代码打包下载; 实现javascript的延期执行或者重复执行的两个函数; 推荐一个不错的图片浏览效果

No. « ‹ 69 70 71 72 › »

技术文章搜索

关键字

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

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

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

登陆还没注册？