2007-10-12

prototype确实实用

关键字: javascript
今天解决一个bug时花了很长时间分析定位。

起因是我们自己写了一个tab函数，用来支持网页上分tab显示内容，可以局部更新，支持缓存和刷新。
但是后来发现，refresh content的时候采用AJAX方式取数据，而数据中的js脚本并不会执行。一开始不知道为什么会这样，我一直以为只要设置innerHTML就会执行包含的js，单独写了两个页面用prototype的Ajax.updater试验，也是可以执行的，真是搞不懂。
前辈教导我们，搞不定的时候读源码永远是一个好主意。于是看prototype──哦，原来如此：
javascript 代码
 
  1. update: function(element, html) {  
  2.   html = typeof html == 'undefined' ? '' : html.toString();  
  3.   $(element).innerHTML = html.stripScripts();  
  4.   setTimeout(function() {html.evalScripts()}, 10);  
  5.   return element;  
  6. },  

设置innerHTML时并不会做什么js的执行工作，其实是prototype帮我们完成了工作。真是实践中凝结的代码阿，它专门扩展了String类，添加了stripScripts和evalScripts，让我们方便许多。

嗯，看来我这个半瓶子水还是要多看看源码的。
评论
afcn0 2007-10-24
其实感觉还是有问题的,极端点,这个Ajax.Updater是同步的,并且希望update以后执行完js后我立即看到效果,可是timeout的话你这次看结果是不可能了,只能等你js停了,它才执行,10ms主要解决应该是innerHTML的渲染应该是
笨笨狗 2007-10-24
也许是为了解决浏览器的某些bug吧，要不然他大可不必延迟执行。或许，是为了起一个伪线程？
afcn0 2007-10-24
不过其setTimeout(function() {html.evalScripts()}, 10);这个10ms值得讨论,timeout就是在本次js结素后执行,难道js执行后和新innerHTML被浏览器解析完不是一回事,还有必要再延后10ms,值得讨论
笨笨狗 2007-10-24
Prototype是我的js学习榜样，嘿嘿
这个自动执行js是可以通过evalScripts这个选项来控制的……
ddh9504 2007-10-24
fsword 写道
今天解决一个bug时花了很长时间分析定位。<br />
<br />
起因是我们自己写了一个tab函数，用来支持网页上分tab显示内容，可以局部更新，支持缓存和刷新。<br />
但是后来发现，refresh content的时候采用AJAX方式取数据，而数据中的js脚本并不会执行。一开始不知道为什么会这样，我一直以为只要设置innerHTML就会执行包含的js，单独写了两个页面用prototype的Ajax.updater试验，也是可以执行的，真是搞不懂。<br />
前辈教导我们，搞不定的时候读源码永远是一个好主意。于是看prototype──哦，原来如此：<br />
<div class="code_title">javascript 代码</div>
<div class="dp-highlighter">
<div class="bar"> </div>
<ol class="dp-j" start="1">
<li class="alt"><span><span>update: function(element, html) {  </span></span></li>
<li class=""><span>  html = typeof html == 'undefined' ? <span class="string">''</span><span> : html.toString();  </span></span></li>
<li class="alt"><span>  $(element).innerHTML = html.stripScripts();  </span></li>
<li class=""><span>  setTimeout(function() {html.evalScripts()}, <span class="number">10</span><span>);  </span></span></li>
<li class="alt"><span>  <span class="keyword">return</span><span> element;  </span></span></li>
<li class=""><span>},  </span></li>
</ol>
</div>
<br />
设置innerHTML时并不会做什么js的执行工作，其实是prototype帮我们完成了工作。真是实践中凝结的代码阿，它专门扩展了String类，添加了<span>stripScripts和</span><span>evalScripts，让我们方便许多。<br />
<br />
嗯，看来我这个半瓶子水还是要多看看源码的。</span>
那是，这个框架博大精深
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

fsword
搜索本博客
存档
最新评论